Build Figma variables from Flash with the Figma agent

Connect Flash to Figma's agent, then have it build your collections, modes, variables and text styles from your system, and send the file's edits back for review.

Before you start

This walkthrough takes about ten minutes the first time and one prompt every time after that. You need three things:

• A Flash design system you own or administer. The consent screen only lists systems you are allowed to share.
• A Figma plan with the agent turned on and a Full seat. The agent is in beta and still rolling out; Collab and Dev seats can use it in drafts only.
• A Figma design file to build into. An empty one is fine, and so is one the Flash plugin already built: the agent updates what is there instead of duplicating it.

If you want the short version of why this exists, read Flash now works inside the Figma agent first. This post is the how.

Add Flash as a connector

Figma keeps custom connectors per person, so each teammate does this once for themselves. An Organization admin can publish one connector for everybody instead.

1. In your design file, open the agent. In the message box, go to [[Add context > Connectors > Manage]].
2. Switch to Created by you and click Create.
3. Fill in the first step:

1. Click Next, paste https://flashdsm.com/api/v1/mcp as the MCP server URL, and leave Advanced settings empty. The empty client ID and headers mean OAuth, which is what you want.
2. Click Create, then Connect on the new Flash row.

A Flash page opens in your browser. If you are signed out, sign in and you land back on the same page.

Choose what the agent may do

The consent screen asks two questions. First, which design system: one grant is one system, and if you have many, they are listed with the one you edited last on top, each with when it was edited, and a search box once the list is long. Second, whether the agent may propose token changes. Leave it ticked if you want to send Figma edits back later; untick it for read only, and the proposing tools are hidden from the agent entirely.

Click Allow. Figma shows "You're all set", and back in the file the connector lists Flash's tools in two groups, read tools and write tools. Figma switches the write tools off by default and asks before each tool it runs. You can turn a tool to Always run later, once you trust the routine.

[!TIP] The Flash plugin's Agents tab and the Figma agent card under [[Sync > Sources]] have the same URL with a copy button, so nobody on your team has to find this post to set it up.

Look before you build

Start with a prompt that cannot change anything:

Use the Flash connector: call get_figma_variable_plan and list the
collections, their modes and variable counts. Read only.

The agent asks to run get_figma_variable_plan; click Run. On the system we used for this post the answer was eight collections: Colors with Dark and Light modes, then Spacing, Radius, Typography, Border, Effects, Shadows and Motion, 196 variables in all, and "No file changes made". If you get a number that surprises you, fix the system in Flash first. The agent builds exactly what Flash says.

Build the variables

Now the real prompt:

Read flash://figma/playbook.md, then build this system's variables
and text styles in this file.

The agent works in a fixed order, and it tells you so before it starts. It reads the summary, then asks to read each collection a page at a time; approve those with Run all. It creates each collection and its modes, sets every value, adds the WEB code syntax so developers see var(--primary) in Dev Mode, and links the semantic colours to the ladder steps they point at once everything exists. Then it creates the text styles and binds their size, weight, line height and family to the matching variables. Last, it tells Flash which version it wrote.

Our run, in a file the plugin had built a few days earlier:

It took under two minutes. Two rules explain the numbers. The agent finds an existing variable by its name, and by any older name Flash remembers for it, and renames it in place rather than adding a second one. And it never deletes a variable Flash does not mention; anything extra in the file is left alone and reported.

Send the file's edits back

A designer who changes a value in Figma can hand it back to Flash from the same chat:

Read this file's local variables and styles and send them to Flash
with push_figma_variables. Do not change the file.

The agent reads every collection except Responsive, which Flash wrote itself, plus the file's paint and text styles, and sends them in one call. A big file goes over in parts instead, because a real library does not fit in a single message: the agent numbers the parts, Flash keeps them until the last one arrives, and only then compares anything. Either way the agent gets back a short summary, how many changes Flash found, the first few of them, and a link to review the rest.

Parts are slow, because the agent writes every value out as text. Our test file held 439 variables and 135 paint styles and was split into ten parts; each took a few minutes to write, and the slowest took more than seven. Most edits touch one collection, so say which:

I changed the Spacing collection. Send only that collection to Flash
with push_figma_variables. Do not change the file.

That is one small call. Flash compares only the kinds of tokens a push carries, and a push never deletes anything, so the collections you left out stay exactly as they are. To send back an entire library, the plugin's Figma → Flash tab is the faster tool.

Flash compares what the agent sent with the system and, if anything differs, opens a proposal under [[Sync > Review]] labelled Figma agent. Nothing changes in your system until someone with edit rights applies it, the same rule as a push from the plugin.

When something goes wrong

• "Failed to connect" in Figma. Check the URL ends in /api/v1/mcp with nothing after it, and that you left Advanced settings empty. Flash's staff can see every sign-in step and why it failed, so if it persists, tell us the time you tried.
• The system you want is not on the consent screen. You need to own it or be an admin on it; editors and viewers cannot hand a system to an agent.
• The agent stopped asking and is waiting. Scroll the chat; a Run button is probably sitting below the fold.
• A long push stops halfway. Tell the agent to continue the same batch. Flash keeps the parts it already has for an hour and proposes nothing until the last one arrives.

To cut the agent off, revoke its grant under [[Dashboard > Integrations]]. It loses access on its very next call. The MCP guide has the same steps in short, with every value ready to copy.