Figma Context MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

Returns Figma data in a token-efficient YAML/JSON shape, not the raw API monster
Resolves component instances and their overrides
Surfaces design tokens (colors, text styles, spacing) by name
Image export of selected nodes for visual reference
Read-only — never writes back to your Figma file

Живое демо

Как выглядит на практике

figma.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add figma -- npx -y figma-developer-mcp

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Figma Context

Generate React/SwiftUI/Tailwind code from a Figma frame

👤 Frontend devs implementing a designed screen ⏱ ~30 min intermediate

Когда использовать: You have a Figma frame for a screen/component and want the first 80% of code generated faithfully.

Предварительные требования

Figma personal access token — figma.com → Settings → Personal access tokens; scope to file_read
Figma file URL — Copy the URL from the Figma file; the MCP can extract file key and node id

Поток

Pull the frame data

Get the Figma node at <paste figma URL with node-id>. Return its layout, text content, colors, and child structure.✓ Скопировано

→ Hierarchical node data with real values — not 'unable to fetch'
Generate code grounded in the data

Generate a React + Tailwind component that matches this exactly. Use the actual hex colors and pixel values from the Figma data, not approximations.✓ Скопировано

→ Code that references real values, e.g. bg-[#1A2B3C] not bg-blue-500
Cross-check with an export

Export the same frame as a PNG. Compare to your generated component's expected render and call out any differences.✓ Скопировано

→ Specific diffs (missing icon, wrong padding) rather than 'looks similar'

Итог: A pixel-faithful first draft you can refine instead of rebuild.

Подводные камни

Auto-layout vs absolute positioning maps differently to flex/grid — Tell Claude to prefer flexbox when the Figma frame uses auto-layout; absolute when it doesn't
Vector icons come back as SVG paths Claude inlines verbatim — Have it extract icons separately to /icons/*.svg and reference them as components

Сочетать с: filesystem · github

Sync Figma design tokens into your codebase

👤 Design-system maintainers ⏱ ~20 min intermediate

Когда использовать: Designers updated palette/typography in Figma and you need the token JSON updated to match.

Поток

Pull the published styles

From Figma file <key>, list every published color style, text style, and effect style. Group by category.✓ Скопировано

→ Complete token list with names and values
Diff against the codebase

Read /design-tokens/tokens.json. Show me which tokens changed in Figma since this file was last synced (added, removed, value changed).✓ Скопировано

→ Per-token diff with old/new
Apply and open PR

Update tokens.json to match Figma. Open a PR titled 'sync: design tokens YYYY-MM-DD' with the diff in the description.✓ Скопировано

→ PR opened with reviewable diff

Итог: Code-side tokens stay in lockstep with Figma; no more 'why is the brand color slightly off' tickets.

Подводные камни

Renamed tokens look like delete+add — Have Claude detect rename heuristically (same value, similar name) and call it out for human review

Сочетать с: filesystem · github

Extract dev specs (spacing, sizing, copy) from a Figma file

👤 Engineers triaging a Figma handoff without Dev Mode ⏱ ~15 min beginner

Когда использовать: You don't have Figma Dev Mode but you need pixel specs for a screen.

Поток

Get the screen

For Figma node <id>, give me a flat list of every leaf element with its absolute position, size, and any text content.✓ Скопировано

→ Tabular dump of elements with x/y/w/h
Ask for a spec doc

Turn that into a developer-facing spec: section by section, with spacing values (margin/padding) inferred from positions.✓ Скопировано

→ Spec doc with concrete CSS-equivalent values
Verify edge cases

What happens when a text exceeds the designed width? Does the design specify wrap behavior, truncation, or growth? If unspecified, flag for the designer.✓ Скопировано

→ Open questions list, not silent assumptions

Итог: A buildable spec without buying a Dev Mode seat for everyone.

Подводные камни

Designer used arbitrary spacing (13px, 17px) instead of token values — Ask Claude to round to the nearest token value but log the deviation, so designers can clean up

Сочетать с: filesystem

Комбинации

Сочетайте с другими MCP — эффект x10

figma + filesystem

Generate code from Figma and write it directly to your component file

Pull Figma node <id>. Generate a React component matching it exactly, write it to src/components/Card.tsx using filesystem MCP.✓ Скопировано

figma + github

Open a PR with the new component plus a Figma link in the description for reviewers

Generate the Card component from Figma <url>, commit, push, and open a PR with both the code change and the source Figma link.✓ Скопировано

figma + chrome-devtools

Build, render in browser, screenshot, and visually compare against the Figma export

Build the new component. Render it at localhost:3000/preview/card. Take a screenshot. Compare visually against the Figma PNG export and list any visual differences.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
get_figma_data	fileKey: str, nodeId?: str, depth?: int	Pull a frame or whole file in agent-friendly form	1 Figma API call (free tier: 1500/min)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	Export design assets (icons, illustrations, screenshots) locally	1 Figma render call per node

Стоимость и лимиты

Во что обходится

Квота API: Figma free plan: 1,500 requests/min. Plenty for interactive use.
Токенов на вызов: Compact mode keeps payloads to ~1-5k tokens per frame. Full files can balloon — restrict by nodeId.
Деньги: MCP is free. Figma API access is free with any Figma account.
Совет: Always pass a nodeId when you can — fetching a whole file is wasteful.

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: file_read

Хранение учётных данных: Personal access token in env var FIGMA_API_KEY. Never commit.

Исходящий трафик: All calls to api.figma.com

Никогда не давайте: file_write — the MCP doesn't need it; using a write-capable token risks accidental edits

Personal access tokens are powerful — use a token scoped to read-only and rotate periodically.
Figma file contents (your designs) ship to your LLM provider as context. If the file is sensitive, prefer node-scoped fetches over whole-file.

Устранение неполадок

Частые ошибки и исправления

403 Forbidden

Token doesn't have access to that file. Check whether the file is in a team/workspace your token can see. For shared community files, use a different token.

Проверить: curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

Use the format https://www.figma.com/file/<KEY>/... or https://www.figma.com/design/<KEY>/.... Pass fileKey explicitly if URL parsing fails.

Response is enormous and blows context

Pass nodeId to scope to a frame, or depth: 2 to limit traversal.

Image export fails with 'unsupported node type'

Some node types (sections, slices) can't be exported. Select an actual frame or component instead.

Альтернативы

Figma Context в сравнении

Альтернатива	Когда использовать	Компромисс
Figma official Dev Mode MCP (beta)	You have Figma Dev Mode and want the official integration	Newer, requires Dev Mode subscription; deeper Figma feature support over time
Figma REST API directly via shell	You want full API surface (variables, branches, comments)	Raw API responses are huge and hard for an LLM to digest

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills