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

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

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.

Comments

Basic information

More Media & Design MCP servers

Constants

Constants AI

One workspace of tools for Claude and ChatGPT. Connect apps, generate video, music, and ads, and build new tools on demand. Generate and publish ad creative directly from your assistant.

uxgen

A library of conversion components for e-commerce, built on A/B tested mechanics and handed straight to your coding agent. 65 pieces drawn from mechanics that have been A/B tested in real stores: cart drawer with the ups

KiCAD MCP: AI-Assisted PCB Design

mixelpixx

KiCAD MCP is a Model Context Protocol (MCP) implementation that enables Large Language Models (LLMs) like Claude to directly interact with KiCAD for printed circuit board design.

1.5K

SVGator

Drive your SVGator account from any AI assistant. Prompt an animation, get an editable project back, and export it as SVG, Lottie, GIF, MP4, and more, then open it in the editor to finish by hand.

Floors.live — Event Floor Plan & Seating Designer

Hakolsound

MCP server for Floors.live — design event floor plans, manage guest lists, and run intelligent seating assignments from Claude, ChatGPT, or Cursor. 32 tools.