xRミーティング 2012/04/21の登壇資料。 https://osaka-driven-dev.connpass.com/event/209237/ FigmaというWebブラウザで利用できるUIデザインツールでMixed Reality ToolkitのUX部品を使ったxRラフデザインができるようになった。この使い方を簡単に紹介。

1. takabrz1 大阪駆動開発 Takahiro Miyaura
FigmaでUIデザイン
xRコンテンツの検討をFigma Toolkitでやってみよう

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

3. Figmaとは
2021/4/21 Copyright © 2021 Takahiro Miyaura

4. Figma
2021/4/21 Copyright © 2021 Takahiro Miyaura
 WebだけでUIデザインを色々検討
 レイアウト
 アクション（クリックで画面切替え等）
 複数人で共有も可能
これを使って
xRコンテンツを２Dながら作れるようになりました！
ブラウザ上でWebデザインなどが可能なデザインツール

5. それがFigma Toolkit
2021/4/21 Copyright © 2021 Takahiro Miyaura

6. Figma Toolkit
2021/4/21 Copyright © 2021 Takahiro Miyaura
Mixed Reality ToolkitのUX部品を使ってFigmaでデザイン
 Figma Toolkit の公式ドキュメント
 https://docs.microsoft.com/en-us/windows/mixed-reality/design/figma-toolkit
 MRTKのUX部品が用意
 必要な部品を貼り付けてデザイン可能

7. Figma
2021/4/21 Copyright © 2021 Takahiro Miyaura
 Unity上でデザインしなくてもいい
 ブラウザでサクッとデザイン検討
ラフスケッチから進めるならFigmaからの方が楽かも
逆にもうUIある程度イメージできている / メンバーで検討いらない場合はUnityでもいいと思います。
何がうれしくなるのか
 コラボしながら設計できる
 Web会議＋ブラウザでディスカッションし
ながらも可能
 注意点：あとでUnityで作る必要あり
 あくまで設計だけするイメージです

8. 使ってみましょう
2021/4/21 Copyright © 2021 Takahiro Miyaura

9. Figma Toolkitの使い方
2021/4/21 Copyright © 2021 Takahiro Miyaura
簡単に使えます
1.Figmaアカウントを作る
2.ローカルフォントを使えるようにする
3.Figma Toolkitを自分の環境にコピーする
4.UIデザインをする  アカウント作ってもらうと
あとでサンドボックス用の
URL共有するので一緒に試
せますよ

10. Figma Toolkitの使い方
2021/4/21 Copyright © 2021 Takahiro Miyaura
簡単に使えます
1.Figmaアカウントを作る
2.ローカルフォントを使えるようにする
3.Figma Toolkitを自分の環境にコピーする
4.UIデザインをする
https://figma.com にアクセスしてアカウントを作成

11. Figma Toolkitの使い方
2021/4/21 Copyright © 2021 Takahiro Miyaura
簡単に使えます
1.Figmaアカウントを作る
2.ローカルフォントを使えるようにする
3.Figma Toolkitを自分の環境にコピーする
4.UIデザインをする
アカウント設定の中に[Fonts]項目から
ダウンロード & インストール

12. Figma Toolkitの使い方
2021/4/21 Copyright © 2021 Takahiro Miyaura
簡単に使えます
1.Figmaアカウントを作る
2.ローカルフォントを使えるようにする
3.Figma Toolkitを自分の環境にコピーする
4.UIデザインをする
Figma Toolkitのリンクを開き[Duplicate to your drafts]を押す
https://www.figma.com/file/ltLag9SxjUIyLQFsp7NNE7/Mixed-Reality-Toolkit-for-Figma

13. Figma Toolkitの使い方
2021/4/21 Copyright © 2021 Takahiro Miyaura
簡単に使えます
1.Figmaアカウントを作る
2.ローカルフォントを使えるようにする
3.Figma Toolkitを自分の環境にコピーする
4.UIデザインをする
ぺたぺた張りながらデザインを考える

14. まとめ
2021/4/21 Copyright © 2021 Takahiro Miyaura

15. まとめ
2021/4/21 Copyright © 2021 Takahiro Miyaura
Figma ToolkitでxRコンテンツデザイン
 UIデザインをUnity使わず時に実施できる
 ブラウザで利用可能
 複数人で同時編集可能
 Mixed Reality ToolkitのUX部品でデザイン可能
 あくまで2DでのUIデザイン
 最終的にはUnityで作る必要がある
UIがまだふわふわしている状況で頭の整理をしながらデザイン検討する時に便利
複数人で検討したい時は特に
Qiita記事
「FigmaでMixed Reality ToolkitのUIコンテンツをラフスケッチ」
https://qiita.com/miyaura/items/d00e83d84466c8d60914

16. 大阪駆動開発
関西を中心に、IT系のおもしろそうなことを楽しんでやるコミュニティ
2021/4/21 Copyright © 2021 Takahiro Miyaura