FigmaとBeziではじめるXRUIプロトタイピング

本スライドはDIST.39 の登壇資料です。
https://dist.connpass.com/event/281775/

FigmaとBeziでVR, ARのUIデザインを作成する方法についてご紹介します。
※Bezelは「Bezi」に改名されました

Transcript

1. FigmaとBezelではじめる XRUI プロトタイピング Image Source: https://www.bezel.it/
2. Akinen 本業は損保業界のUX・UIデザイナー。 InsurTech系の新規事業のデザインや 組織へのデザイン普及に取り組んでいます。 某･青い損保Ｇ
3. VR/ARにおけるUIデザイン
4. AR/VR空間のUIデザインは前途多難 UI素材を書き出して、 Unityに配置して、 Buildして、 HMDにアプリをインストールして、 ようやくVR空間上で確認できたと思ったら、 ボタンが思ったより小さくて作り直し・・・(´・ω・`) 手戻りが多く、 プロトタイピングがしづらい・・・
5. Figma × Bezel
6. Bezelとは？ Figmaの設計思想をリスペクトした ブラウザ上で動作する３Dデザインツール ・元Facebook(Oculus開発者)のメンバー３人が創業 ・2022年１１月にパブリックベータ版が公開 アニメーション作成も簡単 Figmaのような要領でインタラクションを作成できる URLにアクセスするだけで、 作成したデータをシェア＆確認できる ！ PC、 スマートフォンAR、 HMD（VRゴーグル）に対応 　　　　　　　　　　　　　　　　　　　　　　　で 詳しくご紹介しています note.com/012
8. FigmaのFrameをBezelにImportする ①Figmaトークンを設定 Figmaのアカウント設定からToken を発行し、 Bezelの 「Image texture」 にペーストします。 ③自動でリサイズ 「Set to native ratio」 を押すだけで Figmaフレームの元のサイズに合わ せて自動的にリサイズしてくれます。 ②Frameを紐付ける Figmaで任意のFrameのリンクをコ ピーして、 BezelのFigma Frameテク スチャに貼り付けます。
9. つまり、 どういうことだってばよ Figmaで更新したUIを、 すぐBezelに反映してHMDで確認できる！
10. エンジニアへの連携 方法① glTF形式で共有 オブジェクト単体、 またはオブジェクト全体を3Dの共通 フォーマット 「glTF」 で書き出すことが可能です。 Unity側 では 「UniGlTF」 プラグインを使ってImportできます。 方法② BezelファイルにInviteする Bezelは共同編集が可能なツールです。 エンジニアが直接、 各オブジェクトのプロパティを確認す ることも可能です。
11. FigmaとBezelで XRUIデザインをはじめましょう　！ Image Source: https://twitter.com/Bezel3D
12. おわりに （告知） 9月3日(日)　デザイン読書日和 にて 「XRUIデザイン」 の本を頒布します。 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　にて 「XRUI Toolkit」 を公開中です。 figma.com/@012 100 duplicated
13. ご清聴ありがとうございました