figma-mcp

Высокопроизводительный двунаправленный сервер Model Context Protocol (MCP), написанный на Rust, подключающий ИИ-ассистентов для написания кода напрямую к Figma Desktop.

Позволяет ИИ-агентам (Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed) рисовать UI прямо на холсте Figma и считывать существующие макеты в виде структурированных JSON-деревьев, дизайн-токенов, CSS и скриншотов — без необходимости во внешних API-ключах.

⚡ Ключевые особенности

• Чистая нативная производительность на Rust: запускается за < 1ms, использует ~3MB RAM, нулевые паузы GC.

• Двунаправленный мост: ИИ может как создавать UI (рисовать векторы, компоненты, фреймы, autolayout), так и читать макеты (извлекать иерархию, вычислять стили, захватывать холст).

• Изолированная JS-среда выполнения: на базе Boa (движок ECMAScript на чистом Rust) для безопасного выполнения скриптов дизайна.

• Встроенный CDN ассетов: автоматически загружает и нормализует SVG-иконки из 7 библиотек иконок (Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor).

• Поддержка нескольких вкладок / сеансов: бесшовно подключается к нескольким открытым файлам Figma одновременно.

• 100% конфиденциальность локального хоста: весь обмен данными происходит строго на 127.0.0.1:38451 через HTTP long-polling.

Related MCP server: Figma Dash MCP Server

🏛️ Архитектура

┌─────────────────────────────────────────────────────────┐
│               Terminal (Standalone Server)              │
│                       figma-mcp                         │
│  • MCP SSE Transport (/sse, /message)                   │
│  • Sandboxed JS Runtime (Boa)                           │
│  • Built-in Asset & Icon Resolver                       │
│  • Async WebSocket & HTTP Long-Polling Bridge (Axum)    │
└───────────────▲─────────────────────────▲───────────────┘
                │ (ws://127.0.0.1:38451)  │ (http://127.0.0.1:38451/sse)
                │                         │
      ┌─────────┴─────────┐     ┌─────────┴─────────┐
      │   Figma Desktop   │     │ AI Assistant(s)   │
      │ (Plugin Bridge)   │     │ Antigravity/Cursor│
      └───────────────────┘     │ Claude Code / Zed │
                                └───────────────────┘

🚀 Быстрый старт

1. Однострочный запуск через NPX (Rust toolchain не требуется)

Вы можете запустить figma-mcp на любой машине — Mac, Linux или Windows — без какой-либо настройки:

npx figma-mcp

Он автоматически загружает готовый нативный бинарник для вашей архитектуры и запускает сервер.

Или при настройке в Cursor / Claude Desktop / Windsurf / Antigravity MCP Settings:

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

2. Или сборка из исходников (Rust)

Требования: Rust toolchain (cargo >= 1.80).

git clone https://github.com/BuiHung1612/figma-mcp.git
cd figma-mcp
cargo build --release
./target/release/figma-mcp

3. Установите плагин Figma

1. Откройте Figma Desktop.

2. Перейдите в Плагины → Разработка → Импорт плагина из манифеста...

3. Выберите файл: plugin/manifest.json из этого репозитория.

4. Запустите плагин (Плагины → Разработка → Figma MCP Bridge).

5. В интерфейсе плагина появится зелёная точка (Подключено).

4. Настройте ваш MCP-клиент

Google Antigravity (транспорт SSE — рекомендуется)

Добавьте в ваш ~/.gemini/config/mcp_config.json или в проектный .agents/mcp_config.json:

{
  "mcpServers": {
    "figma-mcp": {
      "serverUrl": "http://127.0.0.1:38451/sse"
    }
  }
}

Claude Code / Cursor / Windsurf / VS Code

Вы можете подключиться через SSE или stdio:

Вариант A: транспорт SSE (рекомендуется)

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://127.0.0.1:38451/sse"
    }
  }
}

Вариант B: подпроцесс stdio (через NPX)

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

🛠️ Справочник MCP-инструментов

figma-mcp предоставляет 7 полноценных MCP-инструментов:

figma_get_selection

Сверхбыстрая проверка выбранных в данный момент слоёв/фреймов на холсте Figma со сжатием токенов. Возвращает сжатую иерархию раскладки и типографики с сокращением количества токенов на 60-80%.

figma_inspect_node

Проверяет конкретный узел по ID или имени, возвращая полный контекст дизайна, CSS, правила Auto-layout и типографику.

figma_export_asset

Экспортирует любой узел/слой Figma напрямую в PNG, JPG или SVG.

• outputPath: при указании (например, src/assets/logo.png) сохраняет файл напрямую на диск и возвращает минимальные JSON-метаданные, вместо того чтобы заполнять контекстное окно большими base64-строками!

figma_status

Проверяет статус соединения моста в реальном времени, подключённые вкладки Figma, имя активного файла и статистику задержек.

figma_write

Выполняет JavaScript-команды рисования внутри изолированной виртуальной машины для создания или изменения макетов на холсте Figma.

• Поддерживает Auto-layout (layoutMode, itemSpacing, padding), типографику, заливки, обводки, радиус скругления углов, падающие тени и создание компонентов.

• Поддерживает загрузку иконок: figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" }).

• Поддерживает вставку изображений: figma.loadImage(url, { width: 300, height: 200 }).

figma_read

Универсальный инструмент чтения для продвинутых запросов: get_design, scan_design, screenshot, export_svg, get_variables, get_styles, search_nodes. Поддерживает outputPath для экспорта файлов.

figma_docs

Получает встроенную документацию, правила дизайна, рекомендации по раскладке и примеры кода для figma_write.

• section: "all" | "rules" | "layout" | "api" | "tokens" | "icons"

figma_rules

Проводит аудит текущего документа Figma и генерирует правила согласованности и определения токенов, чтобы направлять ИИ-генерацию.

💻 Разработка и тестирование

# Run server directly in debug mode
cargo run

# Build release binary
cargo build --release

# Run automated MCP test suite
./scripts/test-rust-mcp.sh

# Rebuild Figma plugin bundle (if plugin-src/ is modified)
node scripts/build-plugin.js

📄 Лицензия

MIT © BuiHung1612 — можно свободно использовать, изменять и распространять. Подробности см. в LICENSE.