次の方法で共有


MRTK Figma Bridge for Unity (ベータ)

MRTK Figma Bridge for Unity を使用すると、Figma Toolkit から Unity にレイアウトを取り込むことができます。 MRTK Figma Toolkit で作成された UI レイアウトをインポートし、適切な位置とサイズで、対応する MRTK プレハブをインスタンス化することができます。 Figma Bridge は、デザイン統合プロセスを支援すると共に、デザイナーと開発者のコラボレーションを促進します。

HoloLens 2 スタイルの UI ライブラリを含んだデザイン ファイルである Figma Toolkit については、[MRTK Figma Toolkit] ページを参照してください。

必須コンポーネント

重要

MRTK-Unity 2.7.0 以降が必要です

Figma Toolkit と Figma Bridge は MRTK 2.7.0 プレハブをベースにしているため、MRTK 2.7.0 以降のバージョンが必要となります。 それよりも低いバージョンの MRTK で使用した場合、一部のコンポーネントが正しく変換されません。

MRTK Figma Bridge の使い方

1. インストールする

Figma Unity Bridge は、Mixed Reality Feature Tool を使用してインストールできます。 Mixed Reality Feature Tool をダウンロードして実行します。

[機能を見つける] ページの [Mixed Reality Toolkit] セクションで [MRTK Figma Bridge] を選択します。 手順に従って MR Feature Tool を完了し、Unity プロジェクトに戻ります。 MRTK Figma Bridge のパッケージが Unity にインポートされます。

Figma ブリッジ - MR フィーチャー ツール

2. Figma Bridge ウィンドウを開く

インポート プロセスが完了すると、[Mixed Reality] > [Toolkit] > [Figma Bridge] メニューに [Figma Bridge] が表示されます。

Figma ブリッジ - メニュー

3. Figma トークンを生成して入力する

Figma の Web サイトで、左上隅にある [Figma] メニューをクリックし、[ヘルプとアカウント] > [アカウント設定] を開きます。 [個人用アクセス トークン] セクションで新しい個人用アクセス トークンを生成します。

Figma Bridge - トークンの取得

Figma Bridge - トークンの入力

4. Figma ドキュメントの ID を入力する

それぞれの Figma ドキュメントは、その URL に一意の ID を含んでいます。 その ID をコピーして Figma Bridge に貼り付けてください。

Figma Bridge - Doc ID

[ファイルの取得] をクリックして Figma ファイルをダウンロードします。 新しい ID を入力すれば、他の Figma ファイルをダウンロードできます。

[ファイルの読み込み] をクリックして Figma ファイルを開きます。

Figma Bridge - ファイル

5. ページをビルドする

Figma Bridge に、Figma ファイル内のページのリストが表示されます。 Unity でビルドするページを確認します。 [ページのビルド] ボタンをクリックします。

フィグマ橋 - ページ

Figma ブリッジ - 結果

6. ドキュメントを最新の情報に更新して変更を取得する

Web 上で (またはデスクトップ エディターを使用して) Figma ファイルに変更を加え、[更新] をクリックして変更を取得できます。 [ページのビルド] をクリックすると、最新の情報でビルドが実行されます。 こうして Figma で簡単にデザインを繰り返し、それを Unity で確認することができます。

関連項目