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

107 Views

April 22, 21

スライド概要

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

profile-image

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

シェア

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

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

13.

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

14.

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

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

16.

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