# Turn Figma designs into code in Cursor

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

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.

## Steps

1. **Enable 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. **Connect 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. **Build 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.

## Prompts to try

- Build the selected Figma frame as a React component in src/components/PricingCard.tsx using our Tailwind tokens.
- Get the variables used in this frame and map them to our CSS variables in tokens.css.
- Rebuild this form section with our existing Input and Button components instead of new ones.
- Compare the component you wrote with the Figma screenshot and fix spacing differences.
- Create a branch, commit the new component and open a pull request with a screenshot link from Figma.

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

## Security notes

- Figma access is read-only.
- Use a GitHub token scoped to one repository and review the pull request.

## MCP servers

- [Figma MCP Server](https://help.figma.com/hc/en-us/articles/32132100833559): design-read
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## FAQ

**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

- **[Figma](https://suiteintent.com/t/figma?m=GB)**: Collaborative interface design in the browser. · Best for: Designers and developers sharing one file · Free plan · Free for students
- **[GitHub](https://suiteintent.com/t/github?m=GB)**: Code hosting, issues and pull requests. · Best for: Teams reviewing code through pull requests · Free plan · 10000