More Related Content
More from Takahiro Miyaura (20)
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は趣味です
- 4. Figma
2021/4/21 Copyright © 2021 Takahiro Miyaura
WebだけでUIデザインを色々検討
レイアウト
アクション(クリックで画面切替え等)
複数人で共有も可能
これを使って
xRコンテンツを2Dながら作れるようになりました!
ブラウザ上でWebデザインなどが可能なデザインツール
- 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で作る必要あり
あくまで設計だけするイメージです
- 9. Figma Toolkitの使い方
2021/4/21 Copyright © 2021 Takahiro Miyaura
簡単に使えます
1.Figmaアカウントを作る
2.ローカルフォントを使えるようにする
3.Figma Toolkitを自分の環境にコピーする
4.UIデザインをする アカウント作ってもらうと
あとでサンドボックス用の
URL共有するので一緒に試
せますよ
- 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
- 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
Editor's Notes
- https://www.figma.com/file/SVWQb6SW0xPVy1PhBr6aWX/XR-Meeting?node-id=1305%3A2201