Figma MCP: как связать Claude с макетами Figma

Автор: Редакция AI-библиотеки · Дата: 21.10.2026 · Проверено: 21.10.2026 · Время чтения: 8 минут

Figma MCP — это официальный сервер Figma, через который ИИ-агенты вроде Claude Code читают макеты и пишут в них. Агент получает структуру фрейма, переменные, компоненты и скриншот, генерирует по ним код, а с полным местом в Figma может создавать и править слои прямо на холсте. Ниже — как подключить сервер к Claude Code и Claude Desktop, что он умеет, какие нужны план и место в Figma и сколько вызовов даёт каждый план. Всё сверено с документацией Figma для разработчиков и справочным центром Figma на 20 октября 2026 года.

Кратко

• MCP (протокол контекста модели, Model Context Protocol) — стандарт, по которому агент подключается к внешним сервисам. Figma MCP — сервер этого стандарта от самой Figma.
• Два варианта: удалённый сервер по адресу https://mcp.figma.com/mcp (рекомендуемый) и локальный через настольное приложение Figma (для отдельных корпоративных сценариев).
• В Claude Code рекомендуемый способ — плагин Figma: claude plugin install figma@claude-plugins-official. Ручной способ — claude mcp add --transport http figma https://mcp.figma.com/mcp.
• Лимиты зависят от плана и места: на плане Starter и на местах View и Collab — до 20 вызовов в месяц, на местах Full и Dev — от 200 вызовов в день.
• Запись на холст требует удалённого сервера и места Full, чтобы писать за пределами черновиков. На время беты бесплатна, позже станет платной по объёму.

Что умеет Figma MCP

По документации Figma, сервер закрывает несколько сценариев:

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

Главный инструмент для переноса дизайна в код — get_design_context. Другие инструменты дополняют его: get_screenshot даёт снимок, get_variable_defs — переменные, get_metadata — структуру слоёв, search_design_system ищет компоненты и стили в библиотеках. Для записи на холст служат use_figma и generate_figma_design. Называть инструмент в запросе не обязательно — агент выбирает сам.

Удалённый или локальный сервер

	Удалённый сервер	Локальный сервер
Где работает	на стороне Figma, https://mcp.figma.com/mcp	через настольное приложение Figma
Нужно ли приложение Figma	нет	да
Для кого	для большинства пользователей	для отдельных задач организаций и предприятий
Требования к месту	зависят от функции	место Dev или Full на планах Professional, Education, Organization, Government или Enterprise
Запись на холст	да	нет

Figma прямо рекомендует удалённый сервер: у него самый широкий набор функций, и он не требует запущенного приложения.

Как подключить Figma MCP к Claude Code

Нужен установленный Claude Code — инструкция в статье как установить Claude Code.

Способ 1. Плагин Figma (рекомендуемый)

Плагин содержит настройки сервера и навыки (skills) Figma — готовые инструкции, которые помогают агенту надёжнее работать с холстом.

1. В терминале выполните:

claude plugin install figma@claude-plugins-official

2. Если Claude Code был запущен, перезапустите его.
3. Введите /plugin, стрелкой вправо перейдите на вкладку Installed, выберите сервер figma и нажмите Enter.
4. Нажмите Enter ещё раз — откроется браузер. Нажмите Allow access, чтобы дать Claude Code доступ к аккаунту Figma.
5. Вернитесь в Claude Code и снова введите /plugin: на вкладке Installed сервер figma будет отмечен как подключённый.

Если команда установки не срабатывает, возможно, ваша организация запретила установку плагинов — тогда используйте ручной способ или обратитесь к администратору Claude.

Способ 2. Добавить сервер вручную

Ручной способ не ставит навыки Figma — их можно добавить отдельно.

claude mcp add --transport http figma https://mcp.figma.com/mcp

По умолчанию сервер добавляется только в текущий проект. Чтобы он был доступен во всех ваших проектах, добавьте --scope user:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Дальше:

1. Начните новую сессию Claude Code.
2. Введите /mcp и выберите figma.
3. Выберите Authenticate — откроется браузер, нажмите Allow access.
4. В Claude Code появится сообщение «Authentication successful. Connected to figma».
5. Для проверки снова введите /mcp.

Подробнее об областях подключения (local, project, user) — в статье как подключить MCP к Claude Code.

Как подключить к Claude Desktop

В таблице клиентов Figma для Claude Desktop указан коннектор Figma: сервер подключается в настольном приложении Claude, а вход проходит через аккаунт Figma. Пошаговая инструкция для каждого клиента — на странице установки удалённого сервера в документации Figma.

Подключиться к Figma MCP может не любая программа: только клиенты из каталога Figma MCP. На дату сверки в нём есть, среди прочих, Claude Code, Claude Desktop, Codex, Cursor, VS Code, Gemini CLI, Warp и Xcode (бета).

Какие нужны план и место в Figma

Справочный центр Figma указывает, что сервер доступен на планах Starter, Professional, Education, Organization, Government и Enterprise. Работать можно только с файлами, к которым у вашего аккаунта уже есть доступ.

Лимиты вызовов на дату сверки:

Место	Starter	Professional	Organization	Enterprise
View, Collab	до 20 в месяц	до 20 в месяц	до 20 в месяц	до 20 в месяц
Full, Dev	—	до 200 в день, 10 в минуту	до 200 в день, 15 в минуту	до 600 в день, 20 в минуту

На плане Education лимиты такие же, как у мест Full и Dev на Professional. Лимиты считаются для инструментов, которые читают данные из Figma. Инструменты, которые пишут в файлы, например create_new_file и generate_figma_design, в лимит не входят.

Отдельно про кредиты ИИ Figma: большинство инструментов сервера их не тратит. Тратят generate_image — за каждую картинку, как генерация в Figma Design, — и обращения к агенту Figma Make.

Как писать запросы

Агент сам выбирает инструменты, но результат лучше, если в запросе есть ссылка на конкретный фрейм и понятная цель. Примеры запросов:

• «Сверстай этот фрейм на React с нашими компонентами из src/components» и ссылка на фрейм.
• «Выпиши все переменные цветов и отступов из этого макета».
• «Создай в Figma экран входа по нашей дизайн-системе: поле email, поле пароля, кнопка».

Документация Figma советует не выбирать большие тяжёлые фреймы целиком — лучше давать агенту отдельные экраны или компоненты.

Частые ошибки

Нет доступа к файлу. Проверьте, что ссылка ведёт на файл Figma Design, FigJam или Figma Make, и что вы вошли тем аккаунтом, у которого есть доступ к файлу. Попросите агента вызвать whoami — инструмент покажет email, планы и тип места.

Закончились вызовы. На Starter и на местах View или Collab это 20 вызовов в месяц. Поднять лимит можно, только сменив место или план.

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

Нужен ли платный план Figma? Нет, сервер работает и на Starter, но с лимитом 20 вызовов в месяц. Для регулярной работы нужно место Full или Dev на платном плане.

Нужно ли держать открытым приложение Figma? Для удалённого сервера — нет. Приложение нужно только для локального сервера.

Может ли агент менять макеты? Да, через запись на холст с удалённым сервером. Чтобы писать за пределами черновиков, нужно место Full.

Что дальше

Обзор других ИИ-функций Figma — в статье нейросеть для Figma. Общая логика MCP — в материале что такое MCP.

Актуально на 20 октября 2026 года. Набор инструментов и лимиты Figma меняет — перед работой сверьтесь с документацией.

Источники

1. Figma Learn — Guide to the Figma MCP server: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server
2. Figma Developer Docs — Figma MCP Server, Introduction: https://developers.figma.com/docs/figma-mcp-server/
3. Figma Developer Docs — Set up the remote server: https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
4. Figma Developer Docs — Tools and prompts: https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
5. Figma Developer Docs — Rate limits and access: https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
6. Claude Code Docs — Connect Claude Code to tools via MCP: https://code.claude.com/docs/en/mcp