UIデザイン設計から開発をつなぐ「MRTK Figma Bridge for Unity」を使ってみよう

682 Views

November 15, 21

スライド概要

XR Kaigi 2021「HoloLens ミートアップ コミュニティオーガナイズドセッション」登壇資料。
Figma toolkitとUnityを連携できる「Figma Bridge for Unity」の紹介と実際の利用方法について

profile-image

ICT業界でソフトウェアエンジニア/アプリケーションアーキテクトを担当。 社内ではXR関連技術に関する啓もう活動や技術支援に従事。 業務の傍ら、XR(特にMixed Reality領域)についての開発技術の調査、開発などを行っています。 また、「大阪駆動開発」コミュニティ所属しており、日々の調査で得た知見はコミュニティを通して情報発信を行っています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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 ※よかったらこれを機にお知り合いになってください

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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