Figma
Enables extraction of design context from Figma files as CSS-like properties and provides tools to render Figma nodes as images. It integrates with AI agents via the Model Context Protocol to facilitate design-to-code workflows by providing layout, s
What is Figma?
Figma is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to enables extraction of design context from figma files as css-like properties and provides tools to render figma nodes as images. it integrates with ai agents via the model context protocol to facilita...
Enables extraction of design context from Figma files as CSS-like properties and provides tools to render Figma nodes as images. It integrates with AI agents via the Model Context Protocol to facilitate design-to-code workflows by providing layout, s
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- add_figma_file
- view_node
- read_comments
- post_comment
- reply_to_comment
Use Cases
Maintainer
Works with
Installation
NPM
npx -y figma-mcpManual Installation
npx -y figma-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Figma
The @nvanexan/figma-mcp server connects AI coding assistants to Figma files via the Figma REST API, enabling extraction of design context as CSS-like properties and rendering of specific nodes as images. It exposes two focused tools — one for extracting the complete design tree (layout, colors, typography, effects) and one for exporting rendered node images in PNG, JPG, SVG, or PDF format. Frontend developers use it to bridge the design-to-code gap, letting AI assistants read Figma designs directly and generate accurate component implementations without manual copy-paste.
Prerequisites
- Node.js 16+ installed (for npx execution)
- A Figma account with access to the files you want to use
- A Figma Personal Access Token from Figma Settings > Personal Access Tokens
- The Figma file URL or file key for the designs you want to extract
- An MCP-compatible client such as Claude Desktop, Claude Code, or GitHub Copilot
Get a Figma Personal Access Token
Log in to Figma, go to Settings (top-left menu) > Security > Personal Access Tokens, and generate a new token. Copy it immediately — it is only shown once.
Install the package (optional)
You can install globally or run directly with npx. Global install avoids re-downloading on each use.
npm install -g @nvanexan/figma-mcpAdd the server to your MCP client configuration
Edit your claude_desktop_config.json or equivalent MCP config file to add the figma-mcp server, passing your Personal Access Token as the FIGMA_API_KEY environment variable.
Restart your MCP client
Restart Claude Desktop or your chosen MCP client so it picks up the new server configuration and establishes the connection.
Test with a Figma file URL
Copy a Figma file URL from your browser and ask Claude to extract the design context from it to confirm everything is working.
Figma Examples
Client configuration
Add this to your claude_desktop_config.json. Replace 'your-figma-pat' with the Personal Access Token you generated in Figma Settings.
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "@nvanexan/figma-mcp"],
"env": {
"FIGMA_API_KEY": "your-figma-pat"
}
}
}
}Prompts to try
Once connected, use these prompts to extract design context and generate code from your Figma files.
- "Extract the design context from this Figma URL: https://www.figma.com/file/XXXX/My-Design and generate a React component"
- "Get the colors, typography, and spacing from the hero section node in my Figma file"
- "Render the button component node at https://www.figma.com/file/XXXX as a PNG image"
- "Extract the design tokens (colors, font sizes, spacing) from this Figma frame and create a CSS variables file"
- "Look at the card component in my Figma file and implement it as a Tailwind CSS component"Troubleshooting Figma
401 Unauthorized error when extracting Figma context
Your FIGMA_API_KEY is invalid or has expired. Go to Figma Settings > Security > Personal Access Tokens, revoke the old token, generate a new one, and update the env value in your MCP config.
Node not found or file not accessible
Ensure the Figma file is accessible to the account that owns the Personal Access Token. For team files, the token owner must be a member of the team or project. Verify the file URL is copied from the Figma web app, not the desktop app (URLs must be in the https://www.figma.com/file/... format).
Design context output is very large and truncated
Use the depth parameter to limit the node tree depth (1-10, default 3). Ask Claude to extract context from a specific frame or component node rather than the entire file by specifying the node ID in the URL (append '?node-id=XXX').
Frequently Asked Questions about Figma
What is Figma?
Figma is a Model Context Protocol (MCP) server that enables extraction of design context from figma files as css-like properties and provides tools to render figma nodes as images. it integrates with ai agents via the model context protocol to facilitate design-to-code workflows by providing layout, s It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Figma?
Install via npm with the command: npx -y figma-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Figma?
Figma works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Figma free to use?
Yes, Figma is open source and available under the Apache-2.0 license. You can use it freely in both personal and commercial projects.
Figma Alternatives — Similar Developer Tools Servers
Looking for alternatives to Figma? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Figma in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Figma?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.