Figma MCP — макет внутри агента

Figma MCP — официальный сервер Figma, который по протоколу MCP отдаёт ИИ-агенту содержимое макета: разметку фрейма, переменные, компоненты и ассеты, а также позволяет писать на холст. Подключается за одну команду к Claude Code, Cursor, VS Code и Codex по адресу https://mcp.figma.com/mcp с входом через OAuth. Проверено по документации для разработчиков Figma 19 августа 2026 года.

Часть 1 · Знакомство

Что даёт агенту MCP-сервер Figma

Обычный сценарий «дизайн в код» до этого выглядел так: скриншот в чат и просьба повторить. Модель видела пиксели и восстанавливала вёрстку на глаз — с выдуманными отступами и цветами, которых нет в дизайн-системе. MCP-сервер меняет вход: агент запрашивает у Figma настоящие данные файла и работает с именами переменных, вариантами компонентов и настройками авто-макета.

• Код из выбранного фрейма. Выделяете кадр в Figma — агент получает его разметку и собирает по ней компонент.
• Контекст дизайн-системы. Переменные, стили и библиотеки подтягиваются в редактор, поэтому код ложится на существующие токены.
• Запись на холст. Агент создаёт и правит кадры, компоненты, переменные и авто-макет прямо в файле Figma, а в FigJam — стикеры, секции и связи.
• Ресурсы из Make. Код из файлов Figma Make уходит в контекст модели — удобно при переносе прототипа в продакшен.
• Связка Code Connect. Сопоставление узлов макета с реальными компонентами репозитория, чтобы агент переиспользовал ваш код, а не писал похожий.

Часть 2 · Подключение

Как подключить сервер к своему агенту

# Claude Code, предпочтительный путь — плагин с настройками и скилами
claude plugin install figma@claude-plugins-official

# Claude Code, вручную (--scope user делает сервер общим для всех проектов)
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

# Codex
codex mcp add figma --url https://mcp.figma.com/mcp

После добавления сервер нужно авторизовать. В Claude Code это команда /mcp, выбор figma, пункт Authenticate и подтверждение доступа в браузере; вернувшись в терминал, вы увидите сообщение об успешном подключении, а повторный /mcp покажет статус. Cursor ставит плагин командой /add-plugin figma прямо в чате агента — в комплекте идут и настройки сервера, и правила обработки ассетов.

В VS Code сервер прописывается конфигом. Палитра команд, затем MCP: Open User Configuration для доступа во всех проектах или MCP: Open Workspace Folder MCP Configuration для одного — и блок в mcp.json:

{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Часть 3 · Инструменты

Что именно умеет сервер

Отдельным блоком идёт Code Connect: get_code_connect_suggestions предлагает пары «узел макета ↔ компонент репозитория», add_code_connect_map и send_code_connect_mappings закрепляют их. Это самая недооценённая часть связки: без карты соответствий агент честно сгенерирует новый компонент, хотя нужный уже есть в коде.

Часть 4 · Ограничения

Лимиты Figma MCP по планам и местам

Таблица сверена по документации Figma 19 августа 2026 года. Компания оставляет за собой право менять лимиты.

Практический вывод простой: для настоящей работы нужно место Dev или Full. Дизайнер с местом Collab упрётся в шесть вызовов за месяц — это буквально пара запросов. Под лимиты попадают инструменты чтения; запись в файл через add_code_connect_map, generate_figma_design и служебный whoami от них освобождены.

Часть 5 · Свои сценарии

Скилы под сервер Figma

У Figma есть отдельная инструкция, как писать скилы именно под этот сервер. Смысл в том, чтобы агент расширял вашу дизайн-систему, а не обходил её: сначала искал в библиотеках, потом применял ваши имена переменных и режимы, потом собирал экран из настоящих компонентов. Типичные сценарии — перевод разрозненных значений в переменные, сборка наборов компонентов по конвенциям команды, генерация экранов из готовой библиотеки с проверкой на расхождения.

1. Заведите папку. В Claude Code это .claude/skills/имя-скила/ с файлом SKILL.md; в Codex скил создаёт команда $skill-creator, в Cursor — /create-skill.
2. Назовите его стабильно. Нижний регистр через дефис, имя совпадает с именем папки — например convert-to-variables.
3. Опишите, когда применять. В описании должен быть ответ на вопрос «в какой ситуации», а не только «что делает».
4. Дайте порядок шагов. Нумерованная инструкция в повелительном наклонении: сначала искать в библиотеке, потом привязывать заливки к переменным, потом предпочитать семантические токены.
5. Добавьте пример и краевые случаи. Что делать, если компонент не нашёлся, соответствие неоднозначно или тип узла не поддерживается.

Большой скил не обязан жить в одном файле: рядом кладутся папки scripts/ для вспомогательного кода, references/ для длинных справочников вроде таксономии переменных и assets/ для шаблонов. Общая механика формата и порядок установки разобраны в гайдах про скилы Claude Code и установку скила, а готовые дизайнерские скилы собраны в подборке скилов для дизайна и UI/UX.

Вопросы

Частые вопросы

Читать дальше

Соседние гайды