What do I need before using the server?
A Figma personal access token (see Figma help on managing tokens) and Node.js installed. You’ll also need a compatible AI tool (Cursor, Windsurf, Cline, or any MCP client).
F
Figma MCP Server
@1yhy
Basic information
About Figma MCP Server
No overview available yet
Figma MCP Server config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"Figma MCP": {
"command": "npx",
"args": [
"figma-mcp",
"--figma-api-key=<your-figma-api-key>",
"--stdio"
]
}
}
}Figma MCP Server tools
5Add a Figma file to your context
Get a thumbnail for a specific node in a Figma file
Get all comments on a Figma file
Post a comment on a node in a Figma file
Reply to an existing comment in a Figma file
Overview
What is Figma MCP?
Figma MCP is a server based on the Model Context Protocol (MCP) that integrates Figma design files with AI coding tools such as Cursor, Windsurf, and Cline. It converts Figma design data into a format easily understood by AI models, enabling more accurate code generation directly from designs.
How to use Figma MCP?
Install via npm install -g @yhy2001/figma-mcp-server or from a local .tgz package. Start with figma-mcp --figma-api-key=<your-figma-api-key>. Optionally set a custom --port (default 3333) or use --stdio for command mode. In your AI tool’s MCP configuration, add the server URL (http://localhost:3333/sse) or the npx command with --stdio.
Key features of Figma MCP
- Converts Figma design data into AI-optimized formats.
- Retrieves layout and style info from files, frames, or components.
- Downloads images and icons from Figma files.
- Reduces context size for faster, more accurate AI responses.
Use cases of Figma MCP
- AI coding assistants generating UI code directly from Figma designs.
- Design-to-development handoff without manual pixel inspection.
- Automating component styling extraction for consistent frontend implementation.
Frequently asked questions
How do I get a Figma API token?
Follow the official Figma guide: [Manage personal access tokens](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
Can I run the server without internet access?
No, the server requires internet access to connect to the Figma API and fetch design file data. All design data is retrieved live from Figma.
What transports are supported?
HTTP/SSE (port 3333 by default) and stdio mode (`--stdio`). Use stdio for tools that launch the server as a subprocess, and SSE for tools that connect to a running server URL.
Is Figma MCP free and open source?
Yes, it is based on the open-source project Figma-Context-MCP and freely available. You only need your own Figma API token (free tier is sufficient for testing).
More Media & Design MCP servers
EveryGen AI MCP Server
EveryGen AIEveryGen AI MCP Server lets AI assistants create videos, images, voiceovers, music and complete multi-shot films. Connect your EveryGen AI account, describe what you want, review the credit quote and approve the creation
Designesy
LE-VAIDesign quality gate for AI-generated UI. Scores any live URL against a published contract of deterministic checks, with an A–F grade, a per-check breakdown and AI-slop pattern findings; validates DTCG token files and Lot
BulkTranscripts: YouTube Transcripts
Transcripts for one YouTube video or a whole channel or playlist, plus YouTube search, channel and playlist listings, and free new-upload tracking.
Cardboard AI
A video editor you use by chatting in Claude or ChatGPT. Bring your footage, ask for cuts, captions, titles and music, then download the finished video.
Poster MCP — AI Poster Generator
aistudy11AI Poster Generator for shop promotions and events in ChatGPT and Claude on the web. Connect free with your Poster account. Quotes and reads are free; generation uses your own Poster credits.
Comments