Figma MCP Server
@j4ckp0t85
About Figma MCP Server
experimental gen ai mcp server to generate figma tokens
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"Figma-Context-MCP-tokens": {
"command": "npx",
"args": [
"figma-developer-mcp",
"--figma-api-key=<your-figma-api-key>"
]
}
}
}Tools
No tools detected
We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.
Overview
What is Figma MCP Server?
Figma MCP Server is a Model Context Protocol server that gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design data. It fetches layout and styling information from Figma files and translates it into context that helps AI models write accurate code.
How to use Figma MCP Server?
Run the server quickly with npx figma-developer-mcp --figma-api-key=<your-figma-api-key>. For tools that use a config file (e.g., Windsurf, Cline, Claude Desktop), add a JSON entry specifying the command, arguments, and environment variable FIGMA_API_KEY. Connect the server to Cursor in Cursor’s settings under the features tab, then paste a Figma link into Composer (in agent mode) and ask Cursor to implement the design.
Key features of Figma MCP Server
- Fetches Figma file metadata and node trees
- Extracts detailed CSS properties (colors, typography, shadows, gradients, etc.)
- Generates design tokens in CSS, SCSS, TypeScript, or JSON
- Supports optional CSS property extraction for lightweight responses
- Runs in HTTP/SSE mode or stdio mode
- Works with Cursor, Windsurf, Cline, and other MCP-compatible tools
Use cases of Figma MCP Server
- Implement a UI design from Figma directly in Cursor’s Composer
- Generate design tokens (colors, spacing, typography) from a Figma file
- Translate Figma frames into styled code with accurate CSS values
- Automate design-to-code workflows in AI-powered IDEs
FAQ from Figma MCP Server
What is the Figma MCP Server?
It is an MCP server that connects AI coding tools to Figma’s API, providing design data (layout, styling, tokens) to improve code generation accuracy.
How do I get a Figma API key?
Create a personal access token in your Figma account settings (read-only access is sufficient). Instructions are at the Figma help center.
What tools does the server provide?
Two tools: get_figma_data (fetches node info with optional CSS properties) and generate_design_tokens (exports design tokens in CSS, SCSS, TS, or JSON).
Can I run the server in stdio mode?
Yes, use the --stdio flag. This is required for tools like Windsurf and Cline that use a configuration file.
What export formats are available for design tokens?
CSS variables, SCSS variables/mixins, TypeScript constants, and raw JSON.
Frequently asked questions
What is the Figma MCP Server?
It is an MCP server that connects AI coding tools to Figma’s API, providing design data (layout, styling, tokens) to improve code generation accuracy.
How do I get a Figma API key?
Create a personal access token in your Figma account settings (read-only access is sufficient). Instructions are at the Figma help center.
What tools does the server provide?
Two tools: `get_figma_data` (fetches node info with optional CSS properties) and `generate_design_tokens` (exports design tokens in CSS, SCSS, TS, or JSON).
Can I run the server in stdio mode?
Yes, use the `--stdio` flag. This is required for tools like Windsurf and Cline that use a configuration file.
What export formats are available for design tokens?
CSS variables, SCSS variables/mixins, TypeScript constants, and raw JSON.
Basic information
More Media & Design MCP servers
BibiGPT AI video & audio summarizer
JimmyLvOpenClaw / Claude Code / Codex Agent skill for summarizing videos/audio via BibiGPT CLI (bibi)
Framelink Figma MCP Server
GLipsMCP server to provide Figma layout information to AI coding agents like Cursor
YouTube Transcript Server
kimtaeyoon83This is an MCP server that allows you to directly download transcripts of YouTube videos.
Game Asset Generator using MCP and Hugging Face Spaces
MubarakHAlketbiAn MCP server for creating 2D/3D game assets from text using Hugging Face AI models.
YouTube MCP Server
anaisbettsA Model-Context Protocol Server for YouTube
Comments