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

よくある質問

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.

「メディアとデザイン」の他のコンテンツ

CampaignStack

Run LinkedIn and email outreach from Claude, safely. Made for lead gen agencies, founders and medium-large companies. Every account gets enforced daily limits, its own proxy, and a review queue before anything sends.

UGCfy AI

Break down any TikTok or Instagram Reels ad and rewrite it for your product, right inside Claude, Cursor, or ChatGPT. Hooks, UGC scripts, and CPM. Free, no API key.

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.

Uwear.ai

Run complete AI fashion photoshoots from ChatGPT, Claude, or Codex. Turn flat-lay, packshot, and mannequin product images into catalog-ready on-model photos and video with saved art direction, automatic QA, and catalog-s

North Noir

Make AI-drawn video from chat. Claude, Cursor or Claude Code plans the film, the model draws every frame in code at 30 fps, and you edit it on a timeline with narration, music and sound effects.