Photopeaを使ってFigmaのデータをPSDに変換するときのコツ
"Photopea"というブラウザ上で動くグラフィックエディタ（無料）を使うとFigmaのfigからPSDを作成できます。この記事は実際に使用して気づいたことをまとめた備忘録です。（2022年7月現在）
前おき
Figmaでバナー制作みたいなグラフィック系の作業をやってみたら思いのほかスムーズにできたので（コンポーネントやオートレイアウト活用するの楽しい）、このままPSDの納品もしよう、というFigmaメインでやりたい人の試行錯誤の跡です。間違っている可能性もあります、それと精密さを求められる場合は普通にPhotoshopで作業したほうがいいです。
基本的な流れ
Figmaでほとんど作業し、figとして保存
Photopeaで開き、何も編集せずPSDとして保存
Photoshopで開き、崩れてるところがあったら調整（場合によってはFigmaに戻って調整し直し）
綺麗に変換されるために
Photopeaはとても優秀で、変換したデータをPhotoshopで開くとFigmaで設定したレイヤー構造やレイヤー名（日本語OK）、オブジェクトの位置などがそのまま出てきます。出てこない時はだいたいFigma独自の機能で変換しきれなかったか、Photoshopで効果のかかり方が違うor外れているといったところです。あるいはローカルデータを参照しているとか。ポイントとなる項目が多いのでここからざっと箇条書きでまとめます。
Pages
Figma上でPage1, Page2って分けてあってもPhotopeaに読み込ませるとページ分けは無くなって全部ひとまとめになる。なので変換したいものだけを載せたfigファイルを作るのが良さそう。
レイヤー構造・レイヤー名
先ほども触れた通り、レイヤー構造もレイヤー名もFigmaで指定した内容そのまま出してくれるのでFigma上であらかじめ設定しておくと良さそう。日本語対応している（ありがたい）。
コンポーネント
Figma上でコンポーネントに指定してある箇所はグループに変換される。コンポーネントとしての機能を期待している場合は事前にFigmaで編集するのが良さそう。
Frame
Figma上でFrameに指定してある箇所はグループに変換される。それとは別に、アートボードの意味で使っているFrameはちゃんとPhotoshopでアートボードになる（複数OK、名前も付く）。すごい。
フォント
Photopeaに読み込ませると使用されているフォントの自動ダウンロードが始まる。うまくDLされるものもあれば、そうでないものもある。WebフォントでもNoto Sans JPやPoppinsはできたけど、Robotoはできなかった。Adobe fontsとか自分で特定のサイトからDLして入れた系はもちろんできなかった。その場合適当な差し替えフォントが指定される。結局Photopeaでは作業せず自分のPhotoshopに戻ってくるので指定し直せばいいが、特に必要なければ事前にアウトラインをとるのが楽。
それと１テキスト１フォントで。１テキスト内に複数フォントを指定すると、何かあった時の調整に手間取る。値段表記に代表されるような数字とそれ以外を分けたい場面などで起こる。
テキスト
Photoshopで読み込まれたテキストはカーニング設定が「メトリクス」になっている。これを「0」にするとFigma上の見た目と同じになる。
また、FigmaではLine heightにデフォルトで「Auto」が当たっているが、Photoshop上では再現されない。同じサイズを保つために数値入力しよう。
グラデーション・ドロップシャドウ
こういうふわーーっとした効果のかかり方がFigmaとPhotoshopで違う気がする。狭い範囲でかける分には違いはわからないが、広範囲だと手で調整が必要。気になるならFigma上でPNGに差し替え。
レイヤーモード
乗算やオーバーレイなど、各種レイヤーモードは変換されるとオフになる。Photoshopで開くと色ベタがのっていてびっくりするが合成モードさえ設定すれば解決するので手作業で設定し直す。これも特に別レイヤーである必要がなければ事前に画像を統合する。
クロップ画像
FrameのClip contentでクロップした画像はPSD変換後、クロップされていない状態で出てくる。あらかじめ画像を切り出して差し替えておくのが良さそう。ImageからCrop設定している場合にどうだったかは忘れた…。
画像
変換されるとほんの少しズレた画像が入っている。Figmaで書き出した画像をPhotoshopに読み込ませてレイヤーオンオフするとピクついているのが分かる。その辺の精度はちょっと惜しい。
点線
太さは指定通りだったが、点線の間隔や長さは再現されなかった。Photoshopの詳細オプションから設定して近くはできるが、始点と終点の処理が違ってて同じにはならなさそう。調整が手間なのであらかじめアウトラインとるのが良さそう。
パス
基本そのまま行くが、まれに崩れる。なんとなくパスのハンドルが原因のような気がするがわからない。気になるなら画像化して差し替えておく。
マスク
外れるのでPNGで差し替えた。Figmaでマスクを使いたい場面はPhotoshopにおける参照レイヤーとしての機能なので、余裕があるなら別途Photoshopで作業してもいいのかも。
その他Figmaの機能
List Styleから箇条書きリストを選択した場合、変換後のデータには反映されず先頭に「・」が無い状態の普通のテキストになる。
FillやEffectsなどを一つのオブジェクトに対して複数かけられるが、変換後は一つだけかかった状態のように見える。複数かけたい時はレイヤーを分ける。
終わりに
こうして書き出してみると沢山違いがあるように見えますが、これ以外がそのままPSDに移行できるということが重要です。癖を知っておけば対処できます。もちろん全部の機能を試してみたわけでは無いので他にも何かあるかもしれませんが、あっちこっちソフトを切り替えなくてもなんとかなるのが嬉しいです。（結局写真の加工でPhotoshopは開いてますが…）
ちなみに、Figmaで作成した画像を書き出して、Photoshopでイチから写経してみましたが、普通に位置を合わせるだけでも時間がかかりました。変換を使った方が「ちょっと手直し」程度で済みます。（Photoshopをそのまま使った方が速いという場合はそれでいいと思います。）
未来の自分、これを読んで思い出してください、頼みます。