Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

Akinen
June 02, 2023

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

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

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

Akinen

June 02, 2023
Tweet

More Decks by Akinen

Other Decks in Design

Transcript

  1. FigmaのFrameをBezelにImportする ①Figmaトークンを設定 Figmaのアカウント設定からToken を発行し、 Bezelの 「Image texture」 にペーストします。 ③自動でリサイズ 「Set

    to native ratio」 を押すだけで Figmaフレームの元のサイズに合わ せて自動的にリサイズしてくれます。 ②Frameを紐付ける Figmaで任意のFrameのリンクをコ ピーして、 BezelのFigma Frameテク スチャに貼り付けます。
  2. エンジニアへの連携 方法① glTF形式で共有 オブジェクト単体、 またはオブジェクト全体を3Dの共通 フォーマット 「glTF」 で書き出すことが可能です。 Unity側 では

    「UniGlTF」 プラグインを使ってImportできます。 方法② BezelファイルにInviteする Bezelは共同編集が可能なツールです。 エンジニアが直接、 各オブジェクトのプロパティを確認す ることも可能です。