PSDをFigmaへ移す場合、1枚の画像として配置する方法と、プラグインでレイヤーを変換する方法があります。psd.to.designは第三者の変換プラグインです。Figmaの標準インポートにPSDが含まれるわけではありません。
この記事は2025年5月に掲載したsample.psdの読み込み画像を残し、編集可能な読み込みと統合画像の違いを説明します。2026年10月3日に提供ページの説明は確認しましたが、同じファイルを再変換した結果ではありません。プラグインの提供ページ、Figma標準の対応形式
レイヤー変換と画像配置を選ぶ
| 目的 | 方法 | 確認すること |
|---|---|---|
| 見た目を参考として置く | PhotoshopからPNG・JPGを書き出して配置 | 画像のサイズ・解像度 |
| 文字や図形を個別に編集する | psd.to.designなどでPSDを変換 | 編集可能な文字・レイヤー・効果の再現 |
| 変換後の編集を減らして見た目を優先する | 統合画像として読み込む | 個別レイヤーとしては編集できない |
変換前に元のPSDを保管し、フォント、マスク、レイヤー効果、描画モードを確認します。提供元の説明ではファイルはローカルで処理し、サーバーへ送信しないとされています。これは提供元の説明であり、この記事で通信を計測した結果ではありません。
2026年10月3日の提供ページには無料枠として5回のインポート、有料のdivRIOTS ONEで複数ファイルの同時処理などが案内されています。容量や追加機能の条件は利用時の表示も確認し、「無料で無制限」「すべて完全再現」と読み替えないでください。商用利用などの許諾は、機能や料金の説明だけでは判断できません。
psd.to.designの読み込み手順
次は過去の画面に沿った手順です。現在のボタン名や配置が異なる場合は、プラグインの表示に従います。
- Figmaのプラグイン検索でpsd.to.designを探し、提供元を確認します。
- プラグインを起動します。
- 対象のPSDを読み込み領域へドラッグ＆ドロップします。
- インポート設定とフォントの対応を確認します。
- Importを実行し、読み込まれたレイヤーを元のPSDと比較します。
Fully editableとFlattenedの違い
過去の設定画面では、Fully editableとFlattened in a single image layerを選択できました。
Fully editableは、文字やレイヤーを個別に編集するための変換です。設定画面でrecommendedと案内されていても、すべてのPSDで元の構造や効果が完全に保持される保証ではありません。
Flattened in a single image layerは、1枚の統合画像として扱う方法です。レイヤーの個別編集が不要な参照用途では選択肢になりますが、後から文章や図形をFigmaの要素として変更する用途とは区別します。
Font mappingsを確認する
Font mappingsは、元のPSDとFigmaで使えるフォントの対応を指定する設定です。No missing fontと表示された場合も、元の書体・ウェイト・改行まで一致するかを確認してください。
代替フォントで読み込めても、文字幅が変わるとボタンやテキストの高さが変わります。Figmaの欠落フォントへの対処で、利用可能な書体と置き換えの影響を確認できます。
過去のサンプル結果と確認項目
掲載した2025年5月のサンプルでは、レイヤー構造とテキスト情報を持つ状態で展開されています。この画像はそのサンプルの記録であり、現在のプラグインやすべてのPSDについての検証結果ではありません。
- 文字をテキストとして選び、必要な編集ができるか。
- 元のPSDと同じ位置・改行・サイズになっているか。
- マスク、ぼかし、影、描画モードなどに差がないか。
- グループの構造や非表示レイヤーが意図した状態か。
- 個別編集が必要な箇所が画像に統合されていないか。
表示倍率をそろえて比較し、必要ならFigma側で効果や文字を作り直します。移行した画面を再利用する場合は、基本操作やオートレイアウトで、今後の編集方法を整えてください。