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

Starting XR UI Prototyping with Figma and Bezel

May 21, 2023

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.


May 21, 2023

More Decks by Akinen

Other Decks in Design


  1. XRUI


    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

    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.

    View Slide

  13. Thank you for your attention.

    View Slide