FigmaでPSDファイルを読み込める！便利なプラグイン「psd.to.design」
これまで、PSD形式のデザインデータをFigmaに移行するには、別のソフトを経由したり、手作業で再現したりと、かなり手間がかかっていました。
しかし、プラグイン「psd.to.design」を使えば、直接PSDファイルを読み込めるようになり、作業効率が大幅にアップします。
※PSD形式のファイルとは、、「Photoshop」というソフトで作成し保存したファイルのこと。保存をクリックするとすると、「●●●.psd」という形式が表示される。
今回は、実際にこのプラグインを使ってPSDファイルをFigmaに読み込む方法を紹介します。
PSDファイルをFigmaに読み込む手順
今回は検証用に「sample.psd」というファイルを用意しました。以下の手順で読み込んでいきます。
-
Figmaを開く
Figmaを起動し、「psd.to.design」と検索してプラグインを立ち上げます。
-
PSDファイルをドラッグ＆ドロップ
表示されたウィンドウ（↑上の画面）に、変換したいPSDファイルをドラッグ＆ドロップします。 -
設定画面が表示される
読み込み設定の画面が表示されるので、必要に応じて設定を確認します。 -
「Import」ボタンをクリック
設定を確認したら、そのまま「Import」ボタンを押して読み込みを開始します。
————————–
オプションの解説
インポート設定（Import Settings）
-
Fully editable（←推奨）
各レイヤーや要素をFigma上で編集可能な状態で読み込みます。 -
Flattened in a single image layer
全てのレイヤーを一枚の画像にまとめて読み込みます。編集はできませんが、表示確認には適しています。
フォント置換（Font Mappings）
PSD内のフォントがFigmaに存在しない場合、自動で代替フォントに置き換えられます。
今回のサンプルでは「No missing font（フォントの欠落なし）」と表示され、すべて正しく読み込まれました。
————————–
完了！
Figma上で、PSDファイルが忠実に再現されました。レイヤー構造も保持されており、スムーズに編集作業へ移行できます。
まとめ
Photoshopでのデザインにこだわるデザイナーさんも多く、特に装飾性の高いゲーム業界や遊技機業界ではPSD形式が根強く使われています。
そうした現場でも、「psd.to.design」プラグインを活用すれば、Figmaとの連携が非常にスムーズになります。
FigmaユーザーでPSDデータを扱う機会がある方は、ぜひこのプラグインを活用してみてください！