この記事ではFigmaで作ったデザインをPhotoshop(PSD)のファイルに変換する方法を紹介します。
また、PSDファイルをFigmaで開く方法も合わせて紹介します。
FigmaからPSDに変換するには？
Figmaには画像やPDFで書き出すエクスポート機能がありますが、PSDファイルとして書き出す機能はありません。
Figmaで作ったデザインをPSDファイルにファイルに変換するには、「Photopea」というサービスを利用します。
「Photopea」はPSDやイラレなどのデザインファイルをブラウザ上で編集できるようになるツールで、以下のデザインツールに対応しています。
- Photoshop
- Illustrator
- XD
- Figma
- Sketch
さらに「Photopea」にアップロードしたデザインは元がFigmaであってもPSD形式でダウンロードすることができます。
以下で具体的な変換方法を紹介します。
FigmaからPSDに変換する方法
FigmaからPhotoshopで使えるPSDファイルに変換するには以下の流れで操作を行います。
- Figmaからファイルをダウンロード
- Photopeaにファイルをアップロード
- デザインをPSDでダウンロード
1.Figmaからファイルをダウンロード
まずはFigmaで作成したデザインを自分のPCにダウンロードします。
方法は、画面上部のメニューから「ファイル」->「ローカルコピーの保存」を選ぶと現在開いているファイルをダウンロードできます。
2.Photopeaにファイルをアップロード
Figmaからファイルをダウンロードすると、「〜.fig」という拡張子になっているのでこのファイルをPhotopeaにアップロードします。
アップロードするとフォントや画像の読み込みが行われるのでしばらく待ちましょう。
読み込みが終わるとブラウザ上で自由に編集できるようになります。こんな感じでレイヤー構造もFigmaのものと同じで、テキストもちゃんと編集することができます。
3.デザインをPSDでダウンロード
アップロードしたデザインをPSDでダウンロードするには左上の「ファイル」から「PSDとして保存」を選択します。
これでFigmaのデザインをPSDに変換できました。
一部フォントが文字化けしていたり、レイアウトが崩れていて修正が必要な部分がありますが、全体としてはほぼ問題ないレベルで変換できています。
PSDファイルをFigmaに変換する方法
PSDファイルはそのままではFigmaで開くことができませんが、以下のようないくつかの方法で一応開くことはできます。
- SVG形式に変換してからFigmaで開く
- Magiculを使ってPSDからFigmaに変換する
それぞれ詳しく解説します。
PSDファイルをSVGに変換してからFigmaで開く
PSDファイルの一部のデザインであれば、SVG形式で書き出すことでFigmaで開けるようになります。
手順は次のようになります。
- Photoshopで変換したいPSDファイルを開きます
- ファイルメニューから、ファイル形式で「SVG」を選択してエクスポートします
- Figmaのメニューから画像を配置を使用して、エクスポートしたSVGを開きます
この方法はイラレからFigmaにデザインを配置する場合やストックフォトサイトから購入したepsファイルでも同じような方法で開くことができます。
Magiculを使ってPSDからFigmaに変換する
もう1つの方法はMagiculというサービスを利用することでPSDやイラレのファイルをFigmaに変換できます。
このサービスは有料で、1ファイルの変換に$94(日本円で1万4000円くらい)とやや高額な価格設定になっています。
まとめ
この記事ではFigmaのファイルをPSDに変換したり、PSDファイルをFigmaに変換する方法を紹介しました。
ここで紹介したものの他にも変換できる無料のWebサービスはあるのですが、あまり綺麗に変換できないのと、アップロードしたデザインファイルをどのように再利用されるかわからないので仕事で使うのはちょっとリスクがありそうです。