Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Akinen
June 02, 2023

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

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

Figma(とBezel)でVR, ARのUIデザインを作成する方法についてご紹介します。

Akinen

June 02, 2023
Tweet

More Decks by Akinen

Other Decks in Design

Transcript

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

    View Slide

  2. Akinen
    本業は損保業界のUX・UIデザイナー。

    InsurTech系の新規事業のデザインや

    組織へのデザイン普及に取り組んでいます。
    某・青い損保G

    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の設計思想をリスペクトした

    ブラウザ上で動作する3Dデザインツール
    ・元Facebook(Oculus開発者)のメンバー3人が創業

    ・2022年11月にパブリックベータ版が公開
    アニメーション作成も簡単
    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