FigmaからUnityの画面を作りたい

はじめに

デザイナーさんに「FigmaからUnityに画面取り込めないの？」と相談されたのがきっかけで調査しました。
いくつかアセットなどあったのですが「Figma Converter for Unity」と「UnityFigmaBridge」の2つを使ってみました。

検証したUnityのバージョンは「Unity2022.2.1f1」の「3D(URP)」です。

Microsoftの「MRTK Figma ツールキット」も調べてみようと思ったのですが、MicrosoftがHoloLensの開発を中止したり開発チームを解散させたりしていたので、このツールの更新も途絶えるかもと思って断念しました。

結論

現時点では「UnityFigmaBridge」を使うのが良さそうです。

Figma Converter for Unityについて

使い方

Assetストアで購入してUnityパッケージを導入します。
Hierarchyの適切なGameObjectに「Figma Converter Unity」をAdd Componentします。

①「Token」の「Auth」を押すとFigmaのページに飛ぶので「Allow access」を押すとアクセストークンを取得してセットしてくれます。
② 次に画面を取り込むFigmaのページURLを「Project Url」に入力します。
③ 下のほうに「Download Project」ボタンが表示されるので押してしばらく待つとダウンロードが始まります。
④ ダウンロード完了後、Figmaのページの中にフレームが複数あると、どれを取り込むかを選択できるので、選択して「Import Frames」をクリックで取り込みが始まります。フレームが1つだけの場合は「Download Project」ボタンで「Import Frames」まで連続でやってくれます。

注意点

・「Download Project」ボタンを押したあとにUnityをクリックしたりすると取り込みがおかしくなることがありました。「Import complete!」とコンソールに表示されるまで何もしないほうが良さそうです。
・「Game」Viewの画面サイズとFigmaのフレームのサイズが一致していないと取り込み位置がズレます。
・ マニュアルにもありますが、Figmaのフレームの「Clip content」のチェックは外さないと位置関係がおかしくなる場合があります。

良い点

フレーム選択

フレーム毎に選択して取り込むことができます。

Figmaのオブジェクト追跡

取り込んだオブジェクトには「FCU_Meta」というスクリプトがついており、これがFigma上のどのオブジェクトからImportされたものかを覚えてくれます。
Unity上で他のComponentをAddしたりして、Figmaからフレームを再取り込みしてもComponentは削除されず、Figma上での変更のみを反映してくれます。
デザイン確定後は、一括でFCU_Metaを削除する機能もあり便利です。

Unity上でのボタン化

Figmaのオブジェクト名の先頭に「btn」という接頭辞をつけておくとUnity上でbutton化してくれます。

Layout取り込み

Figma上のAuto layoutをUnity上でlayout化してくれます。
しかし、この記事を書いている時点では不具合がありました。

連絡

作者の方へ連絡することがあったのですが返信も早く、使い方の相談などにものってくださいました。
不具合や機能提案などさせていただいたのですが快く了承くださり、次回バージョンアップで対応したいですと言っていただけました。

悪い点

更新頻度

前回の更新(2022/12/2)から少し時間が経っており、前述のAuto layoutなど、Figmaのバージョンアップに追従できておらずlayout groupのChild Alignment指定は手作業での修正が必要です。
FCU_Config.assetというところに、Figmaからダウンロードしてきたjsonファイルの中身がこうなら、こういう指定にするという箇所があり、それを最新のFigmaのものと一致するように修正したらうまくいきそうですが、大変だったので手動で修正したほうが早いか・・・という状況でした。

保存先

Figmaのオブジェクトは画像(Sprite)としてダウンロードされるのですが、そのパスが「Assets/Sprites」固定となっています。
汎用的な名前すぎるので変更するか保存パスを指定させてもらいたいです。

作者の方に何とかならないでしょうかと連絡すると設定箇所を教えてもらえましたが、それは同じSprite画像があれば1つにするという機能に使われており、ダウンロード先としてはコード内で「Assets/Sprites」固定になっていました。

こちらは作者の方に連絡済みで、そのうち直してくれるらしいです。

tokenとurlの保存

tokenとurlはprefabに保存されてしまいます。
もしコードが流出するなどの事態になったとき、Figmaの方も流出してしまいます。
セキュリティ的にとても不満です。

足りない・欲しい機能

コンポーネントのprefab化

FigmaにはコンポーネントというUnityでいうprefabのような機能があるのですが、これを使用しているフレーム内ではコンポーネントをUnityのprefabとして扱ってリンクしてもらえたらいいなとデザイナーさんが言ってました。
Figmaの方でコンポーネントを変更して再度全画面を取り込み直せば解決するのですが、とても大変になりそうなので出来れば避けたいです。

SafeArea対応

モバイル端末向けのSafeArea対応が何かしらあると助かります。

Layer反映機能

UIはUIというLayerで統一させておこうと思っているのでFigmaからImportしたオブジェクトにLayer指定できたらうれしいなと思います。

Serialize Fieldへの反映

ボタン化してくれるのはありがたく、その先としてボタンをあるスクリプトのSerialize Fieldへ自動反映とかしてくれたら便利そうです。

自作対応

上記の足りない・欲しい機能の「コンポーネントのprefab化」以外は、自作スクリプトで対応しました。
Hierarchy上で右クリックしてメニュー選択でスクリプトを動作させるようにしたのでだいぶ使いやすくなったと思います。
prefab内のtokenとurlもクリアするようにしています。

UnityFigmaBridgeについて

使い方

UnityのPackage Managerでgit url経由で https://github.com/simonoliver/UnityFigmaBridge.git を指定して導入します。
Figma上でaccess tokenをあらかじめ作成しておきます。
Figmaの画面を取り込むSceneをあらかじめ作成しておきます。

① UnityのProject Settingsにある[Unity Figma Bridge]で[Create]を押して設定ファイルを作成します。
② Unityのツールバー [Figma Bridge]で[Set Personal Access Token]にaccess tokenをセット。
③ Figmaを取り込むSceneのパスをコピーします。
④ Unityのツールバー [Figma Bridge]で[Select Settings File]で[Unity Figma Bridge Settings]を開いて
=> Document Urlに取り込むfigmaのurl
=> Build Prototype Flowにチェックを入れる(後述)
=> Run Time Assets Scene Pathに先ほどのSceneのパスを貼り付け
⑤ Unityのツールバー [Figma Bridge]で[Sync Document]

良い点

tokenとurlの保存

tokenはPlayerPrefsに保存されます。
urlは「Assets/UnityFigmaBridgeSettings.asset」に保存されます。
UnityFigmaBridgeSettings.assetは個別に設定すれば良いので「git ignore」しました。

機能の豊富さ

「Figma Converter for Unity」の機能はほぼ網羅しており、さらに、足りない・欲しいと言っていた機能もLayer指定を除いて全て入っています。

Figma上に「SafeArea」という名前のオブジェクトがあればSafeArea対応のコードも自動付与してくれたり、「button」という名前が入っているオブジェクトがあればボタン化してくれたり、フレームと同じ名前のクラスがあれば自動でAdd Componentしてくれて、さらにSerialize Fieldされた変数の名前と一致するオブジェクトがあれば自動割り当てしてくれたり(検索は2階層固定)と、自分で対応した機能がほぼ入っていました。
さらにデザイナーさんが言っていたコンポーネントのprefab化も対応しており、これがFigma取り込みの完成形・・・？と思います。
「Figma Converter for Unity」では対応していないスクロールなども対応しています。(自身では動作未確認です)

githubのREADMEに細かく書いてあるので詳細はそちらを確認していただくのが良いと思います。

OSS

意図しない不正なコードが紛れ込む可能性もなくはないのですが、その分、多くの人が対応に携われるので前述のlayoutのバージョンアップなどがあった場合も追従は早そうです。
作者の方も意欲的に活動されているようで、頻繁に更新が入っています。

プロトタイプ対応

これがすごかったのですが、Figmaにはプロトタイプという機能があります。
こちらはFigma上で動作を設定できてプレゼンテーションを行うことができる機能なのですが、これをUnity上で再現してくれます。
取り込み設定で「Build Prototype Flow」にチェックを入れて取り込めば良いです。

どこまでを再現してくれているのかは確認できていませんが、ボタンをクリックして画面遷移するなど対応していました。
アニメーションなども対応しているのであれば、デザイナーさんが意図した通りの動作をUnityでそのまま再現できるため、In Gameの複雑な動きがある画面以外はこれで作れてしまうのではないかと思います。

保存先

こちらは現時点では「Assets/Figma」の下に保存されます。
汎用的な名前ではないのでこのままでも不都合はなさそうですが、AssetBundleの関係もあるので、自身で管理しやすいパスに移動させる必要は出てきそうです。

悪い点

現状では不満はありませんが、使い込んでいる訳ではないので、そのうち何かしら出てくるかもと思います。

まとめ

デザイナーさんがこういう画面デザイン形のツールは出ては消えを繰り返しておりAdobeに買収されたとはいえFigmaの寿命もどれくらいかは分からないと言っていました。
できれば末長く使えたら助かります。

個人的にはUIは将来的にはUnityのUI toolkitが担っていくと思っており、乗り換えるときにも、FigmaはCSSを出力してくれているので、そこからUSSへのコンバーターのようなものが作れるのではないかと考えています。