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

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:

/add-plugin figma

This command automatically injects the MCP server configuration and registers the default skill set. As documented in the 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:

{
  "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:

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

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

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

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}