Turn a Figma frame into code by connecting the Figma MCP server

Figma's hosted MCP server gives a coding agent the variables, components and layout data of a frame you link to, so the code it writes matches the design.

The problem

When an agent works from a screenshot, it guesses spacing, tokens and components. Reading the structured design data cuts down that guessing and keeps the code consistent with the design system.

Steps

1. In Claude Code, add Figma's remote server with the command below. Add --scope user to use it in every project.
2. Run /mcp, select figma, then click Authenticate and Allow Access.
3. In VS Code, run 'MCP: Open User Configuration' and add an http server with the URL https://mcp.figma.com/mcp.
4. In Cursor, run /add-plugin figma in the agent chat.
5. Paste the link to a Figma frame and ask the agent to implement it. The server reads the node-id from the link.
6. Optionally, install Figma's skills so the agent can also write content back into Figma.

From the official docs

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

Results

• The agent gets design context such as variables, components and layout for the selected frame.
• With Code Connect, it can reuse your existing components instead of creating new ones.
• The server can also create or change native Figma content, such as frames, components, variables and auto layout.

As reported by the source (Figma Developer Docs); AgentGid did not measure these figures.

The agents used here

Claude CodeAnthropic · Terminal coding agents

Anthropic's agentic coding tool that reads a codebase, edits files and runs commands from the terminal, with VS Code and JetBrains integrations plus …

Price

$20/mo

Gid Score

80 #2 in Terminal

What it does, pricing, alternatives →

CursorAnysphere (owned by SpaceX) · AI IDEs and editor agents

AI coding editor and agent platform with a desktop app, a CLI, web and mobile agents, and cloud agents that run tasks in remote environments. It offe…

Price

Free + $20/mo

Gid Score

72 #1 in IDEs

What it does, pricing, alternatives →

Compare: Claude Code vs Cursor

Similar use cases

ShowcaseCursor

Cursor's planner-worker agents built a web browser from scratch in about a week

Cursor tested long-running autonomous coding with a hierarchy of planner agents that create tasks and worker agents that just complete them. The headline project was a browser eng…

The agents ran for close to a week, writing over 1 million lines of code across 1,000 files.

CursorBuilding apps · Code migration

ShowcaseAnthropic

16 parallel Claude agents wrote a C compiler that builds the Linux kernel

An Anthropic researcher ran a team of Claude agents in a loop on a shared repository to write a Rust-based C compiler from scratch. The write-up and the code are both public.

Over nearly 2,000 Claude Code sessions and $20,000 in API costs, the agents produced a 100,000-line compiler.

Claude CodeBuilding apps · Testing

Case studyNational Australia Bank

How National Australia Bank sped up legacy migrations with Cursor

NAB engineers used Cursor to understand and migrate legacy Silverlight/.NET and Assembly systems, and to build a new payment app. As reported by Cursor, delivery was well ahead of…

As reported by Cursor: NAB 'originally scoped six months of work' for the BizCalc migration and now expects it to finish in two months, 'a 3x improve…

CursorCode migration · Documentation