Figma Toolkitを試してみる

今回はMRTKを用いたアプリケーションのイメージボード作成や、サンプル画像作成に使える「Figma Toolkit」を試してみます。

docs.microsoft.com

1. アカウント作成

まず、Figma自体のアカウントを作成します。

Figmaはブラウザ上で使用できるUIデザインツールです。

下記URLの「Try Figma for Free」からアカウント作成できます。
www.figma.com

Google アカウントでサインアップすることもできます。

アカウントを作成するとチーム名を決定できます。 これは後からでも登録できるので「Do this later」を選択しました。

2. Figma Toolkitの概要

次に下記URLの「View Figma Toolkit」をクリックします。 docs.microsoft.com

クリックすると「Mixed Reality Toolkit for Figma」が表示されます。

このプロジェクトは読み取り専用のため、自分で使うために複製保存します。
上部のメニューから「Duplicate to your drafts」を選択します。
複製ができると、「File Duplicated to your drafts」とブラウザ下部に表示されるため、その右に表示される「Open」をクリックします。
すると、編集できる複製されたプロジェクトを開くことができます。

左メニューの「UI Gallery」を選択すると、UnityからMRTKを使用する際に用いる、「Tool Box」にあるようなMRTKのボタンなど、使用できるツールが確認できます。

左メニューの「Example」を選択すると、Figmaを用いたイメージのサンプルを確認できます。

左メニューの「Components」を選択すると、手を含めたイメージ作成につかえる各部品が確認できます。

3. Figma Toolkitの使い方

まず、イメージを作成するためのページを作成します。
左メニューのプラスボタンを押します。

作成したページに、Hololens2の表示領域を土台として作成します。
左メニューの「Viewport」からHololens2のViewportを選択し、コピー（Ctrl + C）し、先ほど作成したページに貼り付けます。

左メニューの「Component」から使用したい部品を選択し、コピー+ペーストで貼り付けていきます。

各部品の構成はUnityのHierarchyとほぼ同じになっています。

ボタンのテキストを編集するには、編集したいテキスト部分をダブルクリックします。
Fontがないとインストールを要求されるので、「Install Font Helper」からダウンロードします。

その後一度プロジェクトを開き直すと、テキストが編集できるようになっています。
テキストだけでなく、ボタンのアイコンなども変更できます。

作ったイメージは右下のExportからPNG, JPG, SVG, PDFに出力できます。
ページ全体を出力するため、Exportする前に全選択（Ctrl + A）したほうが良いでしょう。

「Export 〇〇」と書かれたボタンを押すことで作成したイメージの画像データをDLできます。

取り急ぎFigma Toolkitの使い方はここまでです。
自分で3Dモデルの画像なども入れられると思うので、Figmaについて使用する機会があればまた記事にしようと思います。