Learn to leverage both Figma and Builder to generate code for your designs, no matter the platform.
While Builder's Visual Editor is a powerful tool that allows for significant adjustments to your design, Figma is an essential tool for designers.
By pasting a Figma link directly into a Builder Project, or by using the Builder Figma plugin, designers can work within both Figma and Builder, translating designs between the two programs as needed.
In short, convert between Figma and Builder in a few different ways:
- To import a design from Figma to Builder, copy a link to the Figma frame and paste it into the Builder prompt.
- To export from Builder to Figma, use the Export to Figma menu option within an existing Project.
To import a Figma design into a Builder Project, copy a link to the frame in Figma and paste it into the Projects AI prompt.
- Open Figma and select the frame you want to import.
- Right-click the frame and select Copy link to selection.
- Paste the Figma link into the prompt box.
- Press Enter when you're ready and the AI generates the project according to your instructions.
Tip: Alternatively, export designs to Builder using the Builder Figma plugin.
As your Figma designs evolve, so too can your Project's code.
Use the same process to update an existing design instead of creating a new one:
- In Figma, select and update the design for a component that already exists in your Builder Project.
- Copy a link to that frame.
- Paste it into the prompt and tell the AI to update the design.
The AI updates the component in place rather than generating something new.
This feature is especially useful when you’re working with components that are already part of your codebase, meaning you can update the design in place.
In addition to importing from Figma, you can also export from your Builder Code Project back into Figma. By doing so, update your designs using the right tool for the job.
Within a Builder Code Project:
- Select the layer you wish to export. You can interact directly with the page or use the Layers tab.
- On the top-right of the screen, click the three dot menu.
- Select Export to Figma.
To import your design to Figma, you need the Builder Figma plugin.
After installing the plugin:
- Open the Builder Figma plugin within Figma.
- Click the Import tab.
- Click the text field with the note that says Paste snapshot here.
- Paste your exported design.
You may need to make some adjustments to your design to get it to appear correctly within Figma. The video below shows pasting a design into the Builder Figma plugin:
Update your design within Figma as you would any other design.
Keep in mind that you do not have to be precise with the data for your design. For example, in the image below the design has been changed, but the actual text within the design is just duplicated.
