Sync Figma from Claude Code or Cursor with Figma's MCP server and Flash

Connect Figma's MCP server and Flash's to the same coding agent, add one skill, and build or update a Figma file's variables from your editor.

Two servers, one agent

Figma runs its own MCP server. It lets an approved coding agent, such as Claude Code, Cursor or Codex, read a Figma file and write to it with a tool called use_figma. Flash runs an MCP server too, and it knows what your design system's variables should be. Connect both to the same agent and it can do the job the Flash plugin does, from a chat in your editor: read the plan from Flash, write it into a Figma file, and send a designer's edits back to Flash for review.

What joins the two is a skill: one Markdown file, generated for your system, that tells the agent the order of calls and the naming rules. It uses the same planner the plugin uses, so a file built this way matches a file the plugin built, variable for variable.

This setup is for people who already live in an editor. A designer in Figma should use the Figma agent instead. That works from Figma's own chat, with nothing to install.

Connect Figma's MCP server

In Claude Code, Figma's own plugin is the quickest way in:

claude plugin install figma@claude-plugins-official

Or add the server by hand:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Start a new Claude Code session, type /mcp, pick figma and choose Authenticate. A browser window opens; click Allow Access. In Cursor, type /add-plugin figma in the agent chat, or install Figma from Cursor's MCP settings and click Connect.

Only clients on Figma's catalog can connect, which is why this works in Claude Code, Cursor and Codex and not in a home-made script. The agent writes to a file as you, so you need edit access to the file you point it at.

Connect Flash

On [[Sync > Agents]], the MCP access card has a Claude Code command and a Cursor / VS Code config, both filled in with your own URL. For this job, use an access token rather than a share link: a share link can read the plan but cannot send anything back. Keep Cursor and Claude Code on your tokens walks through both, including where the token comes from.

The quickest path is the Setup prompt on the same card. Paste it into your agent's chat and it adds the Flash server, checks it can read your tokens, and, if Figma's server is already connected, saves the Figma sync skill for you. If it did all three, skip the next section.

Add the Figma sync skill

On [[Sync > Agents]], find the Figma sync skill card and download its SKILL.md. Save it in your project as:

.claude/skills/<your-system>-figma-sync/SKILL.md

Claude Code picks it up from there on its own. In Cursor or Codex, keep the same file and tell the agent to read it before it starts.

The skill is written for your system: it names your collections and your modes. It tells the agent to load Figma's figma-use skill before any write, to find an existing variable by its path and by any older name before creating one, and never to delete a variable Flash does not mention. When your system changes shape, download it again.

Build the variables into a file

Open the Figma file in your browser, copy its URL, and ask:

Use the figma-sync skill to build my Flash system's variables into this
Figma file: <file URL>. Tell me what you created and what you updated.

The agent asks Flash for a summary of the file it should build, then for each collection, page by page. It writes each one with use_figma: collections, the Dark and Light modes, variables, aliases between them, and each variable's CSS name. When it is done, it tells Flash which version it wrote, so [[Sync > Sources]] can show the file as current and warn you when it falls behind.

Run the same prompt after the system changes and the file updates in place. Anything extra that a designer added to the file stays where it is.

Send edits back

When a designer changes values in the file, say which collection:

I changed the Spacing collection in <file URL>. Read that collection,
all of it, and send it to Flash with push_figma_variables. Do not change
the file.

Flash compares what arrived with the system and opens a proposal in [[Sync > Review]]. Nothing changes until someone with edit rights applies it. Flash compares only the kinds of tokens a push carries, so the collections you left out are not touched. A push never deletes a token either; deleting happens in Flash.

Name the collection. Every value in a push is text the agent writes out, so one collection goes over in a single call while a whole library takes many calls and a long wait. For a whole file at once, the plugin's Figma → Flash tab is quicker.

When something goes wrong

  • Figma's server will not connect. Check your client is on Figma's catalog and run /mcp again to re-authenticate. Figma's server does not accept tokens pasted by hand.
  • The agent says it cannot find the plan. The Flash server is not connected in this project, or it is connected with a share link that points at another system. Ask it to call get_kit and read back your primary colour.
  • Writes fail in Figma. You have view access to the file, not edit access, or the agent skipped figma-use. Ask it to load the skill and try again.
  • The proposal lists changes nobody made. Download the skill again: an old copy can name collections your system no longer has.