MRTK Figma Bridge を使って Figma レイアウトファイルを Unity に読み込む方法

# はじめに
Tokyo HoloLens ミートアップ vol.28 で紹介されていた**「MRTK Figma Bridge」**が Publish されましたー🎉

**MRTK Figma Bridge** は、 Figma *( Web ベースのベクターグラフィックを編集できるプロトタイピング・デザインツール )* 上で、**[MRTK Figma Toolkit](https://docs.microsoft.com/en-us/windows/mixed-reality/design/figma-toolkit)** を用いてデザインしたレイアウトファイルを Unity で扱えるように 解析 / 変換 してくれるブリッジツールで、Figma レイアウトファイルを読み込み後は、 Figma Bridge Window を介して Figma で生成されたレイアウトを Page ごとに、ゲームオブジェクトとして追加することができます。また、Interactable や Box Collider などのオブジェクト操作に必要となるコンポーネントも自動でアタッチ処理が行われます。

Figma を使ってデザインした UI (ユーザーインターフェース) を短時間で Unity に取り込み、すぐに動作可能な状態に持っていけるのは、非常に便利ですね。

それでは早速 **MRTK Figma Bridge** ツールの使い方をご紹介したいと思います。

# 前提条件
- Figma アカウントを作成済みであること
- Mixed Reality Feature Tool をダウンロード済みであること
- Unity Hub をインストール済みであること

# 検証環境
- Unity : ```2020.3.8f1```
- MRTK : ```v2.7.0```
- Mixed Reality OpenXR Plugin : ```1.0.3```
- MRTK Figma Bridge : ```0.1.1 ( Beta )```
- MRTK Figma Toolkit : ```v1.1.3```
- Mixed Reality Feature Tool : ```v1.0.2104.4 Beta```

<font color="#000">**※ MRTK Figma Bridge は、現在ベータ版として提供されているため、本記事記載内容に変更が加わる可能性があります。**</font>


# 目次

1. Figma で MRTK Figma Toolkit を使って UI デザインを行う
2. Figma Access Token を作成する
3. Figma File ID を確認する
4. MRTK Figma Bridge を使用する Unity プロジェクトを作成する
5. Unity プロジェクトに MRTK Figma Bridge パッケージをインポートする
6. MRTK Figma Bridge を使って Figma レイアウトファイルを Unity に読み込む

# 手順

## 1. Figma で MRTK Figma Toolkit を使って UI デザインを行う

**[MRTK Figma Toolkit](https://www.figma.com/file/zeGez3Phuzel9JrU1o20nn/Figma-Toolkit-for-MRTK-%2F-HoloLens%2C-Windows-Mixed-Reality?node-id=116%3A4)** ページへアクセスします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/b7cf68c3-b768-b537-ef01-fedbef7615df.png" width="800">

ページ最上部の [ｖ] ボタンを展開し、**[ Deplicate to your drafts ]** を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ed109e77-f772-6da8-44fd-fc8971c5e956.png" width="800">

左上のメニューより **[ Back to files ]** を選択し、ファイル一覧を表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/a804a9fa-0e56-300f-6e19-60863656044b.png)

**[ Draft ]** タブを選択すると、**「Figma Toolkit for MRTK / HoloLens, Windows Mixed Reality (Copy)」** ファイルが追加されていることが確認できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/029fc385-c962-8040-b29e-e730de60e296.png" width="800">

サムネイル上にカーソルを合わせ、右クリックでメニューを開き、**[ Rename ]** を選択して任意の名前に変更します。( ※ MRTK Figma Bridge を使って、シーンにゲームオブジェクトとして追加した際。ファイル名が親オブジェクト名となります。) 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/4b81a0ff-e23e-4c68-95c0-27a6bdb481bb.png" width="800">

この記事では、**FigmaBridgeTest** としておきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/565be00c-6373-14e4-e694-903ac120c00d.png" width="350">

サムネイルを押下して、ファイルを開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/73a32a46-9a5b-35e3-ca95-698a7622b1de.png" width="800">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/f923ea7d-d390-c694-b71d-07fe8cfafa24.png" width="800">

Figma は1つのファイル内に複数の Page を作成することができ、Page 上にアセットを追加してデザインを行います。MRKT Figma Toolkit は、7つのページで構成されています。各 Page の詳細については別の記事にまとめているので、**[こちら](https://qiita.com/Futo_Horio/items/7dc53bc3006b319b2c66#introduction--figma-toolkit-%E3%81%AE%E7%B4%B9%E4%BB%8B)** からご覧ください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/654e3bee-4cdd-d0d2-3661-26a82c253d5f.png" width="300">

続いて、新しい Page を作成します。
Pages の右に表示されている **[ + ]** アイコンを押下し、
新規ページを追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2c5604be-00b1-9ebf-2b85-e3f9a5f99631.png" width="300">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/cb14c878-2b49-e373-1cd4-513f16eae364.png" width="300">

新規ページを追加すると、背景色 ( Background ) が ```#000000``` に設定されているので、
左の Desing タブから、プロパティ : Background を ```#E5E5E5``` に変更します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e81a5779-25d9-3252-1e70-fd89c548318b.png" width="800">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/06e01cbd-ab72-eb48-4a32-3326b28fc68d.png" width="300">

**Pages > Viewports** へ移動し、 **HoloLens 2 Viewport** をコピーし、さきほど新規作成したページに貼り付けます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/7a5a0e79-abce-8c9c-4cfd-129a879ffec6.png" width="800">

本記事では **MRTK Figma Toolkit** のサンプルをコピーして、変換してみたいと思います。( ※ 今回は手順の紹介がメインのため、デザインの方法は割愛します )

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/03473bf6-e4c4-d895-f7a6-463d523dc8af.png" width="800">

続いて、MRTK Figma Bridge を介して Figma レイアウトファイルを取得するために
必要な **Access Token ( Figma Token )** と **File Id** を取得します。

## 2. Figma Access Token を作成する

Access Token はアカウント設定ページより新規作成することができます。

 **[ Figma ]** > **[ Help and acount ]** > **[ Account Settings ]** を選択し、アカウント設定画面を開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3cb5d6d3-34a7-ba99-6a1b-57dc72af1c19.png" width="450">

アカウント設定画面が開いたら、**Personal access tokens** > **Create a new personal access token** 入力フィールドに新規作成するトークン名を入力し、トークンを発行します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/6836c7fb-e0c2-5600-9378-749c93a83b9d.png" width="350">

トークン発行時のみ、**access token** が表示されます。次回以降、access token は表示されないので、<u>**Copy this token**</u> ボタンを押して、メモしておいてください。
( ※ access token は、これ以降の手順で必要となります )

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2f0599d4-07c9-9f74-da60-879fc013eb85.png" width="350">

- [Access Token ｜ Figma 公式ドキュメント](https://www.figma.com/developers/api#access-tokens)

## 3. Figma File ID を確認する

```File Id``` は、ファイル閲覧時の URL に含まれています。


> ex. figma.com/file/<font color="black">◯◯◯◯◯◯◯◯</font>/FigmaBridgeText?node-id=xxxxxx

◯◯◯◯◯◯ の部分が ```File Id``` に相当します。```File Id``` は MRTK Figma Bridge で、ファイルを読み込み際に必要になるので、こちらもメモしておきます。
( ※ File Id は、これ以降の手順で必要となります )

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8ff799d3-a59f-f2e3-5d72-be5e8df73e15.png" width="600">


- [Bubble and Figma ｜ Figma 公式ドキュメント](https://help.figma.com/hc/en-us/articles/360052378433-Bubble-and-Figma)

## 4. MRTK Figma Bridge を使用する Unity プロジェクトを作成する

Unity Hub を開き、**[ NEW ]** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/7c6ed114-89e2-c2f2-10b5-43e38d2909bf.png" width="800">

新規プロジェクト作成ダイアログが開いたら、**3Dテンプレート** を選択、**プロジェクト名** を入力し、 **[ CREATE ]** ボタンを押して、新規プロジェクトを作成します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/2986dd72-391e-62e8-0c95-7e443ab65868.png" width="800">

新規プロジェクトが開いたら、**File > Build Settings** を選択し、Build Settings を開き、UWP (Universal Windows Platform) を選択し、Switch Platform を実行します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/bc1531c7-6e26-eb6e-e2b9-b10bd02c82dd.png" width="400">

処理が完了したら、一旦 Unity アプリケーションを落とします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/30c423f8-a634-8050-de3a-7784162fc575.png" width="800">

## 5. Unity プロジェクトに MRTK Figma Bridge パッケージをインポートする

[Mixed Reality Feature Tool for Unity](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/welcome-to-mr-feature-tool) を開き、**[ Start ]** ボタンを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/54473f53-8f8c-1e44-1627-88da35d6393e.png" width="600">

さきほど作成したプロジェクトパスを指定して、**[ Discover Features ]** ボタンを押下します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ae184e92-9bd8-b669-9894-772c2db28bf2.png" width="600">

続いて、以下のパッケージにチェックを入れて、 **[ Get Features ]** ボタンを押します。

- MRTK Figma Bridge ```0.1.1```
- Mixed Reality Toolkit Foundation ```2.7.0```
- Mixed Reality Toolkit Standard Assets ```2.7.0```
- Mixed Reality OpenXR Plugin ```1.0.3```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c384100a-7b28-6929-a971-049d6fc631ea.png" width="600">

**[ Validate ]** ボタンを押して、問題無ければ、**[ Import ]** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c3f4bdca-32e2-a7e5-15aa-e56a5b148046.png" width="600">

マニフェストの変更とパッケージファイルの追加について確認を行い、**[ Approve ]** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/414605e8-4c64-cf98-ff12-7c74b08ab08c.png" width="600">

これで MRTK & MRTK Figma Bridge をインポートする準備が整いました。**[ Exit ]** ボタンを押して、Mixed Realty Feature Tool を閉じます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/6720cf82-0500-3d3f-b2e8-b2d9aa8111d5.png" width="600">

以上で、こちらの手順は完了です、

## 6. MRTK Figma Bridge を使って Figma レイアウトファイルを Unity に読み込む

さきほど作成した Unity プロジェクトを開きます。MRTK Project Configrator ダイアログが表示されるので、**[Configuring the Unity project](https://docs.microsoft.com/en-us/windows/mixed-reality/develop/unity/tutorials/mr-learning-base-02?tabs=openxr#configuring-the-unity-project)** を元にセットアップを行います。

ダイアログを用いたセットアップが完了したら、以下の手順を進めます。

**Mixed Reality > Toolkit > Add to Scene and Configure..** を実行します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/27b5ff73-1e64-dd55-1a27-7acbf7338b20.png" width="600">

**ヒエラルキーウィンドウ >  MixedReality Toolkit** を選択し、プロファイルを **DefaultHoloLens2ConfigurationProfile** に変更します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/6a3f372b-d097-7921-d03c-f8b2d0bf826b.png" width="400">

**Mixed Reality > Toolkit > MRTK Figma Bridge > Figma Bridge Window** を開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/f652b448-9acf-8d48-030a-1ef362fe7c4a.png" width="600">

Figma Bridge Window が開いたら、さきほど作成した Figma Token (access token) を入力し、**Open Files** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/4378c011-0766-34fa-619c-695f82b88f90.png" width="600">

続いて、```File ID``` を入力し、**Get File** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/9b44c784-3816-fda0-4260-520f1e92ed63.png" width="600">

正常にアクセスできれば、さきほど作成した Figma ファイル名がリストに表示されます。
Figma ファイルから Pages をロードするために、**Load File** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/d09936c7-6bfc-32fe-1326-ba66c291d8f0.png" width="600">

ファイル読み込みが完了すると、Figma デザインファイル内の Pages 名が一覧で表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/d282fadf-ef0d-2285-6e86-f507ebaec19d.png" width="600">

今回は ```Sample``` にチェックを入れ、**Build Pages** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/377d71a3-0b0a-b642-2354-b2aa6fb1c710.png" width="600">

Build Pages の処理が終わると、ヒエラルキーウィンドウに GameObject が追加されます。

[ Figma ファイル名 ] > [ Page 名 ] > [ Asset 名 ] という命名規則のようです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3ab34e28-2f74-4c18-3df6-13491b866f3b.png" width="600">

Figma Bridge を使って、追加した Pressable Button にも、Collider や Interactable など、オブジェクト操作に必要なコンポーネントがアタッチされていることが確認できました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/6dadd821-3ff9-d18f-d79c-4193c396daab.png" width="600">

Unity Editor で ゲーム再生 ( ```Play``` ) を実行して、正常に動作することも確認することができました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/50777fbe-9bef-53e5-f6ad-4745dd3594f8.png" width="600">

実際の動作の様子はこちらをご覧ください。

<blockquote class="twitter-tweet"><p lang="sl" dir="ltr">MRTK Figma Bridge v0.1.1 (beta)<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/FigmaBridge?src=hash&amp;ref_src=twsrc%5Etfw">#FigmaBridge</a> <a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <a href="https://t.co/vEwjoJQFEz">pic.twitter.com/vEwjoJQFEz</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1439898385322954755?ref_src=twsrc%5Etfw">September 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 実際に試してみて 
Figma から Unity へすぐに変換できるので、UIデザイン～実装の流れがよりスムーズになりそうです。これまでは Figma と MRTK Figma Toolkit を使ってデザインをしても、Unity 上で同一のデザイン・レイアウトをエンジニアが実装する必要がありましたが、この MRTK Figma Bridge をうまく開発フローに組み込めば、それらの開発コストも大幅に圧縮できるのではないかと思います。

Figma が2D向けのデザインツールのため、3次元のレイアウトは Unity で設定する必要がありますが、それを差し引いてもかなり便利なツールだと思います。

ひとまず MRTK Figma Bridge を動かすところまで、手順が分かったので、引き続き、内部処理や具体的な挙動について調査を進めて行きたいと思います。

最後までお読みいただき、ありがとうございましたー！

# 参考資料

### 1. Figma と MRTK Figma Toolkit の使い方
MRTK Figma Toolkit を Figma にインポートして、Figma 上でデザインラフを作成する方法は、以下 Qiita 記事にまとめているのでそちらをご覧ください。

- [Figma を使って MRTK の デザインラフ を作成する方法](https://qiita.com/Futo_Horio/items/7dc53bc3006b319b2c66)

### 2. MRTK Figma Bridge について

Tokyo HoloLens ミートアップ内で、Yoon さん ( Principle UX Designer, Microsoft ) が
**MRTK Figma Bridge** を紹介されているセッションは、以下 YouTube に公開されているので、
ご興味がある方はこちらも是非ご覧ください。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/7d1ad651-6760-7f0f-483a-65089bdf7fce.png" width="600">

> **MRTK Figma Bridge について**
> [Tokyo HoloLens ミートアップ vol.28 祝!主催イベント100回目記念スペシャル!!](https://youtu.be/8wedua7WxdM?t=2597) ( YouTube )

### 3. MRTK Figma Toolkit の Pages について


MRTK Figma Toolkit を構成する Page は、以下のとおりです。

| MRTK Figma Toolkit (v1.1.3) > Pages | 概要 |
|---|---|
| Cover ( 表紙 )<br/><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/7f5a9b79-7bfd-6fe6-9ac8-f4c54c9778ad.png" width="300"> | 表紙 |
| Introduction (  紹介 )<br/><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ce96c495-4531-0b37-8f6c-3690eadf6a53.png" width="300"> | MRTK Figma Toolkit の紹介 |
| Change Log ( 変更履歴 )<br/><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ccde5f49-71ae-a089-062c-427bd1592781.png" width="300"> | MRTK Figma Toolkit の変更履歴 |
| UI Gallery ( UI ギャラリー )<br/><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/4b24c66f-c5f5-5951-bd87-b38c899edf74.png" width="300"> | MRKT Figma Toolkit の UI ギャラリー | 
| Viewports ( 表示領域 )<br/><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/75d07fcd-51f8-a4a1-ff93-ff74befd4c6c.png" width="300"> | HoloLens と HoloLens 2 の Viewport |
| Examples ( 使用例 )<br/><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/6458fc5b-5a62-86f8-952a-0884971bc197.png" width="300"> | MRTK Figma Toolkit を使用したデザインのサンプル (ストーリーボード) |
| Components ( コンポーネント )<br/><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/56db0219-0080-a006-7b15-16854c7a32e2.png" width="300"> | MRTK Figma Toolkit に含まれているコンポーネント一覧 |