Cursor + Figma in 2026: the current setup for designers

Current as of August 21, 2026. Cursor and the official Figma MCP allow an agent to read a design’s structure, variables, and components, map them to the codebase, and make changes to the project. But this is not a “turn Figma into production” button: quality depends on the file’s structure, the components in the codebase, the project rules, and verification of the result.

What changed by 2026

The old method involving the third-party figma-developer-mcp package and a personal API token is no longer necessary. Figma now has an official MCP server, available both remotely and locally in the desktop app. Figma recommends the remote server at https://mcp.figma.com/mcp: it offers a broader range of capabilities, receives updates without a local installation, and uses OAuth for authorization.

The easiest option in Cursor is to install the official Figma plugin. It adds the server and Agent Skills—instructions that help the agent read designs correctly, use components, and work with the canvas.

Step 1. Prepare the project

Before connecting Figma, make sure the project runs locally and has clear verification commands. Most web projects require Git and a current LTS version of Node.js, although your specific stack may differ.

git --version
node --version
npm --version

Do not immediately ask the agent to “build the screen.” First, open the repository and ask it to find:

existing components and page patterns;
color, typography, spacing, and radius tokens;
commands for running the project, tests, the linter, and the build;
framework constraints and accessibility rules.

Otherwise, the agent may reproduce the image accurately while creating a second set of buttons, colors, and spacing alongside the existing ones.

Step 2. Add project rules

Cursor offers two main options. Use AGENTS.md for simple, general instructions. For scoped rules, use .mdc files in .cursor/rules/. A regular .md file inside .cursor/rules/ is not recognized by the rules system.

# AGENTS.md

## UI
- Look for an existing component first
- Use tokens from src/styles/tokens.css
- Do not add HEX values or arbitrary spacing
- Preserve semantics and keyboard navigation

## Verification
- npm run lint
- npm test
- npm run build

Rules provide context, not a hard guarantee. Linters, types, tests, and review are still necessary.

Step 3. Connect the official Figma MCP

The current setup process in Cursor is:

Open the Command Palette: Cmd/Ctrl + Shift + P.
Open Chat and enter /add-plugin figma.
Confirm installation of the official plugin.
Open Cursor Settings → Tools & MCP.
Next to Figma, click Connect and complete OAuth authorization.

The remote server is available on all Figma seats and plans. Desktop MCP requires a Dev or Full seat on a paid plan and is primarily intended for specialized organizational workflows. Do not put personal Figma tokens in the repository or share them with the agent.

What the agent receives from Figma

Given a link to a file or selected node, the official server can provide structured design context: hierarchy, layout, components, variables, images, and a visual reference. The available actions depend on the client, permissions, and the server’s current tools.

As of August 2026, remote MCP can do more than read designs. In supported clients, the agent can create and update native content in Figma, as well as turn live web interfaces into editable layers. These are separate write workflows: do not mix them with the task of implementing a design in code.

Code Connect: when it really helps

Without Code Connect, the agent can see a design component but may not know which component to import from your package. Code Connect links a Figma library to its implementation in the repository and makes that relationship available to Dev Mode and Figma MCP.

There are two modes:

Code Connect UI runs inside Figma and connects to GitHub. It is a quick way to map components and give MCP a link to the real code. In Inspect, it shows the file and component name, but not custom snippets.
Code Connect CLI stores mappings alongside the code and supports property mappings and dynamic examples. The CLI is the option you need if Dev Mode must display exact snippets from your design system.

Since August 17, 2026, framework-specific parsers no longer receive updates or support. For new integrations, Figma recommends framework-agnostic .figma.ts template files: a TypeScript template explicitly generates the snippet for the required language or framework. Existing mappings can be migrated with npx figma connect migrate.

Step 4. Give the design to the agent

In Figma, select a frame, component, or section and copy the link to the selection. A good first prompt describes not only the desired appearance but also the scope of the task:

Implement this screen: [Figma link].

First:
1. find existing components and tokens;
2. read AGENTS.md and the repository rules;
3. write a short plan.

Then implement the screen without adding dependencies.
Preserve responsiveness and accessibility.
After making changes, run lint, tests, and build.

If you need a precise result, ask the agent to compare the implementation with the Figma screenshot at the target viewport sizes. Check more than pixels: tab order, focus states, contrast, text overflow, loading and error states, and behavior on a narrow screen are not always visible in a static frame.

What MCP does not solve

Ambiguous design. If the design does not define states and responsive behavior, the agent cannot infer them reliably.
Poor Figma architecture. Arbitrary groups and duplicates instead of components provide weak context.
Library drift. Matching names do not mean that Figma and the codebase are synchronized.
Production quality. MCP does not replace tests, code review, accessibility checks, or performance checks.
Security. An agent with access to the terminal and external systems requires the same safeguards as any other automated tool.

Commit and deployment

Do not blindly ask the agent to “commit and push everything.” Review the diff first, make sure it contains no secrets or unnecessary files, and then run the checks. GitHub Pages works well for static sites; the publishing method depends on the repository configuration and may use a branch or GitHub Actions. Vercel and other platforms typically create a preview deployment for every pull request, but the terms of free plans change—check them before publishing.

A concise workflow

Prepare a working project and its verification commands.
Document the rules in AGENTS.md or .cursor/rules/*.mdc.
Connect the official remote Figma MCP through the plugin and OAuth.
Map key components through Code Connect if you have a design system.
Provide a precise link to the selection and the task constraints.
Compare the result visually and check states, accessibility, and responsive behavior.
Review the diff, run the checks, and only then publish.