de en es ja ko ru zh

Figma Agent MCP

Name: Figma Agent MCP
Author: TrungLee003

by TrungLee003

Overview Schema Related Servers Score Discussions

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 — 48 Tools)      │
│  - Tool Registry & Validation  - Session Router             │
│  - Context Compiler (>70% cut) - Composite Skills Runtime   │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────┐
│       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                        │
└─────────────────────────────────────────────────────────────┘

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

🔒 Локальность и безопасность: По умолчанию привязывается к 127.0.0.1. 128-битное секретное сопряжение каналов. Никакого произвольного выполнения JavaScript внутри Figma.
🧩 48 детерминированных MCP-инструментов: Полное покрытие: чтение, создание, изменение, Auto Layout, визуальные стили, компоненты, переменные/токены, типографика и экспорт.
⚡ Компилятор контекста (сокращение токенов >70%): Сжимает массивные деревья узлов в семантический Markdown или компактный DSL с адаптивным ограничением глубины и контролем бюджета токенов менее чем за 100 мс.
🛡️ Встроенная проверка и движок WCAG 2.1: Расчет относительной яркости и контрастности (AA/AAA) для обычного текста, крупного текста и UI-компонентов; линтер Auto Layout; аудитор сетки токенов 4px/8px.
🔄 Атомарное пакетное выполнение: Последовательное выполнение конвейеров команд с восстановлением после ошибок stopOnFirstError или continueOnError.
🚀 Готовые навыки агента: Предварительно упакованные композитные рабочие процессы для мгновенной генерации дизайн-системы, автоматического исправления доступности WCAG и преобразования вайрфреймов в высокодетализированные карточки.

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

figma-agent-mcp/
├── apps/
│   ├── mcp-server/        # 48 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. Запуск сервера Bridge

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

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

Откройте Figma Desktop.
Перейдите в Plugins → Development → Import plugin from manifest...
Выберите apps/figma-plugin/manifest.json.
Запустите плагин 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-инструментов (48 инструментов)

1. Подключение и сессия (2 инструмента)

Имя инструмента	Параметры	Описание
`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 с опциональным Auto Layout.
`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. Auto Layout и адаптивные размеры (2 инструмента)

Имя инструмента	Параметры	Описание
`figma.set_auto_layout`	`nodeId`, `mode`, `itemSpacing`, `padding` ({top, right, bottom, left}), `primaryAxisAlignItems`, `counterAxisAlignItems`	Настроить адаптивный Auto Layout, подобный 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. Компоненты и экземпляры (4 инструмента)

Имя инструмента	Параметры	Описание
`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`*	Отсоединить экземпляр компонента в обычные редактируемые фреймы.

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

Имя инструмента	Параметры	Описание
`figma.get_local_variables`	`collectionId`	Список локальных переменных и коллекций токенов.
`figma.create_variable`	`name`, `resolvedType` (COLOR/FLOAT/STRING/BOOLEAN), `collectionId`, `collectionName`, `initialValue`	Создать семантическую переменную токена дизайна.
`figma.set_variable_value`	`variableId`, `modeId`, `value`*	Обновить значение переменной для конкретного режима.
`figma.bind_variable`	`nodeId`, `property` (fills/strokes/opacity/itemSpacing/cornerRadius), `variableId`*	Привязать свойство узла к переменной токена дизайна.
`figma.create_paint_style`	`name`, `paints`, `description`	Создать общий стиль заливки в файле.
(Повторно используемый инспект)	`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 с контролем токен-бюджета (сжатие >70%).

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. Составные навыки и пакетное выполнение (2 инструмента)

Имя инструмента	Параметры	Описание
`figma.list_skills`	нет	Обнаружение доступных высокоуровневых навыков агента.
`figma.run_skill`	`skillName`*, `payload`	Выполнение многошагового составного рабочего процесса.
`figma.batch_execute`	`commands`*, `stopOnFirstError`	Выполнение нескольких команд Figma в одной атомарной пакетной транзакции.

🤖 Составные навыки агента

1. `skill.create_design_system`

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

Создаёт коллекцию переменных: Цветовая палитра и токены.
Создаёт переменные: color/primary, color/background, color/surface, color/text-primary.
Создаёт соответствующие стили заливки (Paint Styles).
Генерирует адаптивный мастер-компонент 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 узлов с бюджетом в 1,000 токенов: время выполнения < 100ms, степень сжатия >70%.
🛡️ Отказоустойчивость: Автоматическое переподключение и обработка ошибок с флагами retryable при отключениях сокетов.

📄 Лицензия

This server cannot be installed

license - not tested

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Figma MCP Server
The Figma MCP server brings Figma design context directly into your AI workflow.
microservices.sh
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
mcp
MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/TrungLee003/figma-agent-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server