← Back

Cursor + Figma: setting up a designer's environment

cursor figma mcp

You're a designer who wants to turn mockups into code. Not learn React from scratch, not become a frontend developer, but drop a link to a Figma node and get a working component. Cursor + Figma MCP makes this possible. This article is a step-by-step setup from zero to a working flow.

Why Cursor, not VS Code

VS Code is a great editor. Cursor is VS Code with AI built in. The difference matters: in VS Code you install a copilot extension and get suggestions. In Cursor, AI is a full agent that reads your project, creates files, runs commands, and connects to external services via MCP.

For a designer this means you talk to the IDE in plain language, drop a Figma link, and AI fetches the mockup, analyzes the structure, and generates code that fits your project. Not autocomplete, but a complete workflow.

Step 1. Installation

Download Cursor from cursor.com. Standard installation: dmg on Mac, exe on Windows. On first launch Cursor will offer to import VS Code settings. Accept if you've used it before.

After installation, open settings (Cmd + ,) and check three things:

Step 2. Terminal and basic tools

The terminal is a text interface to your computer. Sounds scary, but for our flow you only need about five commands. In Cursor the terminal opens with Ctrl + `.

Node.js

Node.js is a runtime for JavaScript outside the browser. Many developer tools run on it. Install the LTS version from nodejs.org. After installation, verify in the terminal:

node --version
npm --version

If both commands return a version number, everything works.

Git

Git is a version control system. For a designer, think of it as “version history” in Figma, but for code. On Mac, Git comes preinstalled. On Windows, install from git-scm.com.

The minimum set of commands you'll need:

git clone <url>        # download a project
git add .              # stage all changes
git commit -m "text"   # save a snapshot
git push               # push to GitHub

But even these commands Cursor can run for you. Just ask “commit and push the changes.”

Step 3. Cursor Rules: project memory

Cursor Rules are files in the .cursor/rules/ folder that AI reads at the start of every session. They provide your project's context: which technologies are used, which components exist, which patterns to follow.

If you've read my previous article Design.md, this is exactly where the design system spec lives. Create a file .cursor/rules/design-system.md:

# Design system

## Stack
- HTML, CSS (no frameworks)
- CSS variables for tokens
- Vanilla JavaScript

## Tokens
- Primary text: var(--text) — #0a0a0a / #f5f5f5
- Secondary: var(--text-muted) — #737373 / #8f8e8d
- Background: var(--bg) — #fafafa / #0c0c0c

## Rules
- Max content width: 592px
- Font: Inter
- Spacing multiples of 4px

Now every time you ask Cursor to write code, it knows your tokens, your stack, and your rules. It doesn't guess, it reads.

Step 4. Connecting Figma via MCP

MCP (Model Context Protocol) is a protocol that lets AI agents connect to external services. Figma released an official MCP server, and this changes everything: Cursor gets direct access to your mockups.

Setup

Open Cursor settings: Cmd + Shift + P → “Cursor Settings” → MCP tab. Click “Add new global MCP server” and add the configuration:

{
  "mcpServers": {
    "Figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY"
      ]
    }
  }
}

Where to get the API key: open Figma → Settings → Personal Access Tokens. Create a token with file access, copy it, and paste in place of YOUR_KEY.

After saving, Cursor will restart the MCP server. A green indicator should appear next to Figma in the server list.

What this gives you

Now you can drop a link to any Figma node into Cursor, and it will receive:

Step 5. First request

Everything is set up. Open Figma, select a node (frame, component, section), copy the link: right-click → “Copy link to selection.” Open the chat in Cursor (Cmd + L) and type:

Build this component
https://figma.com/design/xxx/yyy?node-id=123-456

Cursor will fetch all node information from Figma via MCP, check your Cursor Rules, see the stack and tokens, and generate code that fits your project.

Don't like the result? Keep the conversation going: “make the padding bigger,” “change the font to Inter,” “add dark mode.” AI remembers the context within a session and makes incremental changes.

One-click deploy

Code is written. How do you show it to the world? The simplest path is GitHub Pages. If your project is on GitHub, just ask Cursor:

Commit and push all changes

Go to your repository settings on GitHub → Pages → select the main branch. In a minute your site will be live at username.github.io/repo.

For more complex projects there's Vercel: connect your repository and every push automatically deploys a new version. Free for personal projects.

What's next

You have a working environment: an IDE with an AI agent that knows your design system and has direct access to Figma. This is not a replacement for a developer. It's a tool that lets designers test ideas in code, build prototypes from real components, and deploy them independently.

Three things to try first:

The gap between design and code is shrinking. Cursor + Figma MCP is one of the shortest bridges.