MRTK Figma Bridgeを試してみる
今回は以前取り上げたMRTK Figma Toolkitを、Unityに取り込むためのUnity用Figma Bridgeを試してみます。
xr-physics-work-etc.hatenablog.com
MRTK Figma Bridge for Unityは、MRTK FIgma Toolkitで作成したデザインを直接MRTKに取り込むことができるツールです。
環境
Unity 2019.4.17f1 → 2020.3.16f1
MRTK 2.7.2
準備
Figma Toolkitのインストール
まず、MRTK Figmaの結果をインポートしたいUnityProjectを、Mixed Reality Feature Toolで開きます。
Discover FeatureのMixed Reality ToolkitからMRTK Figma Bridgeを探し、チェックボックスにチェックを入れます。
念のため、インポート済みのMRTK2.7.2にもチェックを付けます。
右下のGet Featuresボタンを押すと、インポートされる内容が表示されます。
必要なものがすべて選択されていれば、Importボタンを押します。
右のFiles to be copied into the projectにMRTK Figma bridgeとMRTK2.7.2が設定されていることを確認し、Approveを選択します。
UnityProjectが更新されるので、Exitボタンを押た後、UnityProjectを開きます。
いくつかエラーが出ているので、エラー内容を確認したところ、Unity2019に存在しないIStyle.textOverflowを使用しているようです。
※ Figma Bridgeの公式チュートリアルにはUnity2019以降って書いてあったんだけどなぁ
そのため、Unity2020.3.16f1でMRTK、Figma Bridgeの導入を再度実施しました。
Unity2020.3.16f1で試したところ、今度はエラーが出ずにFigma Bridgeのメニューが選択できるようになりました。
Figmaの内容のインポート
先ほど確認したFugna BridgeのメニューからFigma Bridge Windowを選択するとFigma Tokenを入力するウィンドウが表示されます。
Figma Tokenを取得するために、ブラウザからFigmaのプロジェクト画面を開き、左上メニューからHelp and Account→Account Settingを選択します。
※アカウント作成が必要です。
表示されたAccount SettingのPersonal access tokensのテキストボックスに任意の文字列を入れ、エンターキーを押すとaccess tokenが生成されます。
生成されたaccess tokenをUnityのFigma Bridge WindowのFigma Tokenテキストボックスに入力し、Open Fileボタンを押します。
次に、FigmaプロジェクトのURLからIDを取得し入力します。
URLのフォーマットは下記で、[ID]の部分を探し、コピー&ペーストします。
https://www.figma.com/file/[ID]/[Title]
参考：
docs.microsoft.com
GetFileボタンを押してしばらくすると、対象のFigmaプロジェクトの名前が表示されます。
目的のプロジェクト同じであれば、Load Fileボタンを押下します。
すると、Figmaプロジェクト中のページが表示され、インポートするページを選択できます。
今回は、作成したExportExampleを選択します。
動作確認
Build Pagesボタンを押すと現在表示中のScene中にFigmaからインポートした内容が追加されます。
ボタンやテキストなども適用されていますが、Menuの背面のプレートは表示されず、MeshRenderer自体もアタッチされていませんでした。
また、ボタンのアイコンも適用されていません。
Figmaプロジェクトのインポート元：
UnityProjectでのインポート結果：
別途元から用意されているComponentsページもインポートしましたが、同様に正しくインポートできるもの/できないものがありました。
インポート元：
インポート結果：
原因は不明ですが、MRTK Figma Bridgeはまだベータ版なので正しく動いていないのでしょう。
正しくインポートされるようになれば、デザイン試作から実装までのプロセスがより簡単になりそうです。
