FigmaでUIデザイン - xRコンテンツの検討をFigma Toolkitでやってみよう

420 Views

April 22, 21

#xrmtg #figma #mrtk

スライド概要

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

Miyaura

@m-taka596

スライド一覧

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

またはPlayer版

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

ダウンロード

ダウンロード(pdf - 1.31MB)

関連スライド

OpenVRやOpenXRの基本的なことを調べてみた

xrmtg openxr openvr hololens

Miyaura 23K

冬休みの宿題 - Lenovo Think Reality A3で検証(MRTK3含)

xrmtg mrtk3 mixed reality snapdragon spaces thinki reality a3

Miyaura 12.1K

MRTK3をLenovoのThink Reality A3上で動かす - Snapdragon Spaces SDKの紹介

hololens ホロマジ snapdragonspaces mrtk3 xr unity

Miyaura 10.2K

今更ですがちょっとMetaQuest3でMRTK3触ってみました

mixed reality xrmtg mrtk3 unity

Miyaura 9.5K

Mixed Reality Toolkit 3で始めるクロスプラットフォーム開発

xr mrtk3 metaquest3 snapdragonspaces xrkaigi

Miyaura 8.1K

Snapdragon Spaces v0.12.0 for Unityの調査(あれも試してみてる)

xrmtg mrtk3 mixed reality snapdragon spaces think reality a3

Miyaura 7.7K

各ページのテキスト

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

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

https://qiita.com/miyaura

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

https://docs.microsoft.com/en-us/windows/mixed-reality/design/figma-

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

10.

https://figma.com/

11.

12.

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

https://www.figma.com/file/ltLag9SxjUIyLQFsp7NNE7/Mixed-Reality-Toolkit-for-Figma

13.

14.

15.

まとめ 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 2021/4/21 Copyright © 2021 Takahiro Miyaura

https://qiita.com/miyaura/items/d00e83d84466c8d60914

16.