# Setting up Cursor IDE with Figma MCP Integration: Complete Configuration Guide

> Effortlessly set up Cursor IDE with Figma MCP integration. Install the plugin, register the endpoint, and enforce design system standards for AI code generation. Get the complete configuration guide now.

- Repository: [Figma/mcp-server-guide](https://github.com/figma/mcp-server-guide)
- Tags: how-to-guide
- Published: 2026-03-30

---

**You configure Cursor IDE with Figma MCP integration by installing the Figma plugin via `/add-plugin figma`, which automatically registers the MCP server endpoint at `https://mcp.figma.com/mcp` in your Cursor settings, then optionally create `.cursor/rules/figma-design-system.mdc` to enforce project-specific coding standards when the AI generates code from your Figma designs.**

Setting up Cursor IDE with Figma MCP integration bridges your design files and AI-assisted development, enabling Cursor's agent to retrieve component specifications, screenshots, and design tokens directly from Figma. According to the `figma/mcp-server-guide` repository, this integration operates through a specialized Cursor plugin that injects Model-Context-Protocol server configuration and predefined agent skills into your development environment.

## What the Figma MCP Server Provides

The integration delivers three core components that enable AI-driven design-to-code workflows:

- **MCP server configuration** – Defines the endpoint (`https://mcp.figma.com/mcp`) that Cursor uses to communicate with Figma's design data services.
- **Agent Skills** – Pre-built commands such as `#get_design_context` and `#get_screenshot` that allow the AI to query specific Figma nodes, frames, and assets.
- **Design-system rules** – Optional `.cursor/rules/*.mdc` files that encode your project's architectural conventions, ensuring generated code respects your component organization, naming standards, and styling requirements.

## Step-by-Step Setup Guide

Follow these steps to establish the connection between Cursor and Figma's MCP server.

### 1. Install the Figma Plugin

Open Cursor's agent chat and execute the plugin installation command:

```text
/add-plugin figma

```

This command automatically injects the MCP server configuration and registers the default skill set. As documented in the [`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md) Cursor section, this is the recommended installation method【/cache/repos/github.com/figma/mcp-server-guide/main/README.md#L71-L86】.

### 2. Verify the MCP Configuration

The plugin writes a JSON configuration block to `~/.cursor/mcpServers.json` (or your workspace-specific configuration file). Verify the file contains the Figma endpoint:

```json
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

```

This entry tells Cursor where to route all Figma-related MCP tool requests.

### 3. Manual Configuration (Alternative)

If you prefer manual setup over the plugin command, open **Cursor → Settings → Cursor Settings**, navigate to the **MCP** tab, click **+ Add new global MCP server**, and paste the JSON payload shown above. This achieves the same registration without using the chat command.

### 4. Confirm the Connection

Test the integration by running the design context command in Cursor's chat:

```text
#get_design_context

```

The agent should return a list of available Figma MCP tools. If no tools appear, restart Cursor to refresh the MCP server registry.

### 5. Add Project-Specific Design System Rules

Create a rule file at `.cursor/rules/figma-design-system.mdc` in your repository root. This file must begin with YAML front-matter followed by markdown documentation. The [`skills/figma-create-design-system-rules/SKILL.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-create-design-system-rules/SKILL.md) file specifies this exact path and format requirement【/cache/repos/github.com/figma/mcp-server-guide/main/skills/figma-create-design-system-rules/SKILL.md#L15-L20】.

Structure the file as follows:

```markdown
---
description: Rules for implementing Figma designs using the Figma MCP server. Covers component organization, styling conventions, design tokens, asset handling, and the required Figma-to-code workflow.
globs: "src/components/**"
alwaysApply: false
---

- **Component placement** – New UI components must live in `src/components/`.
- **Naming** – Use PascalCase for component filenames and exported symbols.
- **Styling** – All styles are applied with TailwindCSS; replace any raw Tailwind utilities with project-specific utility wrappers defined in `src/ui/tailwind.ts`.
- **Tokens** – Design tokens are defined in `src/theme/tokens.ts`; never hard-code colors or spacing.
- **Assets** – Download assets from the MCP `assets` endpoint and store them in `public/assets/`. Do **not** import external icon libraries.
- **Implementation flow** –  
  1. Run `#get_design_context` for the target node.  
  2. Run `#get_screenshot` for visual reference.  
  3. Translate the React + Tailwind output into the project's conventions before committing.

```

This template mirrors the markdown structure shown in the skill definition file【/cache/repos/github.com/figma/mcp-server-guide/main/skills/figma-create-design-system-rules/SKILL.md#L81-L89】.

### 6. Use the Agent for Design-to-Code

With the integration active, type natural language prompts such as:

```text
Implement the Header component from my Figma file

```

The agent automatically invokes the appropriate MCP tools, fetches design context and screenshots, and generates code that adheres to the rules defined in your `.cursor/rules/figma-design-system.mdc` file.

## Configuring Advanced MCP Workflows

For complex design systems, combine multiple MCP tools in sequence:

1. **Retrieve structure**: `#get_design_context nodeId=12345` returns the JSON representation of the specific Figma node.
2. **Capture visuals**: `#get_screenshot nodeId=12345` provides visual reference for layout verification.
3. **Generate code**: The agent processes both data sources against your design-system rules to produce implementation-ready code.

## Summary

- **Install via plugin**: Use `/add-plugin figma` in Cursor chat for automatic configuration.
- **Verify endpoint**: Confirm `https://mcp.figma.com/mcp` appears in `~/.cursor/mcpServers.json`.
- **Test connectivity**: Run `#get_design_context` to validate the MCP server responds.
- **Enforce standards**: Create `.cursor/rules/figma-design-system.mdc` to guide AI code generation with project-specific conventions.
- **Source documentation**: Refer to `figma/mcp-server-guide` README and the `figma-create-design-system-rules` skill for official configuration templates.

## Frequently Asked Questions

### Where does Cursor store the Figma MCP server configuration?

Cursor stores the configuration in `~/.cursor/mcpServers.json` for global settings, or within workspace-specific configuration files. You can view and edit this JSON directly via **Cursor → Settings → Cursor Settings → MCP**, where the Figma entry should show `{"url": "https://mcp.figma.com/mcp"}`.

### What should I do if the `#get_design_context` command returns no results?

First, verify that `~/.cursor/mcpServers.json` contains the correct Figma URL. If the configuration is present but tools are missing, restart Cursor to reload the MCP server registry. The agent cannot discover Figma tools until the server connection is initialized after installation.

### How do I structure the design-system rules file for Cursor?

Create a file at `.cursor/rules/figma-design-system.mdc` in your repository. The file must start with YAML front-matter containing `description`, `globs`, and `alwaysApply` fields, followed by markdown documentation of your coding standards. This path is specified in the [`skills/figma-create-design-system-rules/SKILL.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-create-design-system-rules/SKILL.md) file within the `figma/mcp-server-guide` repository.

### Can I use the Figma MCP integration without installing the Cursor plugin?

Yes, though the plugin method is recommended. You can manually add the MCP server by navigating to **Cursor Settings → MCP**, clicking **+ Add new global MCP server**, and entering the JSON configuration with the Figma endpoint. This bypasses the `/add-plugin figma` command while maintaining identical functionality.