Skip to main content
Export to Figma pushes any Figr prototype back into Figma as editable layers, with its real variables attached. It runs through the same Figr AI - Figma Sync plugin you use for Figma input, so the design lands on the Figma canvas ready to refine, hand off, or fold into your library. It closes the loop: you design in Figr with your real system, then send the finished work back so designers can polish it where they already work. Generate fast in Figr, refine in Figma, hand off as usual.

​
Before you start

You need the Figr AI - Figma Sync plugin installed and connected. If you set it up for Figma input, you are ready. Connect once, export anytime.

​
Export a prototype

1

Select a prototype node

Click the node on the canvas. A floating toolbar appears above it with Select & edit, Full screen, Tell Figr about this, Export, and Publish.
2

Open Export, then Export to Figma

A setup modal opens with step-by-step instructions and an Open Plugin in Figma link.
3

Run the plugin in your target Figma file

Open it from the modal’s link, in the file where you want the design to land.
4

Wait for the transfer

A progress bar shows “Adding variables to your design,” then “Exporting to Figma.”
5

Confirm it landed

A green “Design sent to Figma” toast appears. Your frame is on the Figma canvas with its variables attached.

​
What comes across

  • The frame: your prototype’s layout, rendered as Figma layers.
  • Variables: design values transfer as Figma variables, not flattened styles.

​
Current limitations

  • One frame per export. Each export carries the single frame you triggered it from, not every screen or state. Export additional frames one at a time.
  • No Auto Layout yet. Frames arrive as plain groups; re-apply Figma Auto Layout manually.
  • One-directional. The handoff happens per action. There is no live, continuous sync between a Figr node and its Figma copy. The single-frame and Auto Layout limits are both in active development.

​
Other ways to hand off

Export to Figma is one option in the Export dropdown. Depending on where the work goes next:
OptionBest for
Export to FigmaHanding off to a designer to refine in Figma
Copy as imageDropping a quick visual into a doc, deck, or message
Use MCP serverPulling the design into an IDE like VS Code or Cursor
Download codeGetting the full front-end package as a ZIP

​
Best practices

  • Export the frame you want, not the whole flow. Trigger export from the specific node, and repeat per frame for multi-screen work.
  • Plan to re-apply Auto Layout once frames land, so they behave responsively in Figma.
  • Confirm the plugin is connected before exporting, to avoid a failed transfer.
  • Use Copy as image when you only need a static visual. It is instant and needs no plugin.

​
Troubleshooting

IssueFix
Export modal can’t find the pluginRun Figr AI - Figma Sync in your target Figma file, then retry
Only one frame came acrossExpected. Export each frame separately
Frame has no Auto LayoutExpected. Re-apply it manually in Figma
Export stalls on the progress barConfirm the plugin shows Connected, close the modal, and re-trigger

Figma input

Bring Figma frames and your design system into Figr.

Design system intelligence

How Figr learns and applies your tokens and components.

Figr MCP

Pull a design into an IDE instead of Figma.

Download code

Get the front-end package for implementation.