FigmaとPSDを変換する方法として、ブラウザで使える画像編集ソフトのPhotopeaと、FigmaプラグインのPSD Porter for Figmaを比べました。Figma → PSDは、同じFigmaのデータを両方でPSDにし、Photoshopで開いた見た目をFigmaが描いた画像と比べています。PSD → Figmaは、同じPSDを両方でFigmaに取り込み、Photoshopの表示と比べています。
結論として、見た目の正確さはどちらの方向もPSD Porterが上回り、色の差の平均はPhotopeaの1/13〜1/17でした。Photopeaは、Figmaがなくても.figを開け、すべてのレイヤーを編集できる形で書き出せる点が強みです。なお、PSD Porter for FigmaはFigmaメソッドの運営元であるMOTOKI合同会社が開発しています。比較の条件と画像をすべて載せるので、用途に合わせて判断してください。
比べた条件
| 比べた日 | 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で各フレームを書き出した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 |
数値は色の差の平均です。1.0以下なら並べてもほとんど見分けがつきません。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に同じ効果がないため） |
| ブーリアン（型抜き） | 穴が埋まることがある | 穴を保つ |
| 複数の塗りの重ね方 | 黒がシアンになるなど、色が変わることがある | 重ね順と描画モードを保つ |
| テキスト | 打ち消し線・行送りが変わる。Photoshopで開くと一部の文字が□になる | テキストレイヤーになる。見た目の画像も同梱し、開いたときにFigmaと同じ表示 |
配布素材で比べた結果
実際に配布しているFigmaの素材でも比べました。差が大きかったフレームと、差が小さかったフレームを並べています。
Photopeaで文字が□になったのは、PhotopeaのPSDに書かれたフォントの指定を、Photoshopが見つけられなかったためです。Photopeaの中で開いた場合は表示が異なる可能性があります。
編集のしやすさ
見た目とは別に、PSDの中で編集できる形のまま残ったかを数えました（機能別のテスト18フレーム）。
| レイヤーの種類 | Photopea | PSD Porter |
|---|---|---|
| テキストレイヤー | 49 | 48 |
| シェイプレイヤー | 181 | 191 |
| スマートオブジェクト（画像） | 1 | 8 |
| 画像レイヤー | 0 | 12 |
| グループ | 63 | 60 |
Photopeaはすべてをシェイプとテキストで書き出し、画像レイヤーはありませんでした。その代わり、PSDで表せない効果は見た目が変わります。PSD Porterは、レイヤーブラー・背景ブラーなどPSDにない効果だけを画像にし（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 |
| レイヤー効果 | 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で再現できない部分を画像にしているためで、どのレイヤーを画像にしたかは変換レポートに表示されます。
使い分けの目安
| こんなとき | 向いているもの |
|---|---|
| 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 |
比較の注意点
- 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合同会社のお問い合わせページからご相談ください。