FigmaからPSDへ変換する方法|Photopeaで簡単に書き出す手順

FigmaからPSDへ変換する方法は、無料オンラインツール「Photopea(フォトピア)」を使えば数ステップで完了します。結論からお伝えすると、Figmaで作ったデザインを「.fig」形式で保存し、それをPhotopeaに読み込んで「PSDとして保存」するだけです。この記事では、なぜ変換が必要になるのかという背景から、具体的な手順、さらにフォントやレイヤーで注意すべきポイントまで、初心者の方にもわかりやすく丁寧に解説していきます。Photoshop(フォトショップ)を持っていない方でも問題なく作業できますので、ぜひ最後までご覧ください。

そもそもFigmaとは?変換前に知っておきたい特徴

Figma(フィグマ)とは、ブラウザ上で動作するクラウド型のデザインツールです。Webサイトやアプリのデザイン制作で近年もっとも使われているツールの一つで、次のような特徴があります。

a woman is looking at a computer screen
Photo by Budka Damdinsuren on Unsplash
  • 複数人で同時に作業できる:チームメンバーが同じファイルを同時に編集でき、リアルタイムで反映されます。
  • 基本無料で使える:個人利用や小規模なプロジェクトなら無料プランで十分活用できます。
  • 動作が軽い:インストール不要でブラウザから使えるため、パソコンへの負担が少なく快適です。
  • 自動保存機能つき:作業内容が自動で保存されるため、うっかりデータを失う心配がありません。

これだけ便利なFigmaですが、制作現場では「PhotoshopのPSD形式でデータがほしい」と言われる場面が少なくありません。印刷会社への入稿や、Photoshopで細かく画像加工したいときなど、PSD形式が求められるケースは意外と多いのです。そこで役立つのが、これから紹介する変換方法です。

FigmaからPSDへ変換する手順(Photopeaを使用)

FigmaからPSDへの変換は、大きく分けて「Figmaデータの保存」と「Photopeaでの書き出し」の2ステップで完了します。Photopeaは無料で使えるオンライン画像編集ツールで、Photoshopに似た操作感が特徴です。順番に見ていきましょう。

diagram
Photo by kenny cheng on Unsplash

ステップ1:Figmaのデザインデータを「.fig」形式で保存する

まずはFigmaのデータをパソコンに保存します。手順は以下のとおりです。

  • Figmaの編集画面を開き、左上の「F」マーク(メインメニュー)をクリックします。
  • 「ファイル」→「ローカルコピーの保存」を選択します。
  • 「ファイル名.fig」という形式でパソコンに保存されます。

このとき、Macをお使いの場合は保存先が自動的に「書類」フォルダになることがあります。保存先が分からなくなったときは「書類」フォルダを確認してみてください。

ステップ2:Photopeaで「PSDとして保存」する

次に、保存した.figファイルをPSDへ変換します。

  • Photopeaのサイト(https://www.photopea.com/)にブラウザでアクセスします。
  • 先ほど保存した.figファイルを、画面上にドラッグ&ドロップします。
  • 読み込みが完了したら、左上の「ファイル」→「PSDとして保存(Save as PSD)」を選択します。
  • 「ファイル名.psd」という形式でダウンロードされれば完了です。

ファイルの容量が大きい場合は、読み込みに少し時間がかかることがあります。画面が固まったように見えても、焦らず読み込みが終わるまで待ちましょう。以上でPSDへの変換は完了です。Photoshopを持っていない方でも、この方法なら無料で変換できます。

変換後に注意したいポイント(フォント・レイヤー)

変換後のPSDファイルは、開いた直後に必ず内容をチェックすることをおすすめします。というのも、フォントの置き換わりやレイアウトのズレが起こる場合があるからです。トラブルを防ぐために、次の2点を押さえておきましょう。

  • フォントの自動置換:Figmaで使ったフォントがPhotoshop(や開く側の環境)に入っていない場合、別のフォントに自動で置き換わります。文字化けや見た目の変化がないか、テキスト部分を重点的に確認しましょう。
  • レイヤー構造は基本そのまま:Photopeaで変換した場合、Figmaのレイヤー構造はほぼそのまま引き継がれ、テキストも編集可能な状態で保持されます。ただし一部のレイアウトが崩れることがあるため、崩れた箇所だけ手動で微調整すると安心です。

特にフォントは、デザインの印象を大きく左右する要素です。オリジナルと同じフォントを再現したい場合は、そのフォントをPhotoshop側にインストールしておくと置換を防げます。

Photopea以外の変換方法はある?

Photopea以外にも、Figmaのプラグインを使ってPSDへ書き出す方法があります。ただし初心者の方には、まずPhotopeaでのドラッグ&ドロップ変換が一番手軽でおすすめです。

Figmaには「PSD Porter」などのプラグインがあり、Figma上から直接PSD形式で書き出すことができます。プラグインはインストールの手間がかかる一方で、複数フレームをまとめて書き出せるなどのメリットもあります。反対に、PSDファイルをFigmaに読み込みたい(逆変換したい)場合にも専用プラグインが使えます。用途に応じて使い分けるとよいでしょう。まずは無料で始められるPhotopeaで試し、必要に応じてプラグインを検討するのがスムーズです。

よくある質問(FAQ)

Q1. Photoshopを持っていなくてもPSDに変換できますか?

はい、できます。Photopeaは無料で使えるオンラインツールで、Photoshopがなくても.figファイルをPSD形式に書き出せます。ブラウザさえあれば作業できるため、ソフトのインストールも不要です。

Q2. 変換するとフォントが変わってしまうのはなぜですか?

Figmaで使用したフォントが、ファイルを開く環境にインストールされていない場合、自動的に別のフォントへ置き換わるためです。元のフォントを再現したいときは、そのフォントを事前にインストールしておくと置換を防げます。

Q3. レイヤーは分かれた状態で書き出せますか?

はい、Photopeaで変換した場合、Figmaのレイヤー構造は基本的にそのまま引き継がれます。テキストも編集可能な状態で保持されるため、変換後にPhotoshopで細かく調整することも可能です。

まとめ

FigmaからPSDへの変換は、無料ツール「Photopea」を使えば、.figファイルの保存とドラッグ&ドロップだけで簡単に行えます。変換後はフォントの置き換わりやレイアウトのズレをチェックすれば、安心してPhotoshopでの作業に進めます。Photoshopを持っていない方でも取り組めるので、ぜひ一度お試しください。「自社サイトのデザインをPSDで納品したい」「Figmaでの制作をプロに任せたい」といったお悩みがありましたら、Web制作のプロであるTHREE D PLUSにお気軽にご相談ください。デザインから実装まで、丁寧にサポートいたします。

最新情報をチェックしよう!