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ファイルをドラッグ＆ドロップします。
SVGを経由するので、図形はベクター、文字は1行ずつのテキストとして読み込まれます。ただし、SVGで表せないPhotoshopの機能（描画モード・調整レイヤー・一部のマスクなど）は失われます。詳しくは次の検証結果で紹介します。
Photopeaでどこまで正確に変換できるか検証した
Photopeaで変換したデータを、元の見た目とピクセル単位で比べました。数値は元の画像との色の差（RGBの差、0〜255）の平均で、0なら完全に一致、1.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色の塗りになる |
| レイヤーマスク・クリッピングマスク | マスクが外れ、隠れていた部分が見える |
| 描画モード | 「通常」になる |
| 調整レイヤー（明るさ・白黒など） | 効果が消える |
| ベベルとエンボスなどのレイヤー効果 | 多くが消える |
図形・画像・文字の多いシンプルなデザインならPhotopeaで十分ですが、描画モード・マスク・影・調整レイヤーを使ったデザインは、変換後に手直しが必要です。
見た目まで合わせたいなら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 |
| レイヤー効果 | 19 | 11.63 | 0.69 |
| 調整レイヤー | 18 | 41.33 | 1.57 |
シェイプと画像はどちらもほぼ完全に一致しました。差がついたのは、グラデーション・マスク・描画モード・調整レイヤーです。一方で、複数行のテキスト（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 |
FigmaとPSDの変換が目的なら、Figmaの中で直接読み書きできるPSD Porter for Figmaのほうが正確で手間もかかりません。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合同会社のお問い合わせページからご相談ください。