Starting XR UI Prototyping with Figma and Bezel

In recent years, "Figma" has become the de facto standard in the web and smartphone app design industry, but in the XR (VR, AR, MR) field, designers still had no choice but to use Figma plug-ins or Unity.

This article introduces Bezel, a tool that has the potential to change this situation and become the new de facto standard in 3D design.

Transcript

1. XRUI
   
   Prototyping
   
   w/ Figma and Bezel
   Image Source: https://www.bezel.it/
   

   View Slide

2. Akinen
   I work as a UX/UI designer in the property
   and casualty insurance industry. I am
   working on the design of new InsurTech-
   related businesses and spreading design
   within the organization.
   A blue non-life
   
   insurance group
   

   View Slide

3. UI design in VR/AR
   

   View Slide

4. Designing UI for AR/VR spaces
   
   is fraught with challenges.
   We export the UI elements, place them in
   Unity, build it, install the app on the HMD, and
   just when we thought we could confirm it in
   the VR space, the buttons are smaller than
   expected and we have to start over...
   There are many setbacks, and prototyping is difficult...
   

   View Slide

5. Figma × Bezel
   

   View Slide

6. What is Bezel?
   It's a 3D design tool that works in a browser
   
   and respects Figma's design philosophy.
   i Founded by three former Facebook members (Oculus developersC
   i The public beta version was released in November 2022
   Simply access the URL to share and confirm
   
   the data you have created!
   i Compatible with PCs, smartphone AR, and HMD (VR goggles)
   Creating animations is also easy.
   i You can create interactions in the same way as Figma.
   Visit note.com/012 for more details
   

   View Slide

7. View Slide

8. Importing Figma Frames into Bezel
   ① Set up Figma token
   Generate a Token from Figma's
   account settings and paste it into
   Bezel's "Image texture".
   ③ Auto Resize
   Just press "Set to native ratio"
   and it will automatically resize to
   match the original size of the
   Figma frame.
   ② Attach the Frame
   Copy the link of any Frame in
   Figma and paste it into Bezel's
   Figma Frame texture.
   

   View Slide

9. What does this mean?
   You can immediately reflect the UI updated in Figma in Bezel
   
   and confirm it in the HMD!
   

   View Slide

10. Collaboration with engineers
    Method1: Share in glTF format
    You can export individual objects or entire objects in
    the common 3D format "glTF". On the Unity side,
    you can import it using the "UniGlTF" plugin.
    Method2: Invite to Bezel file
    Bezel is a tool that allows for collaborative editing.
    Engineers can directly check the properties of each
    object.
    

    View Slide

11. Let's start XR UI design
    
    with Figma and Bezel!
    Image Source: https://twitter.com/Bezel3D
    

    View Slide

12. In conclusion
    I will distribute a book on
    
    "XR UI Design" at the Design
    Reading Fair.
    The "XR UI Toolkit" is
    available at figma.com/@012.
    100
    duplicated
    

    View Slide

13. Thank you for your attention.
    

    View Slide