Skip to main contentWhere does your team stand on AI adoption?
CONTACT SALESSTART BUILDING

Builder Figma Plugin

The Builder Figma plugin aids you in importing your Figma design directly into your Builder Space.

Transform your Figma designs into customizable content in your Builder Content Space, or generate code from your design through a Builder Code Space using Projects or the command line.

Note: While the Builder Figma Plugin is still accessible, the preferred method for importing into Builder is by using a Figma URL. For more details, visit Import from Figma Overview.

Diagram of Figma plugin workflow. The title is "Import Page and section Designs into Builder from Figma". There's a picture of a Figma design with the Figma logo, a plus sign, then a screenshot of the Builder Figma Plugin UI, an equal sign, and then a picture of a Page and Section in Builder with the accompanying words "Your Figma Design plus Builder Figma Plugin" equals "Responsive Builder Content:.

A Figma seat is required to use the Builder Figma plugin, as is edit access to the particular file you wish to use.

To install the plugin:

  1. Within Figma, select Plugins from your toolbar and then Manage plugins.
  2. Search for Builder.io within the Plugins & widgets tab.
  3. Choose the Builder.io plugin and then click the Save button.

Alternatively, visit the Figma Community's Builder Figma plugin page and install from there.

Builder Figma Plugin installation page in Figma, with the text "Click Save" and an arrow pointing towards the Save button.

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.

  1. Open Figma and select the frame you want to import.
  2. Right-click the frame and select Copy link to selection.
  3. Paste the Figma link into the prompt box.
  4. 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.

To share your export with others, click the copy icon next to the Open Builder button. This URL can be shared with other members of your team or added to a Builder Code prompt.

Figma users on paid plans can annotate parts of their Figma designs. These annotations are included as part of the export to Builder, and can be used to provide instructions to Builder's AI when generating code.

For more details on annotations in Figma, visit Figma's documentation, Add measurements and annotate designs.

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:

  1. Select the layer you wish to export. You can interact directly with the page or use the Layers tab.
  2. On the top-right of the screen, click the three dot menu.
  3. Select Export to Figma.

What's next

Was this article helpful?