Быстрый старт#

Русский | 简体中文 | English

Подключите Figma Desktop к ИИ-агенту через локальный MCP-мост.

Поддерживаемые MCP-клиенты (инструкции по настройке): Подключение ИИ-агентов — Cursor, Claude Code, Codex, Qoder, CodeBuddy, Trae.

#Требования

• Figma Desktop (рекомендуется; вкладки браузера могут переходить в сон и разрывать WebSocket)
• Node.js ≥ 20
• pnpm ≥ 9 (для сборки из исходников)
• Агент с поддержкой MCP (Cursor / Claude Code / Codex / Qoder / CodeBuddy / Trae)

#Путь A — опубликованные пакеты (самый быстрый)

#1. Установите плагин

1. Откройте страницу GitHub Releases
2. Скачайте figma-agent-plugin-vX.Y.Z.zip (версия должна совпадать с версией MCP, которую вы будете запускать)
3. Распакуйте архив
4. Figma Desktop → Plugins → Development → Import plugin from manifest…
5. Выберите распакованный manifest.json
6. Запустите Plugins → Development → Figma Agent Kit

После запуска MCP убедитесь, что индикатор состояния моста зелёный (либо переподключается):

Используйте элемент управления minimize в заголовке для компактного окна, показывающего только выделение:

Меню с шестерёнкой (язык, модель, промпты, обновления):

#2. Настройте MCP-сервер

Полные инструкции для каждого клиента: Подключение ИИ-агентов (Cursor, Claude Code, Codex, Qoder, CodeBuddy, Trae).

Краткий пример для Cursor — ~/.cursor/mcp.json или .cursor/mcp.json проекта:

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

Пользовательский порт (должен совпадать со сборкой плагина):

"env": { "FIGMA_AGENT_MCP_PORT": "1998" }

После редактирования перезапустите агент / MCP-серверы. В панели MCP Cursor должно отображаться 37 активных инструментов:

#3. Быстрая проверка

Попросите агента:

1. list_files — должен отображаться открытый вами файл
2. get_selection — сначала выделите фрейм
3. get_node / get_screenshot — проверьте путь чтения
4. При необходимости save_screenshots с scale: 3, compress: true

#Путь B — разработка из исходников

git clone https://github.com/ChinaCarlos/figma-agent-kit.git
cd figma-agent-kit
pnpm install
pnpm build:all

Импортируйте плагин из:

packages/figma-agent-plugin/manifest.json

Запустите MCP вручную (необязательно при итеративной разработке):

pnpm start:mcp

Либо укажите Cursor на собранный бинарный файл:

{
  "mcpServers": {
    "figma-agent-mcp": {
      "command": "node",
      "args": ["/ABS/PATH/figma-agent-kit/packages/figma-agent-mcp/dist/index.js"]
    }
  }
}

Режим наблюдения:

pnpm dev          # plugin
pnpm dev:mcp      # MCP TypeScript watch

После изменений UI/моста: перезагрузите плагин в Figma и перезапустите MCP-клиенты.

#Синхронизация порта

Стандартный порт моста — 1998 из bridge.config.json.

pnpm sync:bridge   # also runs on predev / prebuild

Если вы изменили порт: синхронизируйте → пересоберите плагин → повторно импортируйте / перезагрузите его → перезапустите MCP с соответствующим FIGMA_AGENT_MCP_PORT.

#Необязательно: ИИ в плагине

Для переименования и визуальной группировки требуется API-ключ, совместимый с OpenAI, в настройках плагина. См. Возможности ИИ.
Инструментам MCP-моста этот ключ не требуется.

#Экспорт срезов (интерфейс плагина)

См. Экспорт срезов для предварительного просмотра 1× / PNG 3× + ZIP из панели плагина.

#Следующие шаги