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