Advertise
MCP.so
Sign In

Figma MCP Server

@j4ckp0t85

Repository

Basic information

Category

Media & Design

License

MIT

Transports

stdio

Author

j4ckp0t85

About Figma MCP Server

experimental gen ai mcp server to generate figma tokens

#figma#mcp#design-tokens

Figma MCP Server 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>"
      ]
    }
  }
}

Figma MCP Server tools

Tool list not available yet

This listing does not currently have a tool list to display. This does not mean the server has no tools; check its documentation for supported capabilities.

Fetch the live tool list by running this server in a temporary sandbox using the button above.

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

Frequently asked questions

1

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.

2

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.

3

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).

4

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.

5

What export formats are available for design tokens?

CSS variables, SCSS variables/mixins, TypeScript constants, and raw JSON.

Comments

More Media & Design MCP servers

TokElements

TokElements

Build TikTok LIVE overlay widgets from Claude or ChatGPT. Describe a widget and the assistant writes it, previews it with sample events and places it on your TikTok LIVE Studio or OBS overlay.

TrueClicks

TrueClicks B.V.

TrueClicks is PPC audit and monitoring software for agencies and advertisers managing Google Ads, Microsoft Ads, and Meta Ads at scale. This connector gives read-only access to your TrueClicks data, so you can ask questi

InstantClips

InstantStudioAI

InstantClips turns an e-commerce product into short-form vertical video for TikTok, Instagram Reels and Stories. Import a product from its page URL or photos, generate on-brand video ads, and manage brands/products throu

Riddle Quiz Maker

Riddle.com

Creates and manages quizzes, polls, surveys, personality tests, forms, predictors, minigames and leaderboards on Riddle.com – with branching logic, custom design, live stats and embed code.

Treza

Treza Labs

Lets Claude, ChatGPT and other MCP clients build and run AI video pipelines on Treza, from script and generated shots to narration, captions and posting to YouTube or TikTok.

Advertise