3D MCP Cursor Visualization
Figma MCP Logo - AI-Powered Development Tool for Cursor IDE

Figma MCP

Model Context Protocol Integration

Overview

Provide coding agents with design data direct from Figma for far more accurate design implementations in one-shot. When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

Figma Features

  • Direct access to Figma design data
  • Simplified and translated Figma API responses
  • Optimized context for AI model accuracy
  • Support for file, frame, and group links
  • HTTP and SSE server modes
  • Command-line interface
  • Environment variable configuration

Figma Setup & Configuration

Requirements

  • Figma API access token (read access)
  • Node.js
  • Cursor in agent mode

Installation Instructions

# Quick Start with NPX
npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# Alternative Package Managers
pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>
yarn dlx figma-developer-mcp --figma-api-key=<your-figma-api-key>
bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# Build from Source
git clone <repository-url>
pnpm install
cp .env.example .env  # Add your Figma API key
pnpm run dev

Configuration

# Environment Variables
FIGMA_API_KEY=<your-figma-api-key>
PORT=3333  # optional

# Cursor Configuration
{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

Figma Available Tools

  • get_file
  • get_node

Figma Required Inputs

fileKey

Type
string
Description
The key of the Figma file to fetch
Required
Yes

nodeId

Type
string
Description
The ID of the node to fetch (for get_node)
Required
No

depth

Type
number
Description
How many levels deep to traverse the node tree
Required
No

Figma Use Cases

  • One-shot design implementations
  • Accurate UI code generation from Figma designs
  • Design system integration
  • Component implementation from Figma files
  • Layout and styling information extraction
  • Design-to-code automation

Frequently Asked Questions

Provide coding agents with design data direct from Figma for far more accurate design implementations in one-shot. When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.
Figma API access token (read access), Node.js, Cursor in agent modeView detailed requirements
Follow the installation instructions in the setup section above.View installation guide

Figma MCP provides the following tools:

  • get_file
  • get_node