UIデザインをFigmaで行う試み

少し前からFigma Toolkitを呼ばれるFigma上で利用できるツールが公式に提供されています。2DながらUIデザインをブラウザ上で実施できるため、ラフスケッチやデザインの検討を手早く実施することができます。最近このFigma Toolkitの情報を利用してUnity上でMixed Reality Toolkit for UnityのUIコンポーネントをレイアウト通りに生成するための新しいパッケージ「MRTK Figma Bridge for Unity」が提供されています。まだ、β版(V0.1.1)のため機能は少ないのですがどういったことができるようになるのか少し調べてみたので紹介します。

今回の流れ

大きくは以下の2つについて解説したいと思います。

Figma Bridge For Unityの紹介
環境について
実際にFigma Bridgeを利用してコンテンツを作成

Figma Bridge For Unityの紹介

Figma Bridge For Unity(以降Figma Bridge)はUIデザインツールであるFigma上で作成したコンテンツをMRTKをセットアップしたUnityプロジェクトにインポートするためのUnityパッケージです。
Figma Toolkitとセットで利用することで、以下のことが可能になります。

MRTK Building Blocks(MRTKの組込み部品)を使用したUI設計をFigmaツールで実施できる
実施したレイアウト情報をUnityにインポートしてコンポーネントの初期設定を構築できる

簡単に模式化すると以下のような形になります。

UI設計時の顧客やデザイナーとの検討にFigmaを用いてラフスケッチを検討しUnityにインポートしてモックとして確認する等Mixed Realityの開発効率を高めるツールだと思います。現状はβ版でコンポーネントのレイアウトとテキスト程度しか連携できないようですが、これからが楽しみなツールです。

簡単な仕組み

以下、簡単なステップで取込みを実現しています。シンプルでいいですね。

Figma BridgeはFigmaツールで設計したファイルにRest APIでアクセスし、その情報を取得します。
- この際アクセスにはFigmaのPersonal Access tokenが必要になります。
- 取得したデータはUnityプロジェクト内にキャッシュします。Figma上で変更した場合は再取得が必要
取得した情報からUnity上でMRTK Building Blocksの部品に変換しレイアウトを復元します。

Figma上の情報とUnity側のMRTKの情報をマッチングさせて機能するようになっています。

Figma Toolkit Custom MapによるMRTK Building Blocksとの照合

Figma上の情報とMRTKの紐づけはそのための変換テーブルを持っています。この変換テーブルは開発者のカスタムすることが可能です。これによりオリジナルの部品をFigma上で表現できるようにすることで自在にUIデザインを可能にすることができます。

※2021/09/22時点ではFigma Toolkit Custom Mapを利用することはできないようです。

Figma Toolkit Custom Mapは以下のような構造をもっていており、Figmaのコンポーネント名とCustom Mapのキーが一致した場合に、対応するPrefabコンポーネントをHierarchyに追加するようになっています。

プロパティ名	説明
Json Response(設定不要)	Figmaから取得したUIデザインの情報を格納するプロパティ
Default Font	Unity上で利用する置換えフォント
key	コンポーネント名。このキー名はFigma上で定義する名前に対応しています。この名前が一致しないと空オブジェクトで配置されます。
prefab	対応するUnity上のPrefabオブジェクト。例えばここにHoloLens2 Buttonなどが入ります。
Process Type	処理タイプ。Figma Bridge上で行う変換処理としてどのタイプとして処理するかを指定します。現状以下のカテゴリわけがされています。 Default Button Button Collection Backplate Slider
Offest	Figma上のレイアウトとUnity上のレイアウト調整のためのオフセット値を設定します。

現時点でサポートしているMRTK Building Blocks

現時点(V0.1.1)では初期値として以下のコンポーネントへの変換情報を持っています。
これ以外のコンポーネントは変換されずに空のGameObjectになります。


HoloLens2 Button Collection 5V	HoloLens2 Button Collection 4V	HoloLens2 Button Collection 3V	HoloLens2 Button Collection 5H	HoloLens2 Button Collection 4H
HoloLens2 Button Collection 3H	UI Backplate	Near Menu 3x1	Near Menu 3x2	Near Menu 3x3
Near Menu 4x1	Near Menu 4x2	Near Menu 2x4	Slider	Slate
DialogSmall_192x96	DialogMedium_192x128	DialogMedium_192x192	AppBar	Bezier Tooltip
Simple Line Tooltip	Spline Tooltip	Rotating Orbs	Indeterminate	Loading Bar
Generic Checkbox	Radio Button	Generic Toggle Switch	HoloLens1 Button	HoloLens1 Toggle Button
Generic Radio Set	HoloLens2 Button 32x32mm	HoloLens2 Toggle Button 32x32mm	HoloLens2 Button 48x48mm	HoloLens2 Button 64x64mm
HoloLens2 Button 32x96mm	HoloLens2 Button Circular 32x32mm	HoloLens2 Button Circular 48x48mm	HoloLens2 Checkbox Button 32x32mm	HoloLens2 Radio Button 32x32mm
HoloLens2 Switch Button 32x32mm	HoloLens2 Checkbox Button 32x96mm	HoloLens2 Radio Button 32x96mm	HoloLens2 Switch Button 32x96mm	HoloLens2 Button 32x96mm TextOnly

環境について

開発環境はMicrosoft公式のMixed Realityでの開発環境を参考に以下の形で実施。

Unity 2020.3.8f1
Mixed Reality Toolkit V2.7.2
MRTK Figma Bridge V0.1.1
Mixed Reality OpenXR Plugin v1.0.3

今回は、OenXRでの開発を行うためOpenXR Pluginを利用します。

Figmaの利用

今回はFigmaでUIデザインを行いUnityにインポートします。事前に以下の作業を実施しておいてください。

Figmaのアカウントの作成と環境構築
Figma Toolkitを自分の環境にコピー
Rest API用のアクセストークンの取得

手順は後述の[環境について]を参照してください。

1. Figmaのアカウントの作成と環境構築

アカウントは任意のメールアドレス等で作成可能です。https://www.figma.comにアクセスしてサインアップします。
アカウント作成後フォントヘルパーをインストールします。上記のQiita記事にも手順を記載していますが、Figma上で文字入力を行う際にローカルフォントの連携が必要になります。
「アカウント設定-Fonts」にあるフォントを利用する為のヘルパーをインストールしてください。

2.Figma Toolkitを自分の環境にコピー

「公式ドキュメント- Figma ツールキット」の手順を参考にしてください。
手順は簡単で[アカウント設定]-[Personal access tokens]の項目に入力項目があります。ここに任意(FgimaBridgeForUnity)の名前を入れてEnterキーを押すとキーが作成されますのでメモに残しておきましょう。

Figmaから実際にコンテンツを作成する

早速、新しく提供された「MRTk Figma Bridge」を使用してUIデザインした情報をUnityで取込み簡単なコンテンツを作ってみたいと思います。
機能はシンプルに「ハンドメニュー」と「コンテンツ」領域を作成しこれらを活用してコンテンツの作成を簡略化します。

機能は以下のものを実装します。

【メニュー】
- ハンドメニューで実装
- ハンドメニューは掌を返すと出現し、解除すると空間にとどまる
- スライダーでサイズ調整
- Resetボタンで初期位置に戻る
- ×ボタンでクローズする
【コンテンツ部分】
- 台座を設置
- コンテンツのオブジェクトは任意で何かを置く
- ハンドトラッキングで操作が可能
- Resetボタンを押すと初期位置に戻る

Figma Toolkitによるデザイン

V0.1.1ではまだ、十分の機能が実装されていません

Custom Mapは利用できないようです。

プロパティ関連はレイアウト位置、テキストのごく一部のみサポートしています

Figma Toolkitについては過去ラフスケッチをするための情報を整理していますので使ったことがない方はこちらを参考にしてください。
なお、デザイン時の注意点としては「Figma Toolkitで設定されているコンポーネント名を変更せずに利用する」ことです。Figma Bridgeのコンポーネント変換で説明した通り、コンポーネント名がキーになっているため、わかりやすくするために[XXXXButton]とリネームしてしまうと紐づけが行われず空オブジェクトが生成されます。

公式ドキュメントは以下です。

今回は以下のようなUIデザインを作成します。なお、作成済みのUIレイアウトは以下の通り共有していますので、参考にしてください。
デザインが面倒な場合はコピーして自分のアカウントにコピーしても利用可能です。

コンポーネントは以下の構成になっています。

コンポーネントの親子関係を抜き出すと以下の様になります。

# 2 - HandMenu [Viewport]
- Root [Frame]
  - HoloLens2 Button 32x32mm [Components]
  - HoloLens2 Button 32x32mm [Components]
  - Scale [Text]
  - Slider [Components]
  - UI Backplate [Components]
# 1 - Contents[Viewport]
- HoloLens2 Button 32x32mm [Components]
- Spline Tooltip [Components]
- [Examples for Qiita] Example... [Text]
- TargetObject [Components]
- UI Backplate [Components]

Unityプロジェクトの初期設定

基本的な手順はMicrosoft の「公式ドキュメント - Docs/Windows/Mixed Reality/開発/Unity/チュートリアル/HoloLens 2 のチュートリアル/初級レベルの/MRTK チュートリアル/2. プロジェクトと最初のアプリケーションの初期化」にもあるので参考にしてください。
手順で異なる点はパッケージのセットアップ時に以下のものを追加しているところです。

MRTK Figma Bridge V0.1.1
Mixed Reality Toolkit Foundation V2.7.2 (必須)
Mixed Reality Toolkit Standard Assets V2.7.2 (必須)
Mixed Reality OpenXR Plugin V1.0.3 (必須)
Mixed Reality Toolkit Tools V2.7.2 (任意)

Unitｙプロジェクトの作成とHoloLens向けのビルド設定

最初にUnityプロジェクトを作成します。作成後ビルド設定をHoloLens用に変更しておきます。

最初に任意の場所にUnityプロジェクトを作成します。

メニューから[File]-[Build Setting]選択します。そして以下の通り設定変更後、[Switch Platform]をクリックします。

[Target Device]を[HoloLens] に設定
[Architecture]を[ARM 64] に設定
[Build Type]を[D3D Project]に設定
[Target SDK Version]を[Latest installed]に設定
[Minimum Platform Version]を[10.0.1024.0]に設定
[Visual Studio Version]を[Latest installed]に設定
[Build and Run on]を[USB Device]に設定
[Build configuration]を[Release]に設定

以上で一旦、Unityプロジェクトの設定が完了します。次にMRTK等の必要なコンポーネントを設定します。

Mixed Reality Feature Tool for Unityでのセットアップ

次にMixed Reality Feature Toolで必要なコンポーネントを設定します。アプリケーションの設定などは以下の公式ドキュメントを参考にツールをダウンロードして実行します。

アプリを起動し先ほど作成したUnityプロジェクトを選択し、[Discover Feature]をクリックします。

必要なコンポーネントを選択し、[Get Feature]をクリックします。必要なコンポーネントは以下の通りです。一部便利なものもあるのでToolsはインポートしていますが任意です。

MRTK Figma Bridge V0.1.1
Mixed Reality Toolkit Foundation V2.7.2 (必須)
Mixed Reality Toolkit Standard Assets V2.7.2 (必須)
Mixed Reality OpenXR Plugin V1.0.3 (必須)
Mixed Reality Toolkit Tools V2.7.2 (任意)

依存関係の確認し、問題がない場合は[Import]をクリックします。コンポーネントの依存確認が行われます。依存関係で追加忘れがあると対象を検索してくれます。今回は何もないはずです。

以上で、必要なコンポーネントのセットアップが完了しました。
次は再度Unityプロジェクト開いて作業を進めます。

OpenXRとMRTKの設定

次のUnityプロジェクトに追加したコンポーネントをセットアップしていきます。
1. [MRTK Project Configurator]で[Unity OpenXR plugin(recommended)]を選択
Unityプロジェクトを開くと、自動的にパッケージのインポートが実施され、しばらくすると以下のような設定画面が表示されるので、OpenXRの設定を進めていきます。

OpenXRの設定が実施され問題がなければ以下のようにXRプラグインの設定をするように指示されます。[Show XR Plug-in Management Settings]をクリックしてプロジェクト設定を開きます。

2. XR Plug-in Managementの設定
XR Plug-in Managementの設定を行っていきます。[Project Settings]から[XR Plug-in Management]を選択します。[UWP]タブ（Windowsのアイコン）が選択されている状態で[Initialize XR on Startup], [OpenXR], [Microsoft Hololens feature group]の3つをチェックします。チェックした際に警告（黄色い△）が出ることがありますが、Capability等の設定が不足しているために出てくるようです。クリックして必要な修正を加えてください。

次に[OpenXR]の設定を行います。[Depth]の設定を[16bit], [Interaction Profiles]に[Microsoft Hand Interaction Profile]を追加します。

上記でOpenXRについての設定は完了です。
3. 設定の反映
最後に設定を適用していきます。上記の作業を進めると[MRTK Project Configurator]は以下の様に変更していると思います。まずは左の[Apply Settings]をクリックします。

次に[Next]をクリックして次の設定画面へ移動します。

プロジェクトに適用すべき設定が表示されるのですべてチェックされていることを確認して[Apply]をクリックします。

4. Package Nameの変更
最後に忘れがちなパッケージ名を変更します。比較的初期のからありがちな話なのですが、HoloLensにインストールするアプリケーションを内部で一意に管理するためにパッケージ名を使っています。このためUnityプロジェクトを作成した後にパッケージ名を変更せずにいると「名前(表示名)が違うアプリケーションでもパッケージ名が同じだと同一視」されてしまいます。[Project Settings]-[Player]-[Publishing Settings]-[Packaging]-[Package Name]を変更しておきましょう。

Figma Bridge For UnityでUIデザインを取り込む

上記の設定ができていればメニューからMRTK Figma Bridgeが利用可能になります。早速試してみましょう。

シーンを作成する既にあるSampleSceneまたは新しいシーンを追加します。追加したらメニューから[Mixed Reality]-[Toolkit]-[Add to Scene and Configure...]を選択してシーンに必要なMRTKのコンポーネントを設定します。
メニューから[Mixed Reality] - [Toolkit] - [MRTK Figma Bridge] - [Figma Bridge Window]を選択 UnityのメニューからFigma Bridge For Unityを開き取り込む準備をします。
FigmaのPersonal Access tokenを設定する最初の手順でFigmaのRest APIへアクセスすためのトークンを入力します。
ファイルを指定する次に、Figma上のファイルは個別にIDを持っているので、取り込むファイルのIDを入力します。IDはURLの一部になっています。 https://www.figma.com/file/**[ID]**/...
このIDを設定し[Get File]を実施すると入力項目の下にファイル名が出力されます。
ファイルをロードするここまで問題なく情報が取得できていれば、[Load File]をクリックします。上部に[Document]が出てくるので選択するとページの一覧が表示されます。
取り込みたいページを選択しビルトを実施する。
今回は[Examples For Qiita]ページを取り込むのでチェックを行い[Build Pages]をクリックします。もし、Text Mesh Proパッケージをインポートしていない場合はインポートのダイアログが出てきます。インポートしましょう。

成功すると以下の様に取り込まれます。

取込んだ情報は以下のFigmaと同じ階層構造を持っています。名前についてはFigma上の名前とオブジェクトの種類で命名されています。
例えば1-HandMenuはFigma上ではViewportとして定義されていたフレーム(スライド切り替えなどの単位)になっています。

以降はこれを元に必要な実装を行っていきます。

実装を追加する

最後に取り込んだ部品に対して修正を実施します。

元のレイアウトを修正

取込んだ情報を手直しします。本来はオブジェクトの名前なども変更すると思いますが、今回はそのままで行います。

HandMenuの修正

まず、修正が必要な個所としてメニューのcloseです。今のところアイコンの設定は反映されないようです。β版ではまだすべてのコンポーネントをサポートしているわけではないようで出力されないものもあります。現状出力可能なオブジェクト等については後述します。

Close用Buttonの設定以下のオブジェクトを選択します。ただし2つあるはずなのでCloseに相当する方を選んでください。
・[Figma Bridge Examples for Qiita]/[Examples For Qiita [Canvas]]/[2 - HandMenu [Frame]]/[Root [Frame]]/[PressableButtonHoloLens2(Clone) [Instance]]
Inspectorパネルから[Button Config Helper]を探します。以下の設定を変更するとFigmaで設定したものとほぼ同じ状態になると思います。
- Labels内のチェックをすべて外す
- Icon StyleをQuad
- Icon Setの中から×を選択
[2 - HandMenu [Frame]]のPositionを(0,0,0)に設定します。

設定後はこのようになります。Figmaでのレイアウトとほぼ同じになります。

Contentsの修正

次にコンテンツ部分も修正します。

[Spline ToolTip(Clone) [Instance]]を選択し以下を設定する。
- [ToolTipConnector]コンポーネントの[Target]に[TargetObject[Instance]]を設定します。
- [Tooltip]コンポーネントの[Content Settings]-[Tool Tip Text]に"Support Hand Tracking"を入力する
- [Tooltip]コンポーネントの[Content Settings]-[Content Scale]に1.3を入力する
- [Tooltip]コンポーネントの[Content Settings]-[Font Size]に12を入力する

現在β版というのもあるのかもしれないですが、こういった微調整は実際にも出てくるとは思います。

3D部分のコンテンツを作成

Figmaは2Dデザイン用のツールなので、3Dコンテンツとして仕上げるためには3Dコンテンツ部分の作成が必要です。
コンテンツをそれっぽく仕上げましょう。

コンテンツの位置を調整する
- [1 - Contents[Frame]]の[position]を[(0,0,0)]に設定します。
- [UI Backplate(Clone) [Instance]]の[position]を[(0,0,0.5)]に設定します。
- [TargetObject [Instance]]の[position]を[(0,0,0.4)], [Scaleを(1,1,1)]に設定します。
- [[Examples for Qiita] Exa...]の[position]を[(0,0.07,0.499)]に設定します。
- [Spline ToolTip(Clone) [Instance]]の[position]を[(-0.1,-0.3,0.4)]に設定します。
- [PressableButtonHoloLens2(Clone) [Instance]]の[position]を[(0,-0.1,0.3)]に設定します。
- [PressableButtonHoloLens2(Clone) [Instance]]の[rotation]を[(19,0,0)]に設定します。
オブジェクトの追加
- [UI Backplate(Clone) [Instance]]をコピーし[position]を[(0,-0.12,0.4)],[rotation]を[(90,0,0)]に設定します。
- [TargetObject [Instance]]に3Dオブジェクトを作成します。

ここまで設定できるとオブジェクトはこんな感じになります。

ボタンなどの挙動を組み込む

ボタンを押したとき、スライダーを操作したときの制御を加えていきます。

各種コンポーネントの追加と設定

各部品に正しく動作するようにコンポーネントを加えていきます。
最初にオブジェクトをハンドトラッキングで操作できるように機能を追加します。

[TargetObject [Instance]]に[ObjectManipulator]コンポーネントを追加する
[[ObjectManipulator]]コンポーネントの[OnManipulationStarted]に以下を追加する。
- [Spline ToolTip(Clone) [Instance]]の[GameObject.SetActive]を[false]に設定する
[TargetObject [Instance]]に[NearInteractionGrabble]コンポーネント追加する

次に、ハンドメニューの設定を変更します。ハンドメニューは掌を返すとメニューが表示され、掴んで操作可能な形にしておきます。

[2 - HandMenu [Frame]**]に[HandConstraintPalmUp]コンポーネントを追加する
[HandConstraintPalmUp]コンポーネントの[OnHandActivate]に以下を追加する
- [Root[Frame]]の[GameObject.SetActive]を[true]に設定する
[2 - HandMenu [Frame]]の[SolverHandler]コンポーネントの以下のプロパティを変更する
- [Tracked Target Type]を[Hand Joint]に設定する。
- [Tracked Handness]を[Both]に設定する。
- [Tracked Hand Joint]を[Palm]に設定する。
[Root[Frame]]に[ObjectManipulator]コンポーネントを追加し、以下のプロパティを変更する
- [Two Handed Manipulation]の種類を[Move], [Rotate]のみに設定する。
[Root[Frame]]に[NearInteractionGrabble]コンポーネント追加する
Close用Button([PressableButtonHoloLens2(Clone) [Instance]])の[ButtonConfigHelper]コンポーネントの[Onclick]に以下を設定する
- [[Root [Frame]]の[GameObject.SetActive]を[false]に設定する
[[Root [Frame]]オブジェクトの[Enable]のチェックを外す（不可視にする）

上記の設定を行うと、台座の上の3Dオブジェクトがハンドトラッキング操作で移動やサイズの変更が可能になります。また掌を返すとメニューが表示され×ボタンでクローズすることが可能になります。
最後にスクリプトを実装し、Resetボタンとスライダーでサイズを変更するロジックを組み込みます。

スクリプトの追加とイベントの組み込み

先ほど追加した操作対象となるオブジェクトに対して以下の新しいスクリプトを追加します。作成したスクリプトは[TargetObject [Instance]]に追加します。

ManipulateObject.cs

// Copyright (c) 2021 Takahiro Miyaura
// Released under the MIT license
// http://opensource.org/licenses/mit-license.php

using Microsoft.MixedReality.Toolkit.UI;
using UnityEngine;

public class ManipulateObject : MonoBehaviour
{
    private Vector3 initialPosision;

    // Start is called before the first frame update
    private void Start()
    {
        initialPosision = transform.position;
    }

    //リセットボタンを押した時の処理
    public void ResetPos()
    {
        transform.position = initialPosision;
        transform.localScale = Vector3.one;
        transform.rotation = new Quaternion(0, 0, 0, 0);
    }

    // スライダーを操作時のイベントに紐付ける処理
    public void OnValueChanged(SliderEventData data)
    {
        transform.localScale = Vector3.one * (0.5f + data.NewValue);
    }
}

次にコンテンツとメニューの中にあるResetボタンを選択しそれぞれのButtonConfigHelperのOnClickイベントに以下を設定します。

[TargetObject [Instance]]の[ManipulateObject.ResetPos]を設定する

さらに[2 - HandMenu [Frame]]-[Root [Frame]]-[StepSlider(Clone) [Instance]]の[StepSlider]コンポーネントの[OnValueChanged]イベントに以下を設定します。

[TargetObject [Instance]]の[ManipulateObject.OnValueChanged]を設定する

以上で実装は完了です。実際にHoloLensにデプロイして挙動を確認しましょう。

まとめ

Figma Bridge for Unityの仕組みと実際にラフスケッチからUnityへの取込み、簡単なコンテンツ作成についての手順を紹介しました。
まだ、β版のため機能は一部のみですが、整備が進むとカスタムコンポーネントやパラメータを含めたラフスケッチを含めたUI設計をFigma上で実施し、Unityでモックアップや開発資産の元を作成することが可能になります。また、Custom Mapの現状の仕様からもわかる通りPrefabをロジック部品としてある程度の大きなまとまりで構築すると設計/開発の効率化も実現可能になります。
今後のMixed Realityの設計方法を確立するための1つの手段になるかもしれません。

MRTK Figma BridgeでUIデザインを自動生成してMixed Realityコンテンツを作成する