Learn how to leverage both Figma and Fusion to generate code for your designs, no matter the platform.
While Fusion's Visual Editor is a powerful tool that allows for significant adjustments to your design, Figma is an essential tool for designers.
With the Builder Figma plugin, designers can work within both Figma and Fusion, translating designs between the two programs as needed.
In short, convert between Figma and Fusion in a few different ways:
- To export from Figma to Fusion, use the Builder Figma plugin. Then, use your exported design within the Fusion prompt.
- To export from Fusion to Figma, use the Export to Figma menu option within an existing Project.
To import a number of designs from Figma into one Project, copy the project in Figma using the Builder Figma plugin and paste it into the Projects AI prompt.
- In Figma, select the design you want to use.
- In the Builder Figma plugin, on the Export tab, click Smart Export.
- In a Fusion Project, tell the AI to use that design by giving it instructions and pasting your copied design into the prompt.
- Press Enter when you're ready and the AI generates the project according to your instructions.
In the video below, two Figma designs are exported with the Builder Figma Plugin and pasted with Cmd + v into the prompt with instructions to create a carousel with the two designs.
As your Figma designs evolve, so too can your Project's code.
Assuming you have a design already in Fusion Projects:
- In Figma, select and update the design for a component that exists in your Fusion Project.
- In the Builder Figma plugin, on the Export tab, click the Export Design button.
- When the plugin has finished processing, click Smart Export.
- In your Fusion Project, tell the AI to update the design and paste into the prompt the content that the plugin put in your clipboard when you clicked Smart Export.
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.
The video below shows a section of a teams page, then the same section in Figma that has been edited with a new Contact Me button instead of the social links.
The user exports the design as usual, clicks the Smart Export button, and then, back in their Fusion Project, pastes the copied design. The AI then updates the design.
In addition to importing from Figma, you can also export from your Fusion Project back into Figma. By doing so, update your designs using the right tool for the job.
Within a Fusion Project:
- Switch to the Design tab.
- 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 and select Export to Figma.
To import your design to Figma, you will need the Builder Figma plugin.
After installing the plugin:
- Open the Builder Figma plugin within Figma.
- Click the Import tab.
- Click the field where it allows you to paste from your clipboard.
- Paste your exported design.
You may need to make some adjustments to your design to get it to appear correctly within Figma.
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.
