01
Figma のフレームを PNG で書き出し
必要なフレームを選び、鮮明な PNG で書き出します。.fig ファイルではなく、フレームの画像を 1 枚ずつアップロードしてください。
Figma→PSD コンバーター
Figma を PSD に変換： フレームの書き出し画像をレイヤーに
Figma のフレームを PNG で書き出してここにアップロードすると、見えているアートワークをラスターレイヤーに分けられます。PSD をダウンロードして Photoshop でビジュアルを編集でき、コンポーネントやオートレイアウトは Figma 側に残ります。
PNG、JPG、WebP の書き出し画像をアップロード個別のラスターレイヤーに分離Photoshop で編集を続けられる
画像をアップロード
0/1画像をアップロード
書き出した PNG、JPG、WebP をアップロード · 最大 24 MB · 総ピクセル数 262,144 以上
自動
最大 10 レイヤーAIが最初に作成する編集可能なビジュアルグループ数を選択します。「自動」は最大 10 レイヤーまでです — レイヤーが多いほど分解に時間がかかります。結果を確認した後、さらに細かく分解できます。
例：
1 レイヤーにつき 8 クレジットを消費します。
フレーム画像から PSD へ
例： イメージ図：Web のヒーローセクションや UI のアートワークを Photoshop に持ち込みます。
Figma→PSD 変換の手順
書き出したフレーム 1 枚から始め、見えているアートワークをビジュアル編集用の PSD にします。
02
要素を指定して分離
書き出した画像をアップロードし、必要な部分を書いて、ワークスペースに表示されるクレジットでレイヤーを生成します。
03
確認して PSD をダウンロード
レイヤーのプレビューを確認してから、レイヤー付き PSD をダウンロードし、Photoshop で仕上げます。
ラスターレイヤーの中身を見る
Figma→PSD 変換で画像の内容がどう分かれるかを見る
商品か背景を選んで、個別のラスターレイヤーがどう働くかを確かめてから、ご自身のデザインの書き出し画像で試してください。
01商品当サイトの画像レイヤー分離ワークフローで保存した結果を、ラスターレイヤーの例として掲載しています。このサンプルは Canva や Figma から書き出したものではありません。
Figma のフレームのアートワークをレイヤー付き PSD に
書き出したフレームを出発点に、写真の合成やビジュアルのレタッチを Photoshop で続けられます。
Figma のフレーム書き出し画像を Photoshop 作業用に変換
- 仕上げたい Web のヒーローセクションやビジュアルのフレームを書き出します。
- 見えている画像エリアを周りのアートワークから分離します。
- レイアウトやコンポーネントの変更用に、元の Figma ファイルは残しておきます。
Figma のフレーム画像から見えているカードを分離
- 分離したい写真カードやビジュアルブロックを指定します。
- 新しいアートワークに移す前に、ラスターの切り抜きを確認します。
- カードの状態、インタラクション、コンポーネントのプロパティは書き出されません。
Figma のヒーローアートワークを PSD レイヤーに
- メインの写真、装飾のアクセント、背景領域を分離します。
- Photoshop での合成中に、生成されたレイヤーを調整します。
- 編集可能なテキストやベクターシェイプは、使用するエディターで作り直します。
ダウンロード前に Figma→PSD のレイヤーを確認
- ダウンロードする前に、各レイヤーのプレビューを確認します。
- 細かなエッジと、再構成された背景領域を確認します。
- PSD をダウンロードし、Photoshop で編集を仕上げます。
AI で生成したイメージ図です。編集の活用例を示すもので、変換ツールの実際の結果ではありません。
よくある質問
Figma→PSD 変換のよくある質問
結果には、画像の見えている内容をもとに AI が生成したラスターレイヤーが含まれます。元のアプリのドキュメントやネイティブのオブジェクトは再現されません。