UnityFigmaBridgeでUnityとFigmaを連携する

takep


0. 何をするの？

UnityFigmaBridgeというアセットを用いると、Figmaでゲーム用のUIのレイアウトを作成し、Unityに同期させることができる

この記事ではFigmaとUnityを連携し、実際にUIのレイアウトを同期させる手順を説明する


※2024/05/19 追記
現在、FigmaプロジェクトのURLをUnityFigmaBridgeが正常に読み込めないエラーがあるようです。
以下に回避方法を記述しますが、"とりあえず動作する"だけで正常な動作を保証するものではないので、ご了承ください。 

※2024/07/24 追記
アップデートにより修正済みのようです。
以下に追記した回避方法の記述を削除しました。

※追記ここまで


使用した環境

Figma（Web版）
Unity 2022.3.4f1

用意するもの

Figmaのプロジェクト
Unityのプロジェクト
UnityFigmaBridge

※FigmaおよびUnityのアカウント登録、プロジェクトファイルの作成など事前準備は割愛


1. UnityFigmaBridgeのインストール

UnityFigmaBridgeのGitHubリポジトリのURLをコピーする

https://github.com/simonoliver/UnityFigmaBridge.git

Unity画面でパッケージマネージャーの左上 + ボタンを押し、Git URLからパッケージを加える を選択し、URLを貼り付ける

追加ボタンを押してインポート



2. URLの設定

Web版のFigmaにアクセスし、プロジェクトファイルを開いたら、上部にあるプロジェクトの URLをコピー する

FigmaのプロジェクトファイルのURL

Unityの画面に戻り、メニューバーから 編集 > プロジェクト設定 を選択し、Project Settingsウィンドウを開く

Project Settingsウィンドウの Unity Figma Bridge を選択し、Createボタンをクリックする
（エラーがたくさん出るが気にしない）

Document Url に上でコピーしたURLを貼り付ける


3. アクセストークンの設定

Figmaの画面を開き、左上のFigmaアイコンをクリックして ファイルに戻る を選択してホーム画面に戻り、左上のプロフィールから 設定 を選択する

下の方にスクロールしていき、個人アクセストークン の 新規トークンを作成 を選択する

トークン名 と 有効期限 を設定し、トークンを生成 を選択する
（トークン名は何に使っているか分かればなんでもOK）

アクセストークンをコピー する

Unityの画面に戻り、メニューバーから Figma Bridge > Set Personal Access Token を選択する

ウィンドウ内のテキストボックスに アクセストークンを貼り付け てOKをクリックする

以上で初期設定は完了


4. FigmaとUnityを同期する

その前に…
FigmaのプロジェクトをUnityに同期させる前に、UnityにTextMeshProを導入しておく必要がある
導入はUnityのメニューバーから ウィンドウ > TextMeshPro > TMP基本リソースのインポート を選択すると、TextMeshProをインポートできる

今回、FigmaとUnityを同期させる見本として、以下のようにテキストや画像を配置した

それぞれテキスト、フラットカラーとグラデーションの画像、
ゲームパッドアイコン、ボタンの画像を用意した

Unityへ同期するには、メニューバーの Figma Bridge > Sync Document を選択する

同期が完了すると、UnityのAssetsフォルダ内に Figmaフォルダ が作成され、その中にコンポーネントやページなどがプレファブとして保存されている

Screensフォルダにある Slideプレファブ を Canvas の下に配置すると、同期した内容を表示することができる

プレファブ配置前
プレファブ配置後

テキストやカラー・画像も問題なく表示されている
Buttonは他の画像と違い、クリックできるようになっていた
ゲームパッドアイコンは元々svgファイルだったが、同期したときpng画像に変換されていた
これ以降はFigmaでレイアウトや色を変更し、Unityで Sync Document をすることで、すぐに変更内容を反映させることができる


注意点

  • 上記でClickButtonという名前のButtonっぽいオブジェクトを用意しているが、テキストにオートレイアウトを追加して枠線を加えただけのものであり、Figma上ではボタンとして機能していない

    Unity上でボタンとして機能させるには、（Figma側の）オブジェクトの名前に “Button” を入れる必要がある

    　（他にも同期時に自動で追加されるコンポーネントがあるが、詳しい機能は調査中）

  • 当然ながら、”Unity側で” UIを編集 → 再びSync Documentをすると、Unity側で編集した内容が全て消えてなかったことにされるので要注意

    必ずFigma側で編集するか、Figmaを使わないのであればDocument Urlを削除しておくこと

  • png画像やjpg画像を使っていた場合、同期すると画像はそのままコピーされるが、ファイル名がオリジナルと異なる名前で保存される

    さらにSync Documentで再び同期すると、同期した画像の圧縮設定が強制的に 圧縮なし に変更されるので注意

  • svg画像を同期するとpng画像に変換されるが、画像のサイズがFigmaで指定した値と異なるサイズで出力される
    ※2023/09/15 追記
    Unity Figma Bridge SettingsにServer Render Image Scaleという設定項目がある
    この倍率を1倍に変更すると、Figmaで指定した値のサイズで出力された

デフォルトは3倍になっている

  • アロー、多角形など（執筆時点で）オブジェクトが対応していないものもある


5. 参考


この記事が気に入ったらサポートをしてみませんか？