Skip to main content
Figr’s Figma integration runs through one community plugin, Figr AI Figma Sync. Install it once and it works both ways:
  • Figma to Figr: select frames in Figma and reference them live in Figr’s chat.
  • Figr to Figma: push a Figr prototype back into Figma as editable frames.
This replaces the old “paste a frame link” flow. Selection now happens inside Figma, and Figr reads it automatically.

​
First-time setup

You do this once per account.
1

Open Connectors in Figr

In the chat composer, open the Connectors menu and select Figma. This opens the Figr AI Figma Sync page on the Figma Community.
2

Load the plugin

Click Open in and load the plugin into any Figma file, then run it. A panel appears with a Connect to Figr button.
3

Authorize

Click Connect to Figr. A browser tab opens for a quick authorization. When you see “Plugin connected successfully,” return to Figma.
Once connected, the plugin shows a persistent status: Connected, Online, your email, and a Logout option.
Figr AI Figma Sync plugin panel showing a connected status

​
What Figr can access

Figr can read the frames, tokens, and components you select, process that selection as design input, and paste frames you export from Figr back into Figma. Figr cannot edit or delete your existing Figma work, and cannot access files you have not opened the plugin in. You control the connection from the plugin and can log out anytime.

​
Bring designs in

1

Select frames in Figma

Click one or more frames on the canvas. The plugin updates live to show how many are tracked, for example “12 Selected for sync.”
2

Toggle the Figma connector in Figr

In the composer, turn the Figma connector on. It references whatever you currently have selected in Figma, with no copying or links.
3

Write your prompt and submit

Figr imports the layout, captures a screenshot of each frame, and reads the real design values behind them.
The selection is live: change what is selected in Figma and the count updates instantly. Select one frame to refine a single screen, or a dozen to give Figr a full surface to work from.
Figma connector toggled on in the Figr prompt composer
When you pull frames in, Figr reads more than the picture:
  • Frames and layout: structure, hierarchy, and arrangement
  • Tokens and variables: exact colors, spacing, and type values
  • Components and variants: your real building blocks, not lookalikes

​
Push designs back

1

Export from Figr

On a Figr prototype, open the export dropdown and choose Export to Figma. This copies the frame data to your clipboard.
2

Run the plugin in Figma

Open the Figr AI Figma Sync plugin in the file you want the frame in.
3

Paste

The frame materializes on your Figma canvas as editable layers, ready to refine.
The export direction has two limits today. Each export carries only the one frame you triggered it from, so move multiple frames one at a time. Pasted frames arrive as plain groups, so reapply Figma Auto Layout manually. Both are in active development; the handoff is one-shot in each direction, not a live round-trip.

​
Why Figma input beats a screenshot

When Figr analyzes an image, it estimates colors, guesses spacing, and approximates radius. Figma frames give it the real values instead.
Screenshot inputFigma frame input
Colors estimated from pixelsExact values, like #6366F1
Spacing approximated visuallyPrecise spacing, like 24px
Border radius guessedActual radius, like 8px
Typography inferredReal typography settings
Font weights assumedCorrect weights and sizes

​
When to use which

Use Figma framesA screenshot is fine
Your own product designsCompetitor analysis, since you lack their Figma
Design system componentsQuick inspiration
Screens you want to match exactlyExternal reference designs
Building on or maintaining existing workLive product captures

​
Best practices

  • Select the relevant frames, not the whole file. A tighter selection is a clearer signal.
  • Always pair frames with a prompt. The selection tells Figr what to look at; the prompt tells it what to do.
  • Set your design language with high-value frames: a style guide or tokens page, component library frames, pattern docs, and recent approved designs.
Example prompts: 
Match this dashboard style but create a settings page with these sections.

Use the card component from this frame for a feature announcement layout.

Keep this navigation pattern but redesign the content area for data viz.

​
Manage your connection

Your status lives in the plugin window in Figma. Click Logout to revoke access immediately. To switch accounts, log out and reconnect with a different account. To reconnect, run the plugin and click Connect to Figr again anytime.

​
Troubleshooting

IssueFix
Plugin shows “0 Selected for sync”Click directly on a frame in Figma; the count updates live
Figr connector will not reference framesConfirm the plugin shows Connected, then re-toggle the Figma connector
Exported frame has no Auto LayoutExpected; reapply Auto Layout in Figma
Only one frame came through on exportExpected; export each frame separately

Context Pods

Attach synced frames so Figr reuses them across the project.

Export to Figma

More on sending finished designs back to your Figma workflow.

Item Actions

Where the export dropdown lives on a selected prototype.