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

Transcript

1. FigmaとBezelではじめる
   XRUI
   プロトタイピング
   Image Source: https://www.bezel.it/
   

   View Slide

2. Akinen
   本業は損保業界のUX・UIデザイナー。
   
   InsurTech系の新規事業のデザインや
   
   組織へのデザイン普及に取り組んでいます。
   某･青い損保Ｇ
   

   View Slide

3. VR/ARにおけるUIデザイン
   

   View Slide

4. AR/VR空間のUIデザインは前途多難
   UI素材を書き出して、
   Unityに配置して、
   
   Buildして、
   HMDにアプリをインストールして、
   
   ようやくVR空間上で確認できたと思ったら、
   
   ボタンが思ったより小さくて作り直し・・・(´・ω・`)
   手戻りが多く、
   プロトタイピングがしづらい・・・
   

   View Slide

5. Figma × Bezel
   

   View Slide

6. Bezelとは？
   Figmaの設計思想をリスペクトした
   
   ブラウザ上で動作する３Dデザインツール
   ・元Facebook(Oculus開発者)のメンバー３人が創業
   
   ・2022年１１月にパブリックベータ版が公開
   アニメーション作成も簡単
   Figmaのような要領でインタラクションを作成できる
   URLにアクセスするだけで、
   
   作成したデータをシェア＆確認できる ！
   PC、
   スマートフォンAR、
   HMD（VRゴーグル）に対応
   　　　　　　　　　　　　　　　　　　　　　　　で
   
   詳しくご紹介しています
   note.com/012
   

   View Slide

7. View Slide

8. FigmaのFrameをBezelにImportする
   ①Figmaトークンを設定
   Figmaのアカウント設定からToken
   を発行し、
   Bezelの
   「Image texture」
   にペーストします。
   ③自動でリサイズ
   「Set to native ratio」
   を押すだけで
   Figmaフレームの元のサイズに合わ
   せて自動的にリサイズしてくれます。
   ②Frameを紐付ける
   Figmaで任意のFrameのリンクをコ
   ピーして、
   BezelのFigma Frameテク
   スチャに貼り付けます。
   

   View Slide

9. つまり、
   どういうことだってばよ
   Figmaで更新したUIを、
   すぐBezelに反映してHMDで確認できる！
   

   View Slide

10. エンジニアへの連携
    方法① glTF形式で共有
    オブジェクト単体、
    またはオブジェクト全体を3Dの共通
    フォーマット
    「glTF」
    で書き出すことが可能です。
    Unity側
    では
    「UniGlTF」
    プラグインを使ってImportできます。
    方法② BezelファイルにInviteする
    Bezelは共同編集が可能なツールです。
    
    エンジニアが直接、
    各オブジェクトのプロパティを確認す
    ることも可能です。
    

    View Slide

11. FigmaとBezelで
    
    XRUIデザインをはじめましょう　！
    Image Source: https://twitter.com/Bezel3D
    

    View Slide

12. おわりに （告知）
    9月3日(日)　デザイン読書日和 にて
    
    「XRUIデザイン」
    の本を頒布します。
    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　にて
    
    「XRUI Toolkit」
    を公開中です。
    figma.com/@012
    100
    duplicated
    

    View Slide

13. ご清聴ありがとうございました
    

    View Slide