MCP

Sending Cursor screens to Figma via MCP

March 2026

How to push screens built in Cursor into Figma using Claude Code + MCP

Intro

You've built your screens in Cursor using AI-assisted code. They're running locally, looking right, and now you need them in Figma for design review, handoff, or iteration with your team.

The problem: Cursor can't push to Figma. It can pull designs out, but it has no way to send them back. This guide covers how to bridge that gap using Claude Code and Figma's MCP server — the only workflow that can take your built screens and push them directly into an editable Figma file, with tokens bound and ready for design.

First-time Setup

One-time setup. Takes about 15 minutes.

Install Node.js

Claude Code needs Node.js to run. Open Terminal and check if you already have it:

node --version

If you see a version number (e.g. v22.x.x), you're good. If not, download it from nodejs.org — choose the LTS version.

Install Claude Code

Claude Code is Anthropic's terminal-based AI tool. It's the only tool that can push designs to Figma.

npm install -g @anthropic-ai/claude-code

Once installed, navigate to any project folder and type claude to launch it. The first time it'll ask you to authenticate with your Anthropic account in the browser.

💡 Tip for designers
Claude Code is just a chat window that happens to be in your terminal. You type in English, it does the technical stuff. No coding knowledge needed.

Connect the Figma MCP Server

This gives Claude Code the ability to read from and write to your Figma files.

1. Add the Figma MCP server. Run this in Terminal (you don't need to be in any specific folder):

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

2. Go to your project folder:

cd ~/path-to-your-project

3. Launch Claude Code: type claude and hit Enter. Trust the folder when asked.

4. Type /mcp inside Claude Code. You should see figma-remote-mcp listed.

5. Select it and press Enter. Your browser opens — log into Figma and click Allow Access.

⚠️ Login error?
If your company security blocks the connection, use a personal Figma account as a workaround. Sign up free with a personal email — this bypasses company SSO entirely. See the original MCP Guide for full details on company restrictions.

Set Your Figma File Permissions

Your Figma file must be set to "Anyone with the link can view" (or edit). Without this, MCP can't access the file even after authentication. Click Share in Figma and change the dropdown.

Pushing Screens from Cursor to Figma

Cursor can pull designs from Figma (via Desktop MCP or a Personal Access Token), but it has no ability to send designs back. Claude Code is the only tool that can connect to Figma's Remote MCP server and push designs into a Figma file.

The workflow: build in Cursor → push via Claude Code.

💡 Why two tools?
Cursor is great for building UI with AI code assistance, but it only supports pulling from Figma, not pushing. Claude Code is the only tool with access to Figma's generate_figma_design capability via the Remote MCP. You use Cursor to build, Claude Code to push.

The Process

1. Make sure your Cursor project is running locally.

In a separate terminal tab (Cmd+T on Mac), start your dev server from your project folder:

npm run dev

Your screens should be visible at something like http://localhost:5174. Keep this running.

2. Open a new terminal tab and launch Claude Code in the same project folder:

cd ~/your-project-folder claude

Claude Code needs to be in the same repo so it can read your codebase and understand your components.

3. Open your Figma file in the browser. Copy the full URL from the address bar.

4. In Claude Code, prompt:

Use the Figma MCP generate_figma_design tool to capture the screen at http://localhost:5174 and push it to: [paste your Figma URL]

5. Check your Figma file — your screen appears as an editable frame. Done.

🔍 What happens under the hood
Claude Code reads your project's codebase (the same files Cursor was editing), understands the component structure and styling, then generates the equivalent Figma design using the MCP server's generate_figma_design tool. It translates your React/HTML into Figma frames, auto-layout, and styled layers.

Common Issues

⚠️ Token expired
The Figma OAuth token expires regularly. Don't just run /login — that refreshes Claude Code's auth, not the MCP server's. Instead: /mcp remove figma-remote-mcp, then re-add it with the same command from setup, and complete the fresh OAuth flow in your browser. 💡 Can't find your project folder?
If your dev server is running but you don't know where the files are, type in Claude Code:
lsof -i :5174 | head -5 (replace 5174 with your port)
This shows the process, then lsof -p [process-id] | grep cwd to find the folder.

Setting Up Tokens in Figma

Screens pushed via MCP arrive with hardcoded values — fills, strokes, spacing, and radius are all raw numbers, not bound to your Figma variables. To make them usable, your Figma file needs variable collections configured so the Auto Bind plugin can match and bind them.

Option A: Tokens Studio + AI (Recommended)

The fastest path if you have a codebase. Use Claude Code to extract tokens, then import into Figma via Tokens Studio.

1. In Claude Code, ask:

Extract all design tokens from this codebase. Output as a Tokens Studio-compatible JSON with colour, spacing, radius, and typography collections.

2. Claude reads your Tailwind config, CSS variables, or stylesheets and generates structured JSON.

3. In Figma, install the Tokens Studio plugin (free tier): Tokens Studio for Figma — Figma Community

4. Import the JSON. Tokens Studio creates Figma variable collections automatically.

5. Run the Variable Binder for AI Outputs plugin on your pushed screens. It matches hardcoded values to your new variables.

✅ Why this works well
Your codebase is the ground truth for what's actually shipping. Extracting tokens from code means your Figma file matches production from day one.

Option B: Figma Variables (Manual)

If you already have a design system in Figma, or prefer to set up tokens by hand:

Open your Figma file and go to Local Variables
Create collections for: Colours, Spacing, Radius, Typography
Define variables with semantic names (e.g. colour/brand-primary, spacing/md, radius/lg)
Once variable collections exist, the Variable Binder plugin can match pushed screens to them

💡 Naming matters
The plugin uses smart matching — it prefers component-level tokens over semantic over core primitives. Use hierarchical names like colour/surface/primary rather than flat names like grey-100.

Variable Binder for AI Outputs Plugin

Once your Figma file has variable collections (via either method above), this plugin does the heavy lifting. Built specifically for AI-to-Figma workflows where screens arrive via MCP with unbound properties.

Variable Binder for AI Outputs — Figma Community

Scans all variable collections in your file
Resolves alias chains (tokens that reference other tokens)
Walks every node on the current page
Binds fills, strokes, corner radius, padding, and spacing to matching variables
Smart matching: prefers component-level → semantic → core
Safe to run multiple times — already-bound properties are skipped

⚠️ Enterprise restriction
Corporate/Enterprise Figma seats may restrict plugin installation. Use your personal Figma account to install and run the plugin if needed.

Quick Reference

Which Tool Does What

Tool	What is it?	Connects to Figma?	Push to Figma?
Claude.ai	Chat in your browser	No	No
Claude Code	Chat in your terminal	Yes	Yes — the only one
Cursor	Code editor (like VS Code)	Yes	No (pulls only)

Terminal Commands

What	Command
Check Node.js installed	`node --version`
Install Claude Code	`npm install -g @anthropic-ai/claude-code`
Add Figma MCP	`claude mcp add --scope user --transport http figma-remote-mcp https://mcp.figma.com/mcp`
Launch Claude Code	`cd ~/your-project && claude`
Check MCP status	`/mcp` (inside Claude Code)
Re-auth expired token	`/mcp remove figma-remote-mcp` then re-add
Start dev server	`npm run dev`
Find project folder	`lsof -i :PORT

Questions or need help getting set up? Contact Edmond Hua.

That's the full document. A few Notion-specific notes:

Each > ⚠️ / 💡 / ✅ block → use Notion's /callout block and swap the emoji
The two tables in Quick Reference → /table (simple table, not database)
Code blocks → /code and set language to bash or text
The TOC from the original doc can be skipped — Notion auto-generates one in the sidebar