# 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.

- Source: https://flashdsm.com/blog/figma-agent-build-variables
- Published: 2026-09-24
- Author: Flash DSM Team
- Track: Learn Flash
- Reading time: 5 min read

---

## 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](/blog/figma-plugin-live-sync) 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](/blog/flash-in-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:

| Field | Value |
| --- | --- |
| Icon | the 128 px Flash icon from the [MCP guide](/mcp) |
| Name | Flash |
| Tagline | Your Flash design system, live in this file |
| Description | Reads your Flash design system and builds this file's variables from it. Changes go back to Flash for review. |

4. 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.
5. 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:

```text
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:

```text
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:

| Result | Count |
| --- | --- |
| Variables created | 167 |
| Text styles created | 10 |
| Variables updated in place | 29, across 8 collections |
| Skipped | 0 |
| Deleted | 0 |

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:

```text
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.

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.

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