Figma integration (BETA)

Please note, that Interactivity, Figma integration, and Holonotes are in beta.

Figma Integration is a powerful feature that enables you to import and update UI components and frames you create with Figma directly into XR. This integration makes it easier to keep your design and development process in sync, allowing you to quickly iterate and create high-quality XR experiences. With the Figma Integration feature, any change you make in Figma will be automatically synced with ShapesXR, ensuring your designs are always up-to-date.

How to Import and update Figma files in ShapesXR

  1. To import Figma files into ShapesXR, go to the Dashboard page and select Files in the left menu.

  2. Click the Import button, and then select Import from Figma.

  3. If you are using Figma Integration for the first time, you will need to get a Figma account token. You can find step-by-step instructions on how to do this in this video:

  1. Once you have your Figma token, you can paste a link to the Figma frame you want to import. There is a link to a video tutorial provided if you need further guidance:

  1. To update your resources, simply click the Sync button.

  2. After updating, you can view and refresh your Figma files in VR.

  3. If you have several files that need to be updated, you can click Sync All Assets to update them all at once.

By following these steps, you can easily import and update your Figma files in ShapesXR, allowing you to create high-quality XR experiences that are always in sync with your design process.

Set the disctance between the UI and the viewer

Designing UI panels for your immersive experience can be confusing. In this infographic, we explain step by step how to do it so that when you are in VR you can REALLY test how it looks within your FOV and further refine scale and positioning in the 3D environment. Long story short: while in Figma design with 1 px = 1 mm, ShapesXR does the rest.

Last updated