Amazonで商品を見るセール会場へ

PSD Porter for Figmaの使い方|FigmaとPSDをレイヤーのまま相互変換

PSD Porter for Figma。レイヤーを保ったまま、Figma ⇄ PSDを双方向に変換。

PSD Porter for Figmaは、FigmaのフレームをレイヤーのままPSDに書き出し、PSDをFigmaのフレームとして読み込むプラグインです。無料で使えます。変換はプラグインの中だけで行い、ファイルを外部に送信しません。

この記事では、変換できる要素、手順、変換レポートの見方、再現できないものを説明します。プラグインはFigmaメソッドの運営元であるMOTOKI合同会社が開発・公開しています。後半には、配布中のボタン素材と見出し素材を2026年10月6日に変換し、Photoshopで開いて比べた結果を載せています。

名前PSD Porter for Figma
価格無料
バージョン1.1.0(2026年10月6日)
変換の向きFigma → PSD、PSD → Figma
通信なし(ファイルは外部に送信しない)
データセキュリティFigmaの審査で「ベストプラクティスに準拠」と認定
画面の言語日本語
入手先Figma Community:PSD Porter for Figma
目次

PSD Porter for Figmaでできること

Figmaのデザインを1枚の画像にするのではなく、テキストはテキストレイヤー、図形はシェイプレイヤーとして、Photoshopで編集できる形に変換します。PSDからFigmaへの読み込みも同じ考え方で、レイヤー構造を保ったフレームを作ります。

向き主な用途
Figma → PSDPhotoshopでの画像合成・レタッチ、PSDでの入稿、PSDで受け取りたい相手への納品
PSD → FigmaPSDで作られたデザインをFigmaで修正する、UIの部品として取り込む

再現できなかった要素は、変換のたびに「変換レポート」に理由と対処法つきで一覧表示します。変換結果のどこを確認すればよいかが分かるようにするためです。

プラグインを起動する

  1. Figma CommunityのPSD Porter for Figmaのページを開く。
  2. 「開く」または「保存」を押して、自分のアカウントで使えるようにする。
  3. Figma Designのファイルを開き、Ctrl + /(Macは ⌘ + /)で検索を開く。
  4. 「PSD Porter」と入力して、PSD Porter for Figmaを選ぶ。

デスクトップアプリとブラウザ版のどちらでも動きます。プラグインのウィンドウには「Figma → PSD」と「PSD → Figma」の2つのタブがあります。

PSD Porter for Figmaのウィンドウ。Figma → PSDタブで、選択中のフレームを変換、書き出し倍率、非表示レイヤーも含めるの設定とPSDに変換ボタンが表示されている。
Figma → PSDタブ。変換するフレームと書き出し倍率を選ぶ。

FigmaのフレームをPSDに変換する

  1. 変換したいフレームを選択する(複数可)。
  2. プラグインを起動し、「Figma → PSD」タブを開く。
  3. 変換する範囲と設定を選び、「PSDに変換」を押す。
  4. 結果の画面でレイヤー数と画像化された要素を確認し、「PSDとレポートをダウンロード(ZIP)」を押す。
設定内容
選択中のフレームを変換選んだフレームだけを変換する
現在のページの全フレームを変換開いているページのトップレベルのフレームをすべて変換する
書き出し倍率1xまたは2x。2xにするとPSDのピクセル数が縦横2倍になる
非表示レイヤーも含めるFigmaで非表示のレイヤーも、PSDに非表示のレイヤーとして入れる

ZIPには、PSDと変換レポート(HTML)が入っています。複数のフレームを選んだ場合は、1つのPSDにフレームごとのアートボードとしてまとめます。

PSDでの変換結果

Figmaの要素PSDでの形
テキストテキストレイヤー(フォント、サイズ、色、字間、行送り、文字ごとのスタイル)
四角形・楕円・ベクター・ブーリアンシェイプレイヤー(塗り、グラデーション、線、破線、角丸)
フレーム・グループグループ(入れ子を保つ)
マスク・コンテンツのクリップベクターマスク、クリッピングマスク
ドロップシャドウ・インナーシャドウレイヤー効果(ドロップシャドウ、シャドウ(内側))
ブレンドモード・不透明度描画モード・不透明度
画像の塗り元の画像を埋め込んだスマートオブジェクト
インスタンス展開して通常のレイヤーにする

テキストレイヤーには、Figmaでの見た目の画像も入れています。そのため、同じフォントがないPCでPSDを開いても、テキストを編集するまではFigmaと同じ見た目で表示されます。

PSDをFigmaに読み込む

  1. 読み込み先のページを開き、プラグインを起動する。
  2. 「PSD → Figma」タブを開く。
  3. PSDファイルをドロップするか、枠をクリックして選ぶ。
  4. 作られたフレームと、結果の画面の省略・近似の一覧を確認する。

読み込んだPSDは、ページにある内容の右隣に、レイヤー構造を保ったフレームとして作ります。結果の画面からは、変換レポートをHTMLで保存できます。

PSD Porter for FigmaのPSD → Figmaタブ。PSDファイルをここにドロップまたはクリックして選ぶ、と表示された枠がある。
PSD → Figmaタブ。PSDをドロップすると読み込みが始まる。

Figmaでの変換結果

PSDの要素Figmaでの形
シェイプレイヤー四角形・楕円・ベクター(塗り、グラデーション、パターン、線、破線)。「交差」などのパスの演算はブーリアン演算
テキストレイヤーテキスト(フォント、サイズ、色、字間、行送り、揃え、段落の枠、回転)
ピクセルレイヤー・スマートオブジェクト画像の塗り
グループ・アートボードグループ・フレーム(アートボードの背景色も)
レイヤーマスク・ベクターマスク・クリッピングマスクマスク(マスクの濃度も反映)
ドロップシャドウ・シャドウ(内側)・光彩ドロップシャドウ・インナーシャドウ
境界線・カラー/グラデーション/パターンオーバーレイ線・塗りの重ね
調整レイヤー(15種類)効く範囲のレイヤーの画像・色に焼き込む
ベベルとエンボス・サテン効果の部分だけを画像にして重ねる
Figmaにない描画モード(減算・ビビッドライトなど)下のレイヤーと合成した画像にする

Figmaには調整レイヤーがないため、調整の結果を下のレイヤーの色に反映します。画像だけが重なっている範囲は、Photoshopの描画モードで合成してから調整をかけ、1枚の画像にまとめます。元のレイヤーは非表示で残します。調整の計算は、Photoshopで実際に調整をかけた結果に合わせてあります。

Figmaで使うフォントは、PSDに記録されたフォント名から探します。見つからない場合はInterで代わりに作り、変換レポートにフォント名を表示します。

PSD → Figmaの機能別の再現度

Photoshopのレイヤー機能を1つずつ入れたPSD(131項目)をPhotoshop自身で作り、PSD Porter for Figma 1.1.0でFigmaに読み込んで、Photoshopの表示とFigmaの表示を比べました(2026年10月6日)。差は、ピクセルごとの色の差(0〜255)の平均です。結果を、Figmaでどこまで再現できるかで4段階に分けています。

機能別のPSDの一部を、Photoshopの表示とFigmaに読み込んだ表示で並べた画像。交差、反射形グラデーション、マスクの濃度、パターンオーバーレイ、ポスタリゼーション、減算、サテン、ワープ文字。
左:Photoshop、右:Figmaに読み込んだ結果。減算・サテン・ワープ文字は画像にして見た目を合わせている。
段階意味
◎ そのまま再現Figmaの機能で編集できる形になり、見た目の差もほぼない(差1.0以下が目安)
○ ほぼ再現編集できる形になるが、見た目に小さな差がある
△ 画像にして再現Figmaに同じ機能がないため、見た目どおりの画像にする。元のレイヤーや編集用の文字は残す
× 再現できない近い設定にするか省略する。見た目が変わる

131項目のうち100項目は、PhotoshopとFigmaの色の差が平均1.0以下でした(全項目の平均は1.44)。段階ごとの件数は次のとおりです。

段階項目数色の差の平均
◎ そのまま再現860.27
○ ほぼ再現274.28
△ 画像にして再現150.58
× 再現できない313.44

色の差は、ピクセルごとのRGBの差(0〜255)の平均です。0なら完全に一致し、1.0以下なら並べてもほとんど見分けがつきません。テキストは字形の描き方の違いで数値が大きく出やすく、見た目がほぼ同じでも3〜9になります。「画像にして再現」は見た目を合わせているため差が小さく、代わりにFigmaでの編集はできません。

全131項目の実測値を見る
分類機能色の差段階
シェイプ長方形(単色)0.00◎
シェイプ角丸長方形(同じ半径)0.02◎
シェイプ角丸長方形(角ごとに違う半径)0.01◎
シェイプ楕円0.04◎
シェイプ多角形・星形(パス)0.07◎
シェイプ曲線のパス(ペンツール)0.06◎
シェイプシェイプの結合0.00◎
シェイプ前面シェイプを削除0.03◎
シェイプシェイプが重なる領域を交差0.00◎
シェイプ重なり合うシェイプ領域を中マド0.00◎
シェイプ回転したシェイプ0.04◎
線線(内側)0.03◎
線線(中央)0.04◎
線線(外側)0.05◎
線破線1.84○
線線だけ(塗りなし)0.14◎
線開いたパスの線(丸い線端・角)0.10◎
線グラデーションの線0.26◎
塗りグラデーション(線形)1.18○
塗りグラデーション(線形・45°・3色)1.16○
塗りグラデーション(円形)1.45○
塗りグラデーション(円錐形)0.48◎
塗りグラデーション(反射形)0.39◎
塗りグラデーション(菱形)0.22◎
塗りグラデーション(透明を含む)0.20◎
塗りパターンの塗り(シェイプ)4.10○
塗り塗りつぶしレイヤー(べた塗り・パスなし)0.00◎
塗り塗りつぶしレイヤー(グラデーション・パスなし)0.33◎
テキストポイントテキスト(欧文)2.69○
テキストポイントテキスト(和文)4.62○
テキスト文字ごとに違うスタイル(色・サイズ・フォント)5.60○
テキスト段落テキスト(枠の中で折り返し)14.29○
テキスト段落の揃え(中央・右)9.60○
テキスト字間(トラッキング)と行送り(固定)7.57○
テキスト行送り「自動」の複数行11.14○
テキスト縦書き0.44△
テキスト疑似ボールド・疑似斜体3.01△
テキスト下線・打ち消し線7.17○
テキストすべて大文字・スモールキャップス8.54○
テキストベースラインシフト0.84○
テキスト水平・垂直比率0.87△
テキストワープテキスト(円弧)0.18△
テキスト回転したテキスト0.47◎
テキスト文字に効果(ドロップシャドウ・境界線)5.66○
画像ピクセルレイヤー(写真)0.00◎
画像ピクセルレイヤー(透明部分・ぼかした縁)0.04◎
画像スマートオブジェクト(画像を埋め込み)0.00◎
画像スマートオブジェクト(拡大・回転)0.57◎
画像スマートオブジェクト(左右反転)0.00◎
画像スマートフィルター(ぼかし(ガウス))1.19○
画像スマートオブジェクト(中身がシェイプ)0.02△
マスクレイヤーマスク(くっきり)0.00◎
マスクレイヤーマスク(ぼかし)0.01◎
マスクベクトルマスク0.00◎
マスククリッピングマスク9.24○
マスククリッピングマスク(2 枚・描画モード)0.08◎
マスクグループのレイヤーマスク0.01◎
マスクマスクの濃度・ぼかし(属性パネル)0.00◎
合成不透明度 50%0.07◎
合成塗りの不透明度 0%(効果だけ残す)0.35◎
合成塗りの不透明度 50%(効果は 100%)0.07◎
描画モード描画モード:通常1.61○
描画モード描画モード:ディザ合成20.10×
描画モード描画モード:比較(暗)0.91◎
描画モード描画モード:乗算0.91◎
描画モード描画モード:焼き込みカラー0.73◎
描画モード描画モード:焼き込み(リニア)0.90◎
描画モード描画モード:カラー比較(暗)0.06△
描画モード描画モード:比較(明)0.70◎
描画モード描画モード:スクリーン0.73◎
描画モード描画モード:覆い焼きカラー0.56◎
描画モード描画モード:覆い焼き(リニア)- 加算0.71◎
描画モード描画モード:カラー比較(明)0.06△
描画モード描画モード:オーバーレイ0.74◎
描画モード描画モード:ソフトライト2.46○
描画モード描画モード:ハードライト1.38○
描画モード描画モード:ビビッドライト0.10△
描画モード描画モード:リニアライト0.21△
描画モード描画モード:ピンライト0.05△
描画モード描画モード:ハードミックス0.31△
描画モード描画モード:差の絶対値1.59○
描画モード描画モード:除外0.94◎
描画モード描画モード:減算0.00△
描画モード描画モード:除算0.00△
描画モード描画モード:色相0.80◎
描画モード描画モード:彩度0.97◎
描画モード描画モード:カラー1.05○
描画モード描画モード:輝度0.95◎
合成グループ(通過)の中の乗算0.01◎
合成グループ(通常)の中の乗算0.01◎
合成グループの不透明度0.02◎
合成グループに効果(ドロップシャドウ)0.53◎
構造非表示・ロックしたレイヤー0.00◎
構造グループの入れ子(3 階層)0.03◎
レイヤー効果ドロップシャドウ0.42◎
レイヤー効果ドロップシャドウ(スプレッド)0.47◎
レイヤー効果ドロップシャドウ(2 つ重ね)0.30◎
レイヤー効果シャドウ(内側)0.38◎
レイヤー効果光彩(外側)1.89○
レイヤー効果光彩(内側)0.73◎
レイヤー効果ベベルとエンボス2.66△
レイヤー効果サテン0.68△
レイヤー効果カラーオーバーレイ0.01◎
レイヤー効果カラーオーバーレイ(乗算・60%)0.01◎
レイヤー効果グラデーションオーバーレイ0.79◎
レイヤー効果グラデーションオーバーレイ(円形)0.94◎
レイヤー効果パターンオーバーレイ0.01◎
レイヤー効果境界線(外側)0.05◎
レイヤー効果境界線(内側)0.03◎
レイヤー効果境界線(中央)0.03◎
レイヤー効果境界線(グラデーション)0.70◎
レイヤー効果効果の組み合わせ(影+境界線+オーバーレイ)2.56○
レイヤー効果ドロップシャドウ(楕円)0.43◎
調整レイヤー明るさ・コントラスト0.16◎
調整レイヤーレベル補正0.15◎
調整レイヤートーンカーブ0.06◎
調整レイヤー露光量0.06◎
調整レイヤー自然な彩度14.39×
調整レイヤー色相・彩度0.15◎
調整レイヤー色相・彩度(色彩の統一)0.61◎
調整レイヤーカラーバランス3.15○
調整レイヤー白黒0.02◎
調整レイヤーレンズフィルター5.82×
調整レイヤーチャンネルミキサー0.00◎
調整レイヤー階調の反転0.02◎
調整レイヤーポスタリゼーション0.95◎
調整レイヤー2 階調化0.44◎
調整レイヤーグラデーションマップ2.13○
調整レイヤー特定色域の選択0.08◎
調整レイヤー調整レイヤー(クリッピングで 1 枚だけ)0.02◎
調整レイヤー調整レイヤー(マスクで一部だけ)0.00◎

◎ そのまま再現できるもの

分類機能
シェイプ長方形、角丸(角ごとに違う半径も)、楕円、多角形・星形、曲線のパス、回転。シェイプの結合・前面シェイプを削除・交差・中マド
線内側・中央・外側、線だけ(塗りなし)、開いたパス(丸い線端・角)、グラデーションの線
塗り単色、グラデーション(円錐形・反射形・菱形・透明を含む2色)、塗りつぶしレイヤー(べた塗り・グラデーション)、パターン(等倍。画像のタイルになる)
画像ピクセルレイヤー(透明部分・ぼかした縁も)、画像を埋め込んだスマートオブジェクト(拡大・回転・反転も、元画像のまま)
マスクレイヤーマスク(くっきり・ぼかし)、ベクトルマスク、クリッピングマスク(2枚・描画モード付きも)、グループのマスク、マスクの濃度
合成・構造不透明度、塗りの不透明度(効果だけ残す設定も)、グループ(通過・通常)、グループの不透明度・効果、非表示・ロック、入れ子
描画モード比較(暗)、乗算、焼き込みカラー、焼き込み(リニア)、比較(明)、スクリーン、覆い焼きカラー、覆い焼き(リニア)、オーバーレイ、除外、色相、彩度、輝度
レイヤー効果ドロップシャドウ(スプレッド・複数・楕円)、シャドウ(内側)、光彩(内側)、カラーオーバーレイ、グラデーションオーバーレイ、パターンオーバーレイ、境界線(内側・外側・中央・グラデーション)
テキスト回転した文字(Figmaの文字のまま回転する)
調整レイヤー(色を焼き込む)明るさ・コントラスト、レベル補正、トーンカーブ、露光量、色相・彩度(色彩の統一も)、白黒、チャンネルミキサー、階調の反転、ポスタリゼーション、2階調化、特定色域の選択。クリッピング・マスクで一部だけにかけたものも
そのまま再現できた44項目(シェイプ・線・塗り・画像・マスク・合成・構造・回転した文字)のPhotoshopとFigmaの比較。
◎ そのまま再現:シェイプ・線・塗り・画像・マスク・合成(左:Photoshop、右:Figma)
そのまま再現できた42項目(描画モード・レイヤー効果・調整レイヤー)のPhotoshopとFigmaの比較。
◎ そのまま再現:描画モード・レイヤー効果・調整レイヤー(左:Photoshop、右:Figma)

○ ほぼ再現できるもの

機能差が出るところ
テキスト全般(欧文・和文、文字ごとのスタイル、字間・行送り、揃え、下線・打ち消し線、大文字・スモールキャップス、効果)編集できる文字になる。PhotoshopとFigmaで字形の描き方が違い、日本語版Photoshopはかなを詰めて組むため、字の位置が1〜2px程度ずれることがある。ポイントテキストは字間を調整して幅を合わせる
ベースラインシフトFigmaにない機能。文字全体をずらしたものは位置で合わせられるが、一部の文字だけずらしたものは再現できない
段落テキスト(枠の中で折り返し)枠の大きさと行送りは同じ。かなの詰め方の違いで、折り返し位置が1文字ずれることがある
3色以上のグラデーションPhotoshopの「滑らかさ」の補間を中間の止め位置で近づけている(差1.2〜1.5)
拡大したパターン画像のタイルを拡大するときのにじみ方が違う(200%で差4.1)
破線角の部分で破線の切れ目の位置が違う(差1.8)
ソフトライトFigmaとPhotoshopで計算式が少し違う(差2.5)
描画モード:通常・ハードライト・差の絶対値・カラー描画モード自体は同じ計算。重ねた多色のグラデーションの補間の差が出る(差1.0〜1.6)
効果の組み合わせ(影+境界線+オーバーレイ)影と境界線の重なる部分で差が出る(差2.6)
文字の形のクリッピングマスクマスクの形になる文字の描き方の差(差9.2。見た目はほぼ同じ)
光彩(外側)Photoshopの「範囲」を影の広がりで近づけている(差1.9)
スマートフィルターの「ぼかし(ガウス)」Figmaのレイヤーのぼかしにする。元画像のまま編集できる(差1.2)
疑似ボールド文字と同じ色の線で太らせる
カラーバランス・グラデーションマップ1つの軸だけ動かしたカラーバランス、2色のグラデーションマップは一致。複数の軸を同時に動かす・3色以上では差が出る(差2〜3)
ほぼ再現できた27項目(テキスト、多色のグラデーション、破線、ソフトライトなど)のPhotoshopとFigmaの比較。
○ ほぼ再現の27項目(左:Photoshop、右:Figma)

△ 画像にして再現するもの

機能Figmaでの形
描画モード:カラー比較(暗)・カラー比較(明)・ビビッドライト・リニアライト・ピンライト・ハードミックス・減算・除算下のレイヤーとPhotoshopと同じ式で合成した画像「(合成)」。元のレイヤーは非表示で残す
縦書き・ワープテキスト・水平/垂直比率・疑似斜体見た目どおりの画像を表示し、編集用の文字を非表示で残す
ベベルとエンボス・サテン効果の部分だけを画像にして図形の上に重ねる。図形は編集できる(ベベルは差2.7の近似)
画像だけが重なっている範囲の調整レイヤー合成してから調整をかけた画像「(調整後)」。元のレイヤーは非表示で残す
スマートフィルター(ぼかし以外)、中身がシェイプのスマートオブジェクトフィルター・中身を反映した画像
画像にして再現した15項目(縦書き、ワープ文字、Figmaにない描画モード、ベベル、サテンなど)のPhotoshopとFigmaの比較。
△ 画像にして再現した15項目(左:Photoshop、右:Figma)

× 再現できないもの

機能扱い
描画モード:ディザ合成Photoshopは点をランダムに抜くため、「通常」と不透明度で近づける
調整レイヤー:自然な彩度、レンズフィルター計算式が公開されていないため、近い計算で色を変える(自然な彩度は色によって大きくずれる)
調整レイヤー:カラールックアップ、ノイズのグラデーションマップ省略する
再現できなかった3項目(ディザ合成、自然な彩度、レンズフィルター)のPhotoshopとFigmaの比較。
× 再現できない3項目(左:Photoshop、右:Figma)

このほか、3D・ビデオ・パス上文字・ブレンド条件(高度な合成)などは今回の確認に含めていません。調整レイヤーの下に、半透明の重なりやグラデーションのシェイプがあると、色を焼き込む方法では少しずれます。変換後は、変換レポートの「画像化・省略」「近似」の行を確認してください。

変換レポートの見方

変換レポートは、変換後に確認が必要なレイヤーの一覧です。レイヤー数、編集可能なまま変換できた割合、画像化・省略した数、近似した数が上に表示されます。

変換レポートの例。224レイヤー、編集可能なまま99.1%、画像化・省略2、近似0。塗りがなく線だけのテキストを画像にした2件が対処法つきで表示されている。
見出し素材40種類を変換したときのレポート。線だけのテキスト2件が画像になった。
種別意味
画像化・省略編集できる形で再現できず、画像にした、または入れなかった
近似編集できる形のまま、近い設定に置き換えた
情報見た目は変わらないが、知っておくとよいこと

各行には、対象のレイヤーのパスと、どうすれば編集可能なまま変換できるかを表示します。たとえば「塗りがなく線だけのテキスト」は、Photoshopのテキストレイヤーで再現できないため画像になります。テキストに塗りを付ければ、テキストレイヤーとして変換できます。

再現できないもの・注意点

項目変換での扱い
レイヤーブラーPSDに同じ効果がないため、画像にする
背景ブラー下の絵をぼかした画像を形で切り抜き、そのレイヤーのすぐ下に置く。下のレイヤーを動かしたら作り直しが必要
ノイズ・テクスチャ・ガラスの効果PSDにないため省略する
画像を使った線省略する
ベベルとエンボス・サテン効果の部分だけを画像にする(PSD → Figma。詳しくは上の機能別の再現度)
16bit・CMYK・PSB(大きいドキュメント)読み込めない(PSD → Figma)
幅・高さが30,000pxを超えるPSD(並べたフレーム全体)PSDの上限を超えるため変換できない。フレームを分けて変換する

フォント

PhotoshopでテキストをPSDのとおりに編集するには、同じフォントがPCに入っている必要があります。Google Fonts版のNoto Sans JPなどの可変フォントは、Photoshopでテキストを編集すると太さが既定の値に戻ることがあります。その場合は、静的フォント版(OTF)を入れるか、文字パネルで太さを選び直してください。対象のフォントは変換レポートに表示します。

配布素材を変換してPhotoshopで比べた結果

2026年10月6日、Figmaメソッドで配布しているボタン素材35種類と見出し素材40種類をPSDに変換し、Photoshopで開いた画面とFigmaの書き出し画像を比べました。比べた値は、ピクセルごとの色の差(0〜255)の平均です。0なら完全に一致します。

ファイルフレーム数色の差の平均差が最も大きいフレーム
ボタン素材350.342.11(虹色のグラデーション)
見出し素材400.381.05(破線の枠)
ボタン素材4種類の比較。左がFigma、右がPhotoshopで開いた変換後のPSD。グラデーション、点線の角丸の枠、破線の枠、光彩のあるボタン。
左:Figma、右:変換したPSDをPhotoshopで開いた画面。

差が最も大きかったのは、虹色のグラデーションのボタンです。このボタンは、グラデーションの上に背景のぼかしを付けた板を重ねています。PSDには背景のぼかしがないため、下の絵をぼかした画像をボタンの形で切り抜いて置いており、色の混ざり方が少し変わりました。破線・点線の枠、角丸、光彩(ドロップシャドウ)は、シェイプレイヤーとレイヤー効果のまま編集できます。

見出し素材3種類の比較。左がFigma、右がPhotoshopで開いた変換後のPSD。破線の枠と塗りの見出し、縁取り文字の見出し、角丸の帯と影の見出し。
左:Figma、右:変換したPSDをPhotoshopで開いた画面。

見出し素材224レイヤーのうち、99.1%を編集可能なまま変換しました。画像になったのは、縁取りだけで塗りのない文字2件です。そのほかの見出しの文字は、Photoshopのテキストレイヤーとして文字を打ち替えられます。

PSD → Figmaは、Photoshopで作ったテキスト、シェイプ、グループ、効果、クリッピングを含む見本のPSDで確かめました。

PSDの読み込みの比較。左がPhotoshopで開いた元のPSD、右がFigmaに読み込んだ結果。見出しと本文のテキスト、影付きの枠、円、グループ内の四角形、オーバーレイの文字。
左:元のPSD(Photoshop)、右:Figmaに読み込んだフレーム。

本文のように行送りを「自動」にしたテキストは、Figmaでは行の高さを固定値にするため、行の位置が少しずれます。どちらも今回の確認の結果です。ほかのデザインで同じ結果になることを保証するものではないので、変換後は変換レポートと見た目を確認してください。

同じFigmaのデータをPhotopeaでもPSDにして、変換の正確さを比べた結果はFigmaからPSDへの変換精度をPhotopeaと比べた記事にまとめています。

ファイルの扱いと通信

PSD Porter for Figmaは、Figmaのプラグインの設定で通信を「なし」にしています。デザインデータやPSDはプラグインの中で処理し、外部のサーバーには送りません。プラグインの画面にあるお問い合わせのリンクは、ブラウザでMOTOKI合同会社のお問い合わせページを開くだけです。

Figmaのセキュリティ自己評価プログラムにも参加しています。データの扱い(サーバーを持たない・通信しない・データを保存しない)についての回答をFigmaが審査し、データセキュリティのベストプラクティスに準拠していると認められました。回答の内容はCommunityのプラグインのページで確認できます。

大量の変換・Figmaなしで使えるWeb版(有料)

ページ単位の一括変換や、Figmaをお持ちでない方向けのWeb版変換ツールは、有料でご提供しています。.figファイルから直接PSDを作る変換にも対応しています。ご相談はMOTOKI合同会社のお問い合わせページからご連絡ください。

不具合やご要望も、同じお問い合わせページで受け付けています。変換結果がおかしい場合は、変換レポート(HTML)を添えてお送りいただくと、原因を調べやすくなります。プラグインをCommunityに公開した手順はFigmaプラグインをCommunityに公開する方法で紹介しています。

サービス

Service

デザイン制作に関心がありましたら、ぜひ詳細をご覧ください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Figmaのおすすめ書籍

Figma用PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次