# 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. - Source: https://flashdsm.com/blog/figma-mcp-with-flash-in-your-editor - Published: 2026-09-25 - Author: Flash DSM Team - Track: Learn Flash - Reading time: 4 min read --- ## 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](/blog/figma-plugin-live-sync) 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](/blog/figma-agent-build-variables) 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: ```bash claude plugin install figma@claude-plugins-official ``` Or add the server by hand: ```bash 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](/blog/cursor-design-tokens-on-brand-ai) 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: ```text .claude/skills/-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: ```text Use the figma-sync skill to build my Flash system's variables into this Figma file: . 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: ```text I changed the Spacing collection in . 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.