For a preview of your Builder Figma imports, you need to set up a specific Section model and configure its preview URL. This way you can preview your imported Figma designs with the mapped components in your codebase, so that your designs render accurately as expected.
To implement the instructions in this document, you must have:
- Integrated using Devtools, as covered in the Quickstart.
- Imported your Figma design so that you'll have a Figma imports Section model available.
By default, if you use Devtools to automatically integrate your app with Builder and map a component, Devtools generates this code and adds it to your app for you.
If you integrated manually, be sure to create a special page on your site specifically for editing Figma imports. This is what the Builder preview opens when you create and edit Figma imports. It's important this be on a URL directly on your site, so all previewing and editing are accurate.
This example integrates a new route called /figma-imports.
By setting up a preview URL accessible to all team members, you give designers a way to view and iterate on their designs using the actual components, which facilitates collaboration between design and development.
When exporting from the Figma plugin, if you have the Devtools running locally, it overrides the configured preview URL with your localhost. However, for other team members, such as designers or non-developers, to export from Figma and get a preview using your real components inside the Visual Editor, you must configure a preview URL.
To set up a Preview URL for your Figma imports:
- Go to Models.
- Choose the Figma imports model. Remember that to have a Figma Imports model, you must have already integrated and imported your Figma design, as noted in the Prerequisites for this document.
- Update the preview URL field to the URL of your deployed app, for example,
/figma-imports, for examplehttps://my-site.com/figma-imports. - Click Save.
The video below shows going to Content, opening the Figma imports model, and updating the Preview URL as described in the instructions above.
