Skip to main content
Glama
deenesjakoruzh
TrungLee003

Figma Agent MCP

by TrungLee003
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

⚡ Figma Agent MCP

Локальный AI-дизайн-агент для Figma через Model Context Protocol (MCP) → WebSocket Bridge → Нативный плагин Figma.

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

CI Status TypeScript Strict Tests MCP Tools License: MIT

🏛️ Архитектура системы

┌─────────────────────────────────────────────────────────────┐
│             AI Client (Claude / Cursor / Antigravity / LLM) │
└──────────────────────────────┬──────────────────────────────┘
                               │ MCP Protocol (stdio / SSE)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        MCP Server (@figma-agent/mcp-server — 49 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (Compact)  - Composite Skills Runtime   │
│  - Design System Resolver      - Semantic Token Matching    │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Command Engine (@figma-agent/command-engine)          │
│  - Batch Transaction Pipeline  - Idempotency & Rollback     │
└──────────────────────────────┬──────────────────────────────┘
                               │ Local WebSocket (ws://127.0.0.1:3055)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       Bridge Server (@figma-agent/bridge-server)            │
│  - Channel Pairing (128-bit)   - Request/Response Matcher   │
│  - Heartbeat & Auto-reconnect  - 50+ Concurrent Sockets     │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│        Figma Plugin (@figma-agent/figma-plugin)             │
│  - Typed Command Dispatcher    - Pure Font Engine           │
│  - Native Node Mutation        - Zero External Dependencies │
└──────────────────────────────┬──────────────────────────────┘
                               │ Figma Plugin API
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                         Figma Canvas                        │
└─────────────────────────────────────────────────────────────┘

Related MCP server: figmind

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

  • 🔒 Локально и безопасно: По умолчанию привязывается к 127.0.0.1. 128-битное секретное сопряжение каналов. Никакого произвольного выполнения JavaScript внутри Figma.

  • 🧩 49 детерминированных MCP-инструментов: Полное покрытие: чтение, создание, изменение, авто-раскладка, визуальные стили, компоненты, переменные/токены, типографика, экспорт и разрешение дизайн-системы.

  • 🎯 Семантический резолвер дизайн-системы: Связывает человеческие намерения ("primary button", "#6366F1") с соответствующими компонентами и токенами, используя перцептивное цветовое расстояние ($\Delta E$) и автоматический аудит узлов.

  • ⚡ Компилятор контекста и обрезка: Сжимает огромные деревья узлов в семантический Markdown или компактный DSL с адаптивной обрезкой по глубине и соблюдением бюджета токенов менее чем за 100 мс. Обычно достигает значительного сокращения контекста; тестовые эталоны показывают >70% сокращения в протестированных сценариях.

  • 🛡️ Встроенная валидация и движок WCAG 2.1: Расчёт относительной яркости и контрастности (AA/AAA) для обычного текста, крупного текста и UI-компонентов; линтер авто-раскладки; аудитор сетки токенов 4px/8px.

  • 🔄 Атомарное пакетное выполнение: Последовательное выполнение конвейеров команд с восстановлением после ошибок stopOnFirstError или continueOnError.

  • 🚀 Готовые навыки агента: Предварительно упакованные композитные рабочие процессы для мгновенной генерации дизайн-системы, автоматического исправления доступности WCAG и преобразования вайрфреймов в hi-fi карточки.

📦 Структура монорепозитория

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 49 MCP Tools + Bridge Client + Session Service
│   ├── bridge-server/     # High-throughput WebSocket router (ws)
│   └── figma-plugin/      # Pure TypeScript native Figma Plugin
├── packages/
│   ├── protocol/          # CommandEnvelope, CommandResult, Error codes, Zod schemas
│   ├── figma-schema/      # SimplifiedNode, Layout, Style, Text, Validation schemas
│   ├── command-engine/    # Batch execution pipeline, transactions, ref resolution
│   ├── context-compiler/  # Token optimizer, tree pruner, Markdown & DSL serializers
│   ├── design-system/     # 4px/8px Spacing, Typography & Corner Radius scale matchers
│   ├── validator/         # WCAG 2.1 contrast engine, Auto Layout & design token rules
│   ├── skill-runtime/     # Composite skills registry & execution engine
│   ├── telemetry/         # Percentile metrics collector (p50, p95, p99)
│   └── shared/            # Hex/RGBA converters, Pino logger, environment config
└── tests/
    └── integration/       # 27 Vitest suites covering all phases & stress benchmarks

🚀 Быстрый старт и настройка

1. Сборка монорепозитория

git clone https://github.com/your-org/figma-agent-mcp.git
cd figma-agent-mcp
pnpm install
pnpm build

2. Запуск сервера-моста

pnpm --filter @figma-agent/bridge-server start
# Bridge server listening at ws://127.0.0.1:3055

3. Загрузка плагина Figma в Figma Desktop

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

  2. Перейдите в Plugins → Development → Import plugin from manifest...

  3. Выберите apps/figma-plugin/manifest.json.

  4. Запустите плагин Figma Agent Bridge. Запомните ваш Channel ID (по умолчанию default-channel).

⚙️ Настройка AI-клиента

🤖 1. Claude Desktop

Добавьте в ваш claude_desktop_config.json (%APPDATA%\Claude\claude_desktop_config.json на Windows или ~/Library/Application Support/Claude/claude_desktop_config.json на macOS):

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

💻 2. Cursor IDE

Добавьте в конфигурацию MCP Cursor (Settings → Features → MCP или .cursor/mcp.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

🧠 3. Google Antigravity / Gemini CLI

Добавьте в настройки MCP Antigravity (~/.gemini/antigravity/mcp_config.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055"
      }
    }
  }
}

⚡ 4. OpenAI Codex / Codex CLI / OpenAI Operator

Добавьте в конфигурацию MCP Codex (~/.codex/config.json или codex-settings.json):

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

Или зарегистрируйте через Codex CLI:

# Add Figma Agent MCP to Codex CLI
codex mcp add figma-agent -- node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

# Inspect available tools via MCP Inspector
npx @modelcontextprotocol/inspector node "d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"

🌊 5. Windsurf / Codeium IDE

Добавьте в ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "figma-agent": {
      "command": "node",
      "args": ["d:/Code/Figma MCP/apps/mcp-server/dist/cli.js"],
      "env": {
        "FIGMA_AGENT_BRIDGE_HOST": "127.0.0.1",
        "FIGMA_AGENT_BRIDGE_PORT": "3055",
        "FIGMA_AGENT_CHANNEL_ID": "default-channel"
      }
    }
  }
}

📚 Полный справочник MCP-инструментов (50 инструментов)

Все 50 MCP-инструментов строго типизированы через схемы Zod, выполняются детерминированно и предоставляют надёжные метаданные об ошибках.

1. Управление подключением и сессией (4 инструмента)

Имя инструмента

Параметры

Описание

figma.get_connection

нет

Получить текущий статус подключения WebSocket-моста, задержку и возможности сессии.

figma.join_channel

channelId*, secret

Переключиться или присоединиться к сессии определённого канала документа Figma.

2. Инспекция и чтение (6 инструментов)

Имя инструмента

Параметры

Описание

figma.get_document

depth (0–10)

Получить корневую иерархию документа с ограничением глубины.

figma.get_selection

depth (0–10)

Получить текущие выбранные узлы на активном холсте Figma.

figma.get_node

nodeId*, depth

Прочитать подробные свойства и поддерево конкретного узла.

figma.get_nodes

nodeIds*, depth

Пакетно получить несколько узлов по ID.

figma.get_local_components

нет

Список всех переиспользуемых компонентов и вариантов в файле.

figma.get_local_styles

type (PAINT/TEXT/EFFECT/GRID)

Список локальных стилей заливки, текста и эффектов.

3. Создание узлов (4 инструмента)

Имя инструмента

Параметры

Описание

figma.create_frame

width, height, x, y, name, parentId, layoutMode

Создать контейнерный Frame с опциональной авто-раскладкой.

figma.create_text

text*, x, y, width, font ({family, style, size}), name, parentId

Создать текстовый узел с надёжной загрузкой шрифта.

figma.create_rectangle

width, height, x, y, cornerRadius, name, parentId

Создать векторный узел Rectangle.

figma.create_section

width, height, x, y, name, parentId

Создать контейнер организации Section.

4. Изменение узлов и геометрия (6 инструментов)

Имя инструмента

Параметры

Описание

figma.move_node

nodeId, x, y*

Переместить узел в абсолютные координаты.

figma.resize_node

nodeId, width, height*

Изменить размеры узла.

figma.rename_node

nodeId, name

Переименовать слой узла.

figma.delete_node

nodeId*

Удалить узел с холста.

figma.clone_node

nodeId*, parentId, x, y, name

Дублировать существующую иерархию узла.

figma.set_parent

nodeId, targetParentId, index

Переместить и переупорядочить узел в дереве слоёв.

5. Авто-раскладка и адаптивные размеры (2 инструмента)

Имя инструмента

Параметры

Описание

figma.set_auto_layout

nodeId, mode, itemSpacing, padding ({top, right, bottom, left}), primaryAxisAlignItems, counterAxisAlignItems

Настроить адаптивную авто-раскладку, похожую на Flexbox.

figma.set_layout_sizing

nodeId*, horizontal (FIXED/HUG/FILL), vertical (FIXED/HUG/FILL)

Установить поведение размеров контейнера и дочерних осей.

6. Визуальные стили и эффекты (5 инструментов)

Имя инструмента

Параметры

Описание

figma.set_fills

nodeId, fills (массив Solid/Gradient/Image заливок)

Применить фоновые цвета, градиенты и изображения.

figma.set_strokes

nodeId, strokes, strokeWeight, strokeAlign

Применить обводки, толщину и выравнивание.

figma.set_corner_radius

nodeId, radius (число или объект по углам), cornerSmoothing

Установить радиус скругления углов с непрерывным сглаживанием iOS.

figma.set_opacity

nodeId, opacity (0.0 – 1.0)

Настроить прозрачность слоя.

figma.set_effects

nodeId, effects (DROP_SHADOW, INNER_SHADOW, LAYER_BLUR)

Применить тени, внутренние тени и размытие.

7. Компоненты и экземпляры (5 инструментов)

Имя инструмента

Параметры

Описание

figma.create_component

name*, width, height, parentId, componentPropertyDefinitions

Преобразовать узел в переиспользуемый мастер-компонент.

figma.create_instance

componentId*, x, y, properties, parentId

Создать экземпляр варианта компонента.

figma.set_component_properties

nodeId, properties

Переопределить свойства варианта компонента.

figma.detach_instance

nodeId, destructive

Открепить экземпляр компонента в обычные редактируемые фреймы (с защитой).

figma.get_local_components

query, pageOnly

Получить локальные мастер-компоненты и наборы компонентов с вариантами.

8. Переменные и токены дизайна (6 инструментов)

Имя инструмента

Параметры

Описание

figma.get_local_variables

collectionId

Получить список локальных переменных и коллекций токенов.

figma.create_variable

name, resolvedType (COLOR/FLOAT/STRING/BOOLEAN), collectionId, collectionName, initialValue

Создать семантическую переменную Design Token.

figma.set_variable_value

variableId, modeId, value*

Обновить значение переменной для конкретного режима.

figma.bind_variable

nodeId, property (fills/strokes/opacity/itemSpacing/cornerRadius), variableId*

Привязать свойство узла к переменной Design Token.

figma.create_paint_style

name, paints, description

Создать общий стиль заливки в файле.

(Повторно используемый Inspect)

get_local_styles

Запрос общих стилей.

9. Ресурсы, изображения и экспорт (3 инструмента)

Имя инструмента

Параметры

Описание

figma.export_node

nodeId*, format (PNG/JPG/SVG/PDF), scale

Экспортировать узел как изображение в Base64 или строку UTF-8 SVG.

figma.set_export_settings

nodeId, exportSettings

Настроить пресеты экспорта на узле.

figma.set_image_fill

nodeId, imageBase64, scaleMode, opacity

Загрузить и применить заливку изображением из Base64.

10. Текст и типографика (6 инструментов)

Имя инструмента

Параметры

Описание

figma.set_text_content

nodeId, text

Обновить содержимое текстовой строки.

figma.set_font_size

nodeId, fontSize, start, end

Обновить размер шрифта (весь текст или диапазон).

figma.set_font_family

nodeId, family, style, start, end

Изменить семейство шрифтов и начертание с авто-загрузкой шрифтов.

figma.set_text_alignment

nodeId*, horizontal (LEFT/CENTER/RIGHT/JUSTIFIED), vertical

Установить выравнивание текста.

figma.set_line_height

nodeId*, unit (PIXELS/PERCENT/AUTO), value

Установить межстрочный интервал.

figma.set_letter_spacing

nodeId, unit (PIXELS/PERCENT), value

Установить межбуквенное расстояние (трекинг).

11. Оптимизация контекста и обрезка (1 инструмент)

Имя инструмента

Параметры

Описание

figma.compile_context

nodeId, format (markdown/dsl/compact/json), maxTokens, maxDepth

Скомпилировать и сжать деревья Figma с контролем лимита токенов и компактным DSL-представлением.

12. Валидация и доступность (2 инструмента)

Имя инструмента

Параметры

Описание

figma.validate_node

nodeId, rules, includeChildren

Проверить дерево узлов на соответствие WCAG 2.1 (контрастность, правила Auto Layout, масштабы токенов и именование слоёв).

figma.check_contrast

foreground, background, fontSize, isBold

Рассчитать относительную яркость и коэффициент контрастности WCAG 2.1 (AA/AAA).

13. Композитные навыки и пакетное выполнение (3 инструмента)

Имя инструмента

Параметры

Описание

figma.list_skills

нет

Обнаружить доступные высокоуровневые навыки агента.

figma.run_skill

skillName*, payload

Выполнить многошаговый композитный рабочий процесс.

figma.batch_execute

commands*, rollbackOnFailure (по умолчанию: true), stopOnFirstError, transactionId, idempotencyKey

Выполнить несколько команд Figma в атомарной транзакции с разрешением символьных ссылок (ref, parentRef, nodeRef, $ref:name) и автоматическим откатом при сбое.

14. Семантическое разрешение дизайн-системы (1 инструмент)

Имя инструмента

Параметры

Описание

figma.resolve_design_system

type* (component/color/spacing/radius/audit_node), query, intentHint, nodeId

Семантически разрешить человеческий запрос (например, "primary button", "#6366F1", 16px) до соответствующих компонентов/токенов с перцептивным расстоянием $\Delta E$ и аудитом токенов узла.

💡 Пример: Построение иерархической UI-карточки за 1 пакетный вызов

{
  "transactionId": "tx-pricing-01",
  "rollbackOnFailure": true,
  "commands": [
    {
      "command": "figma.create_frame",
      "ref": "card",
      "payload": { "width": 360, "height": 480, "name": "Pricing Card" }
    },
    {
      "command": "figma.create_text",
      "ref": "title",
      "parentRef": "card",
      "payload": { "text": "Pro Plan", "font": { "family": "Inter", "style": "Bold", "size": 24 } }
    },
    {
      "command": "figma.create_rectangle",
      "ref": "btn",
      "parentRef": "card",
      "payload": { "width": 312, "height": 44, "cornerRadius": 8, "name": "CTA Button" }
    },
    {
      "command": "figma.set_fills",
      "nodeRef": "btn",
      "payload": { "fills": [{ "type": "SOLID", "color": "#3B82F6" }] }
    }
  ]
}

Возвращает refMap: { "card": "123:456", "title": "123:457", "btn": "123:458" }.

🤖 Композитные навыки агента

1. skill.create_design_system

Создаёт готовую дизайн-систему за секунды:

  • Создаёт коллекцию переменных: цветовая палитра и токены.

  • Создаёт переменные: color/primary, color/background, color/surface, color/text-primary.

  • Создаёт соответствующие стили заливки.

  • Генерирует адаптивный мастер-компонент Button/Primary с Auto Layout, скруглением углов и привязками токенов.

2. skill.auto_fix_accessibility

Проверяет иерархию целевого макета на нарушения контрастности WCAG 2.1 и автоматически исправляет низкоконтрастные цвета текста на их фоновых поверхностях для достижения соответствия AA.

3. skill.convert_wireframe_to_hifi

Преобразует низкодетализированный каркасный контейнер в отполированную, адаптивную высокодетализированную UI-карточку с Auto Layout, современными заливками поверхностей, мягкими тенями и непрерывным сглаживанием углов.

🧪 Тестирование и верификация

Запустите полный набор тестов (115 проходящих тестов в 27 тестовых файлах):

# Run format checking
pnpm format:check

# Run full build
pnpm build

# Run unit and integration tests
pnpm test

# Strict TypeScript typechecking
pnpm typecheck

# ESLint audit
pnpm lint

Результаты бенчмарков:

  • ⚡ Параллельность WebSocket: 50 одновременных клиентских подключений с burst-сердцебиениями: p95 < 100ms, 0 отключений.

  • 🌳 Масштабирование больших деревьев: Компиляция контекста 6 111 узлов с бюджетом в 1000 токенов: время выполнения < 100ms, снижение контекста более чем на 70% в сценариях бенчмарков.

  • 🛡️ Отказоустойчивость: Автоматическое переподключение и обработка ошибок с флагами retryable при обрыве сокетов.

📄 Лицензия

MIT © 2026 Figma Agent MCP Contributors

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivitySlowing
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • Talk to Figma MCP

    hyun1202
    A
    license
    Not graded
    quality
    D
    maintenance
    An MCP server that enables AI assistants to interact with Figma designs for tasks like reading document info, creating elements, and managing auto layouts. It facilitates real-time design automation via a custom Figma plugin and WebSocket server integration.
    1,129 npm
    MIT

  • figmind

    guhcostan
    A
    license
    Not graded
    quality
    D
    maintenance
    MCP server that connects AI clients to Figma, enabling real-time reading, creation, and modification of designs using natural language.
    MIT