Photopea（フォトピー）は、ブラウザで使える無料の画像編集ソフトです。PhotoshopのPSDをそのまま開いて編集でき、Figmaの.figファイルも開けます。Figmaのデザインを「PSDで納品してほしい」と言われたときや、受け取ったPSDをFigmaで使いたいときに便利です。
この記事では、Photopeaを使ってFigmaとPSDを変換する手順と、実際にどこまで正確に変換できるかを検証した結果を紹介します。後半では、レイヤーを保ったまま双方向に変換できるFigmaプラグイン「PSD Porter for Figma」との比較も載せています。
Photopeaとは
| 使い方 | ブラウザでwww.photopea.comを開くだけ。インストールやアカウント登録は不要 |
|---|---|
| 料金 | 無料（広告あり）。広告を消す有料プランもある |
| 開けるファイル | PSD・AI・XD・Sketch・.fig・PDF・SVG・PNG・JPGなど |
| 保存できる形式 | PSD・PNG・JPG・WEBP・PDF・SVGなど（.figには保存できない） |
| ファイルの扱い | この記事のローカルファイルの読み込み・変換・端末への保存は、ブラウザ内で処理する |
画面はPhotoshopによく似ていて、レイヤー・マスク・レイヤー効果・調整レイヤーなど、Photoshopの主な機能をブラウザで使えます。
FigmaのデザインをPSDにする手順
- Figmaで変換したいファイルを開き、メニューの「ファイル」→「ローカルコピーを保存」で.figファイルを保存します。
- ブラウザでPhotopeaを開き、保存した.figファイルを画面にドラッグ＆ドロップします（「ファイル」→「開く」でも開けます）。
- Figmaのフレームやレイヤーが、Photopeaのレイヤーとして読み込まれます。
- 「ファイル」→「PSDとして保存」を選ぶと、PSDファイルがダウンロードされます。
Figmaのアカウントがなくても、.figファイルさえあれば変換できるのがPhotopeaの強みです。
PSDをFigmaに取り込む手順
Photopeaは.figファイルに保存できません。そこで、PSDをPhotopeaでSVGに書き出し、FigmaにSVGを読み込みます。
- PhotopeaでPSDを開きます。
- 「ファイル」→「別名で保存」→「SVG」を選び、SVGファイルを保存します。
- FigmaにSVGファイルをドラッグ＆ドロップします。
この検証では、図形はベクター、複数行の文字は1行ずつのテキストとして読み込まれました。描画モード・調整レイヤー・一部のマスクなどは、このSVG経由の変換では保持されませんでした。SVG形式そのものの機能上限ではなく、Photopeaの書き出しとFigmaの読み込みを通した結果です。詳しくは次の検証結果で紹介します。
変換方向ごとの手順と確認事項
Figma→PSDはPhotopea公式の変換手順、PSDやSVGの保存は公式の保存方法で確認できます。以下は、この記事で試した2つの変換経路です。
- どちらの方向に変換したいかを決める。FigmaからPSDか、PSDからFigmaか。
- FigmaからPSD：Figmaで、「ファイル」→「ローカルコピーを保存」で、.figファイルを保存する。Photopeaを開き、.figをドラッグ＆ドロップして、「ファイル」→「PSDとして保存」を選ぶ。
- PSDからFigma：Photopeaは.figに保存できないため、PSDをPhotopeaで開いて、「ファイル」→「別名で保存」→「SVG」で書き出し、FigmaにSVGをドラッグ＆ドロップする。
- 変換後は、元の見た目と見比べる。記事の検証では、再現できたものとできなかったものがある。この検証では、SVG経由で描画モード・調整レイヤー・一部のマスクなどが保持されなかった。
- 見た目やレイヤーまで合わせたい場合は、記事で比較している、Figmaプラグイン「PSD Porter for Figma」も検討する。
- 納品や共有の前に、必ず相手の環境（PhotoshopやFigma）で開いて確認する。
変換の精度は、データの内容によって変わります。必ず自分のデータで確認してください。
Photopeaでどこまで正確に変換できるか検証した
Photopeaで変換したデータを、元の見た目とピクセル単位で比べました。数値は元の画像との色の差（RGBの差、0〜255）の平均で、0なら比較画像の画素値が一致します。平均値だけでは部分的な欠落や文字のずれを判断できないため、数値と見た目の両方を確認してください。
| 方向 | 使ったデータ | 比べ方 | Photopeaの色の差 |
|---|---|---|---|
| Figma → PSD | Figmaの機能を1つずつ入れたテスト用ファイル（18フレーム） | PSDをPhotoshopで開いた表示と、Figmaの表示 | 8.68 |
| Figma → PSD | Figmaメソッドの見出し素材（40フレーム） | 同上 | 6.15 |
| PSD → Figma | Photoshopの機能を1つずつ入れたテスト用PSD（131項目） | SVGをFigmaに置いた表示と、Photoshopの表示 | 22.21 |
Figma → PSD：再現できたもの・できなかったもの
| Figmaの機能 | Photopeaで作ったPSD |
|---|---|
| 図形・角丸・オートレイアウト | ほぼ同じ見た目のシェイプレイヤーになる |
| グラデーション・画像 | おおむね再現される |
| 描画モード（乗算・スクリーンなど） | すべて「通常」になり、下の色と混ざらない |
| マスク | 一部が効かず、隠れていた形が見える |
| ドロップシャドウ・インナーシャドウ | 多くの影が消える |
| レイヤーブラー・背景ブラー | ぼけない |
| テキスト | テキストレイヤーになるが、打ち消し線・行送りが変わる。Photoshopで開くと一部の文字が□になる |
PSD → Figma：再現できたもの・できなかったもの
| Photoshopの機能 | PhotopeaのSVGをFigmaに置いた結果 |
|---|---|
| シェイプ・画像・パターン | ほぼ同じ見た目になる |
| テキスト | テキストになるが、複数行の段落は1行ずつ別のテキストに分かれる。縦書きは横書きになる |
| グラデーション | 1色の塗りになる |
| レイヤーマスク・クリッピングマスク | マスクが外れ、隠れていた部分が見える |
| 描画モード | 「通常」になる |
| 調整レイヤー（明るさ・白黒など） | 効果が消える |
| ベベルとエンボスなどのレイヤー効果 | 多くが消える |
今回のテストでは、図形や画像に比べ、描画モード・マスク・影・調整レイヤーで差が目立ちました。シンプルなデザインでも、文字・色・レイヤー構造を変換後に確認してください。
見た目まで合わせたいならPSD Porter for Figma
PSD Porter for Figmaは、FigmaとPSDをレイヤー構造を保ったまま双方向に変換するFigmaプラグインです。Figmaメソッドの運営元であるMOTOKI合同会社が開発し、無料で公開しています。
- Figma → PSD：フレームを選んで実行するだけ。描画モード・マスク・影・テキストを、Photoshopで編集できる形のまま書き出します
- PSD → Figma：PSDを選ぶと、Figmaの図形・テキスト・グループとして組み立てます。グラデーション・マスク・描画モード・レイヤー効果を変換します。調整レイヤーは色を焼き込むため、元の調整設定としては編集できません
- 変換レポート：Figma（またはPhotoshop）にない機能は画像にして見た目を保ち、どのレイヤーをなぜ画像にしたかを対処法つきで表示します
- ファイルは外に出ない：変換はすべて自分のパソコンの中で行い、どこにも送信しません。Figmaのセキュリティ自己評価への回答も提出・審査済みです。回答の審査を、実装全体の安全性保証として扱わないでください
PhotopeaとPSD Porterを比べた結果
上の検証と同じデータを、PSD Porter for Figmaでも変換して比べました。
| 方向・データ | Photopea | PSD Porter |
|---|---|---|
| Figma → PSD（機能別 18フレーム） | 8.68 | 0.67 |
| Figma → PSD（見出し素材 40フレーム） | 6.15 | 0.38 |
| Figma → PSD（ボタン素材 35フレーム） | 5.08 | 0.34 |
| PSD → Figma（機能別 131項目） | 22.21 | 1.32 |
| PSD → Figma で色の差1.0以下の項目 | 32項目 | 100項目 |
Figma → PSD
PSD → Figma
| 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 |
今回の集計では、シェイプの平均色差は両方0.03、画像はPhotopea経由0.09、PSD Porter0.26でした。平均値だけでは個々の要素の一致や編集可能性は判断できません。差がついたのは、グラデーション・マスク・描画モード・調整レイヤーです。一方で、複数行のテキスト（2項目）とスマートフィルター（1項目）はPhotopea経由のほうが元に近い結果でした。Photopeaは段落を1行ずつのテキストに分け、スマートフィルターを画像にするため、見た目は合いますが段落やフィルターとしては編集できません。
機能ごとの比較画像と、レイヤーの種類ごとの内訳はFigmaとPSDの変換精度をPhotopeaと比べた記事にまとめています。
使い分けの目安
| こんなとき | 向いているもの |
|---|---|
| Figmaの見た目どおりのPSDで納品・入稿したい | PSD Porter for Figma |
| 受け取ったPSDを、Figmaで編集できる形で取り込みたい | PSD Porter for Figma |
| 描画モード・マスク・影・調整レイヤーを使ったデザイン | PSD Porter for Figma |
| Figmaのアカウントがなく、.figだけを持っている | Photopea |
| PSDをブラウザでちょっと直したい | Photopea |
今回の集計ではPSD Porter for Figmaの平均色差が小さく、Figma内で直接読み書きできました。ただし、個別にはPhotopea経由のほうが差の小さい例もあります。変換したいファイルで見た目と編集可能性を試し、PSDをブラウザで開いて修正したい場合はPhotopeaを候補にしてください。
検証の条件
- 2026年10月6日に、ブラウザ版のPhotopeaとPSD Porter for Figma 1.1.1で検証しました。どちらも更新で結果が変わる可能性があります。
- Figma → PSDは、できたPSDをPhotoshop 2026で開いた表示を、Figmaで書き出した画像と比べました。
- PSD → Figmaは、Figmaに取り込んだ結果を書き出した画像を、Photoshopで書き出した画像と比べました。PhotopeaはSVGで書き出してFigmaに配置しています。
- テスト用のファイルは、PSD Porterの開発に使っているものです。見出し・ボタン素材は、Figmaメソッドで実際に配布している素材です。
PSD Porter for Figmaのインストール方法と使い方、機能ごとの再現度はPSD Porter for Figmaの使い方で紹介しています。大量のファイルの一括変換や、Figmaをお持ちでない方向けのWeb版（有料）は、MOTOKI合同会社のお問い合わせページからご相談ください。
よくある質問：PhotopeaでFigmaとPSDを変換するときのチェックリスト
Photopeaは、無料で使えますか？
基本的な編集は無料で使えます。広告なしのPremiumもあります。公式のアカウント案内に従い、最新料金は画面上部のAccountで確認してください。
インストールやアカウント登録は必要ですか？
この記事のローカルファイルの変換は、ブラウザでPhotopeaを開いて行えます。インストールやログインは不要です。Premiumを利用する場合はログインが必要です。
.figファイルをPhotopeaで開けますか？
開けます。Figmaのアカウントがなくても、受け取った.figをPhotopeaで開いてPSDとして保存できます。ただし、Photopeaは.figに保存できません。
PSDをFigmaに取り込むには？
PhotopeaでPSDを開き、SVGとして書き出して、FigmaにSVGをドラッグ＆ドロップします。この記事の検証では図形はベクター、複数行の文字は1行ずつのテキストになりました。書き出し設定やフォントにより結果は変わるため、編集できる範囲を確認してください。
どこまで正確に変換できますか？
記事の検証では、色の差の平均が、FigmaからPSDで8.68と6.15、PSDからFigmaで22.21でした。これは2026年10月6日の対象データでの結果です。平均値が小さくても部分的な欠落はあり得るため、対象ファイルの文字・マスク・効果を確認してください。
開いたファイルは、サーバーに送られますか？
公式の説明では、端末内でファイルを処理します。ここで説明したローカルファイルの変換と端末への保存についての説明です。クラウド保存や共有は別の操作として扱ってください。