广告合作
MCP.so
登录

Figma MCP Server

@j4ckp0t85

代码仓库

基本信息

分类

媒体与设计

许可证

MIT

传输方式

stdio

作者

j4ckp0t85

关于 Figma MCP Server

experimental gen ai mcp server to generate figma tokens

#figma#mcp#design-tokens

Figma MCP Server 配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

{
  "mcpServers": {
    "Figma-Context-MCP-tokens": {
      "command": "npx",
      "args": [
        "figma-developer-mcp",
        "--figma-api-key=<your-figma-api-key>"
      ]
    }
  }
}

Figma MCP Server 工具

工具列表暂未提供

当前收录暂时没有可展示的工具列表，不代表服务没有工具。请查阅项目文档了解支持的能力。

点击上方按钮,在临时沙箱中运行此服务器并实时获取工具列表。

概览

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

常见问题

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.

评论

媒体与设计 分类下的更多 MCP 服务器

PostNitro

PostNitro Inc.

The PostNitro MCP server lets AI assistants and agents — Claude (Desktop, Code, and Cowork), Cursor, ChatGPT, and any other Model Context Protocol client — create carousels, image posts, and videos, manage brand kits, a

SnapDub

SnapDub

Turn long videos into captioned vertical clips for TikTok, Reels and Shorts from Claude, ChatGPT, Cursor or any MCP client. Paste a YouTube, Twitch, Kick, Rumble or Zoom link and get clips with titles, virality scores, d

Vid Kraken

Vid Kraken

YouTube download API and MCP server. Download YouTube videos as MP4 (360p–4K) or audio as MP3/AAC, cut clips by start and end time, and get video metadata. No yt-dlp, proxies or cookies to maintain; 99.99% of downloads s

Layers Marketing MCP

layers

Give your agent marketing superpowers. Layers MCP is the endpoint your coding agent calls to run growth for your product: it finds what to post, renders the video or slideshow, delivers it to TikTok, reads the result, an

CoDesign

IMG.LY

Give your AI agent a real design engine. Create, edit and export real, editable designs from Claude Code, Codex, Cursor and more.

广告合作