---
title: UIデザイン設計から開発をつなぐ「MRTK Figma Bridge for Unity」を使ってみよう
tags:  #xrkaigi #mixed reality #figma #mrtk #unity #xr  
author: [Miyaura](https://convert.docswell.com/user/m-taka596)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/3JKGZ18G7D.jpg?width=480
description: XR Kaigi 2021「HoloLens ミートアップ　コミュニティオーガナイズドセッション」登壇資料。 Figma toolkitとUnityを連携できる「Figma Bridge for Unity」の紹介と実際の利用方法について
published: November 15, 21
canonical: https://convert.docswell.com/s/m-taka596/ZDEDGW-MRTK-Figma-Bridge-for-Unity-20211115
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/3JKGZ18G7D.jpg)

UIデザイン設計から開発をつなぐ
「MRTK Figma Bridge for Unity」を使ってみよう
2021/11
XR Kaigiコミュニティオーガナイズドセッション
「HoloLens ミートアップ」
takabrz1
大阪駆動開発 Takahiro Miyaura


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE3NDQ25E5.jpg)

Microsoft MVP for Windows Development 2018-2022
某会社でSE(アプリケーション領域のアーキテクト的なお仕事なはず）＝ XRは趣味です（貢献領域：Mixed Reality）
宮浦 恭弘
(Miyaura Takahiro)
◼ 大阪駆動開発(とHolomagicians)コミュニティに生息
◼ HoloLens日本販売してからxR系技術に取組む
◼ 普段はよくMixed Reality Toolkitに関する調査している
✓ リリース機能調べたり・・・
✓ 面白い機能使ってみたり・・・
✓ 新しい実験してフィードバックしたり・・・
最近はこちらに
Come Back気味
と思ったらDigital Twins
◼ 新しい技術や、MRに使えそうな技術を調べる
技術Tips : https://qiita.com/miyaura
@takabrz1
※よかったらこれを機にお知り合いになってください


# Page. 3

![Page Image](https://bcdn.docswell.com/page/8EDWP9ZY7G.jpg)

早速ですが、
Mixed RealityのUIデザインを考える時・・・
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 4

![Page Image](https://bcdn.docswell.com/page/V7P9NZD2J8.jpg)

Unity使っていませんか？
モックであったり紙芝居的に
スクショとってパワーポイントで・・・
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 5

![Page Image](https://bcdn.docswell.com/page/2JVMKW1XJQ.jpg)

少し面倒ですよね？
いいものありますよ
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 6

![Page Image](https://bcdn.docswell.com/page/5EGGQD2REL.jpg)

MRTK Figma Toolkit
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4JQXK1PYEP.jpg)

MRTK Figma Toolkit
Microsoft の提供するOSS「Mixed Reality Toolkit 」ベースのUIデザインテンプレート
Figma上でMixed Reality Toolkit UX Building Blocksでコンテンツの設計ができる！
Fimga
Webブラウザ上で複数人でコラボレーションしながら2DのUIデザ
インができるツール
Mixed Reality Toolkit UX Building Blocks
よく使うUI(ボタン、メニュー等)をPrefabとして部品化したもの
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 8

![Page Image](https://bcdn.docswell.com/page/K746PRYZE1.jpg)

いやいや、これも紙芝居ですよね？
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LJ1V9Q6DEG.jpg)

これが
MRTK Figma Bridge for Unityで化けちゃいます！
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GJWLQMW8E2.jpg)

MRTK Figma Bridge for Unity
概要
FigmaのデザインをUnityに取込んでオブジェクト生成
Figma
Unity
Request
MRTK Figma Bridge for Unity
Import
Figma Bridge
Custom Map
Mapping &amp;
Generate
2021/10/21
Modules
Figma Data
Reference
Copyright © 2021 Takahiro Miyaura
V0.1.1のβ版
まだこういう動きができるよレベル


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EZMWQ59J3.jpg)

簡単なデザインから動くものを作る
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 12

![Page Image](https://bcdn.docswell.com/page/Y76NG69D7V.jpg)

まとめ
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 13

![Page Image](https://bcdn.docswell.com/page/G755V6N874.jpg)

まとめ
◼ Figma Bridge for Unityでできること
✓ 2Dデザインツール「Figma」で使えるMRTK Figma Toolkitでラフデザイン
✓ Unity上のMRTK Building BlocksのUX部品でレイアウトを再構成
✓ 定義をカスタマイズすることで標準部品以外も対応可能
◼ 注意が必要
✓ 現在はβ版V0.1.1で試せる程度
✓ ボタン等一部のコンポーネント出力にしか対応していない
✓ 部品のプロパティも全て反映されない
完成するとデザイン設計から
実装までが捗りそうな便利なツール
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 14

![Page Image](https://bcdn.docswell.com/page/9J2N3M5VER.jpg)

まとめ
詳しくは・・・
Qiita記事で纏めています。
◼
「MRTK Figma BridgeでUIデザインを自動生成してMixed Realityコンテンツを作成する」
✓ https://qiita.com/miyaura/items/2f8330a1828bb562e208
もう少し詳しく書いています。
2021/10/21
Copyright © 2021 Takahiro Miyaura


# Page. 15

![Page Image](https://bcdn.docswell.com/page/DEYP1XKQEM.jpg)

大阪駆動開発
関西を中心に、IT系のおもしろそうなことを
楽しんでやるコミュニティ


