southleft/figma-console-mcp

Developer tools

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

2,6 тыс. stars 268 forks Качество 90 Тренд 53MIT

Repository Install

Ваша система проектирования как API. Подключите ИИ к Figma для извлечения, создания и отладки.

Обзор

Сервер Model Context Protocol, который соединяет дизайн и разработку — предоставляя ассистентам ИИ полный доступ к Figma для , , , и . figma_import_tokens теперь применяет весь дифференциальный план — создаёт, переименовывает, перетаргетирует псевдонимы и заменяет удаления с гейтом — для настоящего кода→Figma туда и обратно; экспортирует DTCG 2025.10 по запросу (opt-in, устаревший стандартный байт идентичен); scopes/codeSyntax round-trip; figma_setup_design_tokens принимает значения псевдонима; а новый figma_create_component_set строит полный набор вариантов из матрицы осей, используя одну вызов. (code.js + ui.html изменено). Посмотрите, что нового → Figma Console MCP соединяет AI-ассистентов (таких как Claude) с Figma, обеспечивая: - - Вытягивать переменные, компоненты и стили - - Экспортировать переменные Figma в DTCG JSON (устаревший или диалект 2025.10) + ещё 9 форматов; отправлять правки на стороне кода обратно в Figma с полным применением — создавать, переименовывать, таргетировать псевдонимы и заменять удаления с гейтом. Заменяет экспортный конвейер Style Dictionary и Tokens Studio.

Обзор (машинный перевод)

Вашу систему проектирования как API. Сервер Model Context Protocol, ориентированный на дизайн-систему, для Figma. Он работает в обоих направлениях (код Figma ⇄), записывает в Figma и выполняет детерминированные проверки для паритета дизайн-кода, доступности и состояния дизайн-системы. Он передаёт ИИ точные токены, варианты, привязки и состояния как структурированные данные, а не предписывает фреймворк или стиль дома, поэтому сгенерированный код следует собственному стеку и конвенциям вашей команды.

** 🆕 Исправления точности и безопасности (последняя версия 1.40.9):** Девять патчей с момента Design System Extraction в версии 1.40.0, основанных на отчётах сообщества. Сгенерированные документы компонентов теперь точно описывают каждый вариант — фоны, скрытые слои и свойства, которые их отображают, токены радиуса и границ по углу, типографику и структуру слоев между вариантами, а также ссылки источника, закреплённые на коммите. figma_export_tokens больше не может перезаписывать файл токена из неправильного файла Figma, переопределения в расширенных коллекциях переменных видны, минимально/максимальный размер сохраняется на каждом пути извлечения JSON, цвета устанавливаются на другой цвет при экспорте непрозрачности и импорте с сохраненной ссылкой, а опубликованный пакет проходит npm audit чисто.

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

README

Показан фрагмент оригинального README. Открыть оригинал.

Figma Console MCP Server

Your design system as an API. A design-system-focused Model Context Protocol server for Figma. It works in both directions (Figma ⇄ code), writes to Figma, and runs deterministic checks for design-code parity, accessibility, and design-system health. It hands the AI exact tokens, variants, bindings, and states as structured data rather than prescribing a framework or house style, so generated code follows your team’s own stack and conventions.

🆕 Shaders, grid and auto layout, OKLCH and P3 color, text wrap and variable fonts (latest v1.46.0): apply shaders and set their properties by name (figma_apply_shader, figma_list_shaders), set auto layout or grid layout in one call with CSS-style grid tracks (figma_set_layout), use OKLCH, Display P3 and other CSS colors on fills and strokes, and set text wrap (balance, pretty) and variable-font axes with figma_set_text (v1.46.0). v1.45 added Motion: animate layers with presets, custom animation styles or keyframes bound to Timing and Easing tokens, export video, and find code layers. See what’s new →

What is this?

Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:

🎨 Design system extraction - Pull variables, components, and styles
🧬 Codebase → design system extraction - Scan a production codebase, mine its de-facto styling into DTCG tokens with per-token provenance, scaffold a design-system package with a wired Storybook workshop, and gate it with deterministic fidelity evals — then round-trip the tokens into Figma variables (Local Mode)
🔁 Bidirectional token sync - Export Figma variables to DTCG JSON (legacy or 2025.10 dialect) + 9 more formats; push code-side edits back to Figma with full apply — creates, renames, alias re-targeting, and replace-gated deletes. Replaces Style Dictionary and Tokens Studio’s export pipeline.
📸 Visual debugging - Take screenshots for context
✏️ Design creation - Create UI components, frames, and layouts directly in Figma — including one-call component-set creation from a variant axes matrix
🔧 Variable management - Create, update, rename, and delete design tokens

Открыть полный README на GitHub

Установка

npx -y figma-console-mcp@latest

Новичок в MCP? Начните с руководства на mcpskill.org →

Конфигурация

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}