Skip to content

Turn Figma designs into code in Cursor

Rebuilding a design by eye means spacing, colours and states drift from what was designed.

3 stepsModerate
CursorClaude CodeFigmaGitHub

How it connects

Your AI reaches your apps through small connectors called MCP servers.
Your AI
CursorClaude Code
Connectors
FigmaGitHub
Your apps
FigmaGitHub

This setup is for frontend developers and design engineers who turn Figma frames into components. Figma's MCP server gives Cursor or Claude Code the frame's structure, variables and screenshots, and GitHub lets the agent work in your repo and open a pull request. You end up with components that use your design tokens instead of hard-coded values copied by eye.

Set it up

3 steps. Open one for the details.
  1. 1Enable the Figma MCP server

    In the Figma desktop app, open a Design file, switch to Dev Mode and enable the desktop MCP server from the inspect panel or the Figma menu under Preferences. It runs locally at http://127.0.0.1:3845/mcp; add that URL to Cursor's MCP settings or with claude mcp add. Figma also offers a remote server at mcp.figma.com if you prefer not to run the desktop app.

    Tip: The MCP server needs a Dev or Full seat on a paid Figma plan; check Figma's docs for current seat rules.

  2. 2Connect GitHub

    Add GitHub's MCP server with a fine-grained token that can create branches and pull requests in your frontend repository. Ask the agent to list your component folder so it knows what already exists. This stops it from rebuilding a button you already have.

    Tip: Point the agent at your tokens file, such as tailwind.config or a CSS variables file, in the same prompt.

  3. 3Build from a frame

    Select a frame in Figma, or copy its link, and ask the agent to build it as a component using your existing tokens and components. The agent pulls the frame's code context, variables and a screenshot, then writes the component. Compare the result with the frame in the browser at the same width.

    Tip: Smaller frames give better results; build a card or a form section, not a whole page at once.

Then just ask

Things to say once it's connected. Click one to copy it.
Ask Cursor…Cursor

Good to know

What you need, what it won't do, and how to keep it safe.
What you need
  • A paid Figma plan with a Dev or Full seat
  • The Figma desktop app for the local server, or the remote server
  • Cursor or Claude Code
  • A GitHub token with branch and pull request access for your repository
Limits
  • The agent works from one frame at a time and can miss interactions, animations and responsive behaviour that the frame does not show.
  • Poorly structured Figma files, with no auto layout or variables, lead to hard-coded values in the code.
  • You still need to check accessibility, such as labels and focus states, by hand.
Keep it safe
  • Figma access is read-only.
  • Use a GitHub token scoped to one repository and review the pull request.
Figma MCP Server (design-read) GitHub MCP Server (repository-read, issue-write, pull-request-write)

Questions

Straight answers before you start
Which Figma plan do I need?
Figma's MCP server requires a Dev or Full seat on a paid plan. Check Figma's help centre for the current seat and plan details.
Does it work with Claude Code as well as Cursor?
Yes. Both hosts support the desktop and remote Figma MCP servers. The steps are the same apart from where you add the server URL.
Will it use my existing components?
It will if you tell it where they are and ask it to. Figma's Code Connect can map Figma components to code components, which makes the output more consistent.
Do my designs leave my machine?
The frame data and screenshots go into the conversation and to the model provider. Check your company's policy before you use client designs.

Tools in this setup

The products involved