FigmaとPSDを変換する方法として、ブラウザで使える画像編集ソフトのPhotopeaと、FigmaプラグインのPSD Porter for Figmaを比べました。Figma → PSDは、同じFigmaのデータを両方でPSDにし、Photoshopで開いた見た目をFigmaが描いた画像と比べています。PSD → Figmaは、同じPSDを両方でFigmaに取り込み、Photoshopの表示と比べています。
2026年10月6日の検証では、4つの集計すべてでPSD Porterの平均色差が小さく、Photopeaの約1/13〜1/17でした。個別にはPhotopeaのほうが差の小さい項目もあり、この比率はすべてのデザインに当てはまるものではありません。Photopeaは、Figmaがなくても.figを開け、今回の18フレームではテキストや図形を編集可能なレイヤーとして書き出せました。なお、PSD Porter for FigmaはFigmaメソッドの運営元であるMOTOKI合同会社が開発しています。以下に比較条件、集計値、代表的な比較画像を載せています。機能別テストはPSD Porterの開発用データを使っているため、実際に変換したいファイルでも確かめてください。
比べた条件
| 比べた日 | 2026年10月6日 |
|---|---|
| Photopea | ブラウザ版（www.photopea.com）。.figを開き、PSDで保存 |
| PSD Porter for Figma | Figma → PSDは1.1.0（.figからPSDを作る同じ変換処理）、PSD → Figmaは1.1.1 |
| 比較元の画像 | Figma → PSDはFigmaで各フレームを書き出したPNG。PSD → FigmaはPhotoshopで書き出したPNG |
| 見た目の確認 | できたPSDをPhotoshop 2026（27.10）で開き、PNGに書き出す |
| 測った値 | 正解の画像との色の差（ピクセルごとのRGBの差、0〜255）の平均。0なら完全に一致 |
| 比べたデータ | 内容 |
|---|---|
| 機能別のテスト（18フレーム） | 図形・ブーリアン・グラデーション・画像・線・影・ぼかし・マスク・描画モード・テキスト・コンポーネント・オートレイアウトなどを1フレームずつ入れたFigmaのファイル |
| 見出し素材（40フレーム） | Figmaメソッドで配布している見出し素材40種類 |
| ボタン素材（35フレーム） | Figmaメソッドで配布しているボタン素材35種類 |
結果のまとめ
| データ | Photopea | PSD Porter |
|---|---|---|
| 機能別のテスト（18フレーム） | 8.68 | 0.67 |
| 見出し素材（40フレーム） | 6.15 | 0.38 |
| ボタン素材（35フレーム） | 5.08 | 0.34 |
| PSD → Figma（機能別 131項目） | 22.21 | 1.32 |
数値は色の差の平均です。平均が小さくても、文字の欠落や一部分のずれが目立つ場合があります。見た目や編集可能性は、各要素を確認して判断してください。この検証でPhotopeaは、図形・グラデーション・画像の多くは近い見た目になりましたが、描画モード・マスク・影・ぼかし・一部のテキストで差が大きくなりました。
機能別のテストで比べた結果
| フレーム | Photopea | PSD Porter |
|---|---|---|
| F01 図形 | 1.49 | 0.56 |
| F02 ブーリアン | 2.12 | 0.04 |
| F03 グラデーション | 3.37 | 0.43 |
| F04 複数の塗り | 11.23 | 0.20 |
| F05 画像 | 10.22 | 1.05 |
| F06 線 | 2.30 | 0.99 |
| F07 影 | 6.62 | 0.75 |
| F08 ぼかし | 5.95 | 1.41 |
| F09 マスク | 16.69 | 0.21 |
| F10 入れ子・変形 | 3.35 | 0.21 |
| F11 描画モード | 42.40 | 0.75 |
| F12 グループの描画モード | 15.20 | 0.35 |
| F13 テキスト（欧文） | 12.44 | 1.66 |
| F14 テキスト（和文） | 11.30 | 1.14 |
| F15 コンポーネント | 6.47 | 0.87 |
| F16 オートレイアウト | 1.90 | 0.24 |
| F17 グラデーションの背景 | 3.11 | 0.88 |
| F18 透明な背景 | 0.07 | 0.30 |
差が大きかった機能
| 機能 | Photopeaで変換したPSD | PSD Porterで変換したPSD |
|---|---|---|
| 描画モード（乗算・スクリーンなど） | すべて「通常」になり、下の色と混ざらない | 同じ描画モードになる |
| グループの描画モード・不透明度 | 重なりの色が変わる | Figmaの「通過」の考え方に合わせて変換する |
| マスク | 一部のマスクが効かず、隠れていた形が見える | ベクターマスク・クリッピングマスクになる |
| ドロップシャドウ・インナーシャドウ | 多くの影が消える | レイヤー効果の影になる（ぼかしの大きさを換算） |
| レイヤーブラー・背景ブラー | ぼけない | このプラグインでは、ぼかした見た目を画像にする |
| ブーリアン（型抜き） | 穴が埋まることがある | 穴を保つ |
| 複数の塗りの重ね方 | 黒がシアンになるなど、色が変わることがある | 重ね順と描画モードを保つ |
| テキスト | 打ち消し線・行送りが変わる。Photoshopで開くと一部の文字が□になる | テキストレイヤーになる。見た目の画像も同梱し、開いたときにFigmaと同じ表示 |
配布素材で比べた結果
実際に配布しているFigmaの素材でも比べました。差が大きかったフレームと、差が小さかったフレームを並べています。
Photopeaで文字が□になったのは、PhotopeaのPSDに書かれたフォントの指定を、Photoshopが見つけられなかったためです。Photopeaの中で開いた場合は表示が異なる可能性があります。
編集のしやすさ
見た目とは別に、PSDの中で編集できる形のまま残ったかを数えました（機能別のテスト18フレーム）。
| レイヤーの種類 | Photopea | PSD Porter |
|---|---|---|
| テキストレイヤー | 49 | 48 |
| シェイプレイヤー | 181 | 191 |
| スマートオブジェクト（画像） | 1 | 8 |
| 画像レイヤー | 0 | 12 |
| グループ | 63 | 60 |
この18フレームでは、Photopeaの出力はテキスト・シェイプ・スマートオブジェクトとグループで構成され、通常の画像レイヤーはありませんでした。ただし、一部の効果は元の見た目を保てませんでした。PSD Porterは、レイヤーブラー・背景ブラーなどを画像として出力し（12レイヤー）、画像の塗りは元の画像を埋め込んだスマートオブジェクトにします。どのレイヤーを画像にしたかは、変換レポートに理由と対処法つきで表示されます。
PSD → Figmaで比べた結果
PhotopeaはFigmaのファイルを作れないため、PSDをPhotopeaでSVGに書き出し、FigmaにSVGを配置しました。PSD Porterは、プラグインの「PSD → Figma」でPSDを直接取り込んでいます。使ったPSDは、Photoshopの機能を1つずつ入れた131項目のテスト用ファイルです。
| Photoshopの機能 | 項目数 | Photopea経由 | PSD Porter |
|---|---|---|---|
| シェイプ | 11 | 0.03 | 0.03 |
| 線 | 7 | 7.59 | 0.35 |
| 塗り（グラデーション・パターンなど） | 10 | 29.56 | 0.54 |
| テキスト | 16 | 10.05 | 4.52 |
| 画像 | 7 | 0.09 | 0.26 |
| マスク | 7 | 29.76 | 1.17 |
| 不透明度・グループの合成 | 7 | 9.47 | 0.15 |
| 描画モード | 27 | 42.93 | 1.46 |
| 構造（非表示・ロック、グループの入れ子） | 2 | 0.02 | 0.01 |
| レイヤー効果 | 19 | 11.63 | 0.69 |
| 調整レイヤー | 18 | 41.33 | 1.57 |
| 全体（131項目） | 131 | 22.21 | 1.32 |
| 色の差1.0以下の項目 | 32 | 100 |
131項目のうち、PSD Porterのほうが元に近かったのは95項目、ほぼ同じだったのは33項目、Photopea経由のほうが近かったのは3項目です。Photopea経由では、グラデーションが1色の塗りになり、レイヤーマスク・クリッピングマスク・描画モード・調整レイヤー・縦書き・ベベルとエンボスが失われました。
Photopea経由のほうが近かった3項目は、複数行のテキスト2項目とスマートフィルター1項目です。Photopeaは段落を1行ずつ別のテキストに分け、スマートフィルターを画像にするため、見た目は合いますが、段落やフィルターとしては編集できなくなります。PSD Porterは段落を1つのテキストのまま取り込み、ぼかし（ガウス）のスマートフィルターはFigmaのレイヤーブラーにします。
| Figmaにできたレイヤー（131項目の合計） | Photopea経由 | PSD Porter |
|---|---|---|
| テキスト | 29 | 18 |
| ベクター・図形 | 263 | 126 |
| 画像 | 62 | 93 |
Photopea経由はテキストが多くなっていますが、これは段落が1行ずつに分かれたためです。PSD Porterの画像が多いのは、元のPSDの画像レイヤーと、描画モードや調整レイヤーの結果をFigmaで再現できない部分を画像にしているためで、どのレイヤーを画像にしたかは変換レポートに表示されます。
検証時の仕様と変換後の確認点
結果は、2026年10月6日時点のPhotopeaとPSD Porter for Figma 1.1.0（PSD → Figmaは1.1.1）のものです。
どちらも更新で変わる可能性があるため、変換する前に、元のFigmaの値を記録しておくと比べやすくなります。
2026年10月12日に、Figmaの日本語表示で、長方形を選んだときの画面を確認しました。
右側のデザインパネルに、位置・レイアウト（幅と高さ）・外観（不透明度・角の半径・ブレンドモード）・塗り・線・エフェクト・エクスポートが並びます。
この画面では、幅160・高さ100、角の半径24、塗りは326EE6（不透明度100%）でした。
- 変換の前後で、サイズ・角の半径・塗りの色を比べる
- ブレンドモードは、変換で「通常」になることがあるため、必ず確認する
- 画面の名前や並びは、Figmaの更新で変わることがある
使い分けの目安
| こんなとき | 向いているもの |
|---|---|
| Figmaの見た目どおりのPSDで納品・入稿したい | PSD Porter for Figma |
| 描画モード・マスク・影を多く使ったデザインを変換したい | PSD Porter for Figma |
| PSDをFigmaで編集できる形で取り込みたい | PSD Porter for Figma（Photopeaは.figを書き出せず、SVG経由になる） |
| Figmaのアカウントがなく、.figだけを持っている | Photopea。大量の変換やFigmaなしでの変換は、PSD Porterの有料のWeb版もご相談ください |
| PSDをそのままブラウザで編集したい | Photopea |
変換の目的から方法を選ぶ
今回の検証をもとにした候補です。変換後の見た目や編集可能性を保証するものではないため、納品前に対象ファイルで確認してください。
- Figmaの見た目どおりのPSDで納品・入稿したい。→ PSD Porter for Figma
- 描画モード・マスク・影を多く使っている。→ PSD Porter for Figma
- PSDをFigmaで編集できる形で取り込みたい。→ PSD Porter for Figma
- Figmaのアカウントがなく、.figだけを持っている。→ Photopea
- PSDをそのままブラウザで編集したい。→ Photopea
よくある質問：Figma PSD 違いで迷ったときのチェックリスト
Photopeaでも、FigmaとPSDを変換できますか？
できます。
Photopea公式の手順では、.figを開いてPSDとして保存できます。逆方向はこの記事ではPSD→SVG→Figmaの経路を使いました。2026年10月6日の検証では、対象の描画モードが「通常」になるなどの差が出ています。
変換した結果が違うとき、何を確認しますか？
元のFigmaで、サイズ・角の半径・塗り・ブレンドモードを確認し、変換後と比べます。
図は、Figmaで角丸の長方形を選んだ状態で、160×100のサイズ表示が出ています。
結果は、いつの時点のものですか？
2026年10月6日時点です。
更新で変わる可能性があります。
チェックリスト：
- 変換する前に、元のFigmaのサイズ・角の半径・塗りを記録した
- ブレンドモードを確認した
- 変換後のPSDを、Photoshopで開いて確認した
- Photopeaかプラグインかを、使い分けの目安で選んだ
- 結果が2026年10月6日時点であることを確認した
比較の注意点
- PSDからFigmaへの変換では、PhotopeaはFigmaのファイルを作れないため、SVGに書き出してFigmaに配置した結果で比べています。
- 機能別のテストは、PSD Porterの開発に使っているファイルです。見出し・ボタン素材は、実際に配布している素材です。
- 結果は2026年10月6日時点のPhotopeaとPSD Porter 1.1.0（PSD → Figmaは1.1.1）のものです。どちらも更新で変わる可能性があります。
- Figma → PSDの見た目はPhotoshopで開いたときの表示で比べています。ほかのソフトで開いた場合は結果が異なります。
Photopeaの使い方（.figをPSDにする手順、PSDをFigmaに取り込む手順）はPhotopeaの使い方で紹介しています。PSD Porter for Figmaの使い方や、PSDからFigmaへの機能別の再現度はPSD Porter for Figmaの使い方で紹介しています。ページ単位の一括変換や、Figmaをお持ちでない方向けのWeb版変換ツール（有料）は、MOTOKI合同会社のお問い合わせページからご相談ください。