Figma MCP: Соединение Figma с Claude Code и агентами ИИ-программирования

Создание скриншота фрейма Figma и вставка его в Claude Code — вот как получить нужную атмосферу. Подключение Figma MCP позволяет получить компоненты, соответствующие вашей дизайн-системе вплоть до токена.

Разрыв между этими двумя рабочими процессами составляет около пяти минут на настройку. Большинство дизайнеров этого не делали, потому что во всех руководствах это звучит технически. Но это не так. Это всего лишь одна команда плюс включение одного переключателя внутри Figma. Вот и всё.

После подключения ИИ-агент перестаёт гадать, что означает «зазор в 20 пикселей», и начинает считывать фактический токен отступа, который вы назначили. Он перестаёт придумывать цвета и начинает использовать вашу реальную палитру. Он перестаёт приблизительно воспроизводить вашу кнопку и начинает вызывать ту, которую вы уже создали. Это работает только в том случае, если система проектирования на другом конце реален.

MCP — это переводчик, а не волшебная палочка

MCP означает Протокол контекста модели. Anthropic был выпущен в конце 2024 года. Figma выпустил официальный сервер для него в 2025 году. Каждый полезный инструмент ИИ в 2026 году его поддерживает.

Представьте себе MCP как USB-порт для агентов ИИ. До MCP каждый инструмент, желающий взаимодействовать с моделью ИИ, должен был создавать собственную интеграцию. После MCP инструменты просто передают протокол, и любой агент, поддерживающий MCP, может его прочитать. Figma, GitHub, Slack, Linear, ваша файловая система, базы данных, что угодно. Один протокол, стандартизированный, многоразовый.

Что конкретно делает сервер MCP в Figma: он предоставляет доступ к структурным данным внутри ваших файлов Figma любому подключенному к нему агенту ИИ. Идентификаторы кадров, имена слоев, вложенные компоненты, значения отступов, цветовые переменные, стили типографики, настройки автоматической компоновки — всё это. ИИ считывает то, что фактически содержит ваш файл, а не то, как выглядит JPEG-файл.

MCP — это не магия. Это просто кабель. Работа по-прежнему должна быть качественной с обеих сторон.

Что на самом деле предоставляет сервер Figma MCP

Сервер предоставляет агентам ИИ доступ на чтение к определенному набору ваших данных Figma. Точное знание того, что он может и чего не может видеть, важно как для результатов, так и для безопасности.

| Что может читать ИИ | Почему это важно |

|------------------|----------------|

| Структура фрейма (ID, имена, иерархия) | Агент знает, на что нацелиться |

| Автоматические настройки компоновки (направление, отступ, зазор) | Точное отображение интервалов |

| Ссылки на переменные (цветовые токены, токены интервалов, типографика) | Вывод соответствует вашей системе |

| Экземпляры компонентов и переопределения | Агент вызывает существующие компоненты |

| Стили и содержимое текста | Текст размещается в нужном месте |

| Заливка изображений (только URL-адреса, по умолчанию не пиксельные данные) | Чистые ссылки на изображения |

Что он не может прочитать: личные файлы, на которые вы не дали разрешения, другие командные библиотеки, не связанные с этим файлом, комментарии, историю версий или что-либо за пределами конкретного файла, на который вы его укажете.

Эта область действия важна, потому что это означает, что плохо обученный ИИ не сможет бродить по вашему рабочему пространству Figma. Он читает то, что вы ему передаете, и ничего больше.

Установите его в Claude Code (пять минут)

Если у вас уже запущен Claude Code (если нет, см. Claude Code для дизайнеров), MCP можно установить всего одним изменением конфигурации.

Шаг 1: На рабочем столе Figma перейдите в «Настройки» и включите «Включить локальный сервер MCP» в настройках режима разработчика. Figma запустит сервер на вашем компьютере на порту по умолчанию.

Шаг 2: В терминале откройте файл настроек Claude Code:

claude mcp add figma http://127.0.0.1:3845/mcp --transport http

Эта единственная команда регистрирует локальный сервер Figma MCP в Claude Code. Никакого редактирования JSON, никакого поиска в конфигурационном файле.

Шаг 3: Перезапустите Claude Code. В следующей сессии Claude Code автоматически увидит доступный Figma.

Проверьте с помощью команды: /mcp в сессии Claude Code. Вы должны увидеть Figma в списке.

Чтобы использовать его, вставьте URL-адрес Figma в командную строку. Claude Code обрабатывает кадр через MCP, а не скриншот, и работает с реальной структурой.

Установка в Cursor (также пять минут)

Для пользователей Cursor процесс немного отличается, но принцип тот же.

Шаг 1: То же, что и выше. Включите локальный сервер MCP для Figma на рабочем столе Figma.

Шаг 2: В Cursor откройте «Настройки», перейдите в раздел MCP, нажмите «Добавить сервер MCP». Вставьте:

Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP

Шаг 3: Сохраните и перезапустите Cursor. Figma появится в качестве доступного источника данных на панели агента.

Cursor обрабатывает MCP немного более наглядно, чем Claude Code, с помощью переключателя на основе пользовательского интерфейса для каждого сервера. Функционально оба варианта идентичны: вы вставляете URL-адрес Figma, агент считывает реальный фрейм, вывод соответствует вашей системе.

Пять рабочих процессов, которые он открывает

Точность проектирования и кода. Вы вставляете URL-адрес фрейма Figma. Claude Code извлекает структуру слоев, значения автоматической компоновки, привязки переменных, экземпляры компонентов. Сгенерированный компонент React использует вашу реальную кнопку, вашу реальную карточку, ваши реальные токены отступов. Никаких приближений, никаких вымышленных классов. Это флагманский рабочий процесс, и он сам по себе стоит пятиминутной установки.

Проверка Code Connect. Если вы уже используете функцию Code Connect в Figma (которая сопоставляет компоненты Figma с вашими компонентами кода), MCP позволяет агенту проверять сопоставление при генерации кода. Он не будет создавать новый компонент, дублирующий уже зарегистрированный в Code Connect. Меньше случайных переизданий.

Проверка синхронизации переменных. Допустим, вы переименовали цветовой токен на прошлой неделе. Спросите Claude Code: «Прочитайте фрейм по этому URL-адресу Figma и перечислите все ссылки на переменные, которые не соответствуют нашему текущему файлу токенов». Он выявит расхождение за один проход. Раньше на это уходило 45 минут на обсуждение в Loom с разработчиком.

Резервный вариант: скриншот в компонент. Если MCP не может прочитать файл (принадлежит клиенту, не является общим или не является фреймом автоматической компоновки), агент переключается на анализ изображений. Вы можете использовать MCP для своей работы, скриншоты для разовых клиентских примеров. Один и тот же запрос, оба варианта работают.

Контроль качества дизайна. Обратное направление. Попросите Claude Code сравнить скриншот развернутой страницы с фреймом Figma: «Вот URL рабочей страницы. Вот URL Figma, которому он должен соответствовать. Перечислите визуальные различия». Это позволяет выявить проблему «дизайнер одобрил, но разработчик отправил неправильные отступы» до того, как она попадет в рабочую среду.

| Рабочий процесс | Без MCP | С MCP |

|----------|-------------|----------|

| От дизайна к коду | Основан на ощущениях, требует ручной корректировки | Точность токенов, пригоден для использования с первого раза |

| Code Connect | Отдельный шаг ручной проверки | Автоматическая проверка |

| Изменение переменных | Ручной аудит, часы | Одна строка, минуты |

| Резервный вариант со скриншотом | Единственный доступный вариант | Резервный вариант, если MCP недоступен |

| Контроль качества дизайна | Ручное сравнение | Отчет о различиях за секунды |

Если вам нужны дополнительные описания рабочих процессов ИИ, просмотрите остальную часть Brainy Бумага. Если вы хотите интегрировать MCP в полный конвейер проектирования и кодирования вашей команды, нанять Brainy.

Безопасность: что видит Figma и что видит ваш ИИ

Два отдельных вопроса, оба заслуживают внимания.

Что видит Figma. Сервер MCP работает локально на вашем компьютере, а не на серверах Figma. Figma видит, что вы включили MCP и к каким файлам осуществляется доступ, поскольку аутентификация проходит через вашу сессию Figma. Для корпоративных учетных записей администраторы могут отключить локальный MCP на уровне организации.

Что видит агент ИИ. Любой URL-адрес файла Figma, который вы вставите. Агент не получает доступ к просмотру всего вашего рабочего пространства Figma. Он не видит библиотеки других команд, если вы специально не укажете на них. Он не видит комментарии, историю версий или несвязанные файлы. Каждый запрос ограничен тем, что вы ему передаете.

Что покидает ваш компьютер. Если вы используете Claude Code с API Anthropic, запрашиваемые вами данные кадра отправляются в Anthropic как часть контекста запроса. Это важно, если ваш файл Figma содержит конфиденциальную работу для клиентов или невыпущенные проекты продуктов. Перед подключением MCP к конфиденциальным файлам ознакомьтесь с политикой вашей команды в отношении ИИ.

Для большинства дизайнерских работ это нормально. Для регулируемых отраслей или соглашений о неразглашении с жесткими положениями о данных, проверьте это заранее.

Где Figma MCP все еще не дотягивает

Будьте честны. Это Figma MCP в апреле 2026 года, а не какая-то отполированная будущая версия.

Обработка графических ресурсов ограничена. MCP предоставляет агенту URL-адреса заливки изображений, а не фактические пиксельные данные. Для макетов, где изображение играет важную роль в композиции, агенту по-прежнему приходится гадать.

Прототипы и взаимодействия не переносятся. MCP отображает статическую структуру. Если ваш файл Figma содержит прототипные соединения, состояния при наведении курсора, интеллектуальную анимацию или переключение вариантов, агент ничего из этого не видит. Вы по-прежнему пишете логику анимации вручную.

Плагины не читаются. Если плагин Figma сгенерировал контент в вашем файле (диаграммы, значки, визуализации данных), агент видит результат как статический слой. Он не может восстановить логику плагина.

Производительность снижается при работе с большими файлами. Файл с более чем 500 фреймами обрабатывается дольше, чем файл с 20 фреймами. Для достижения наилучших результатов работайте с отдельными страницами, а не с одним огромным файлом.

Предположения об автоматической компоновке имеют значение. Агент выдает наиболее чистый результат, когда ваши фреймы Figma правильно используют автоматическую компоновку. Макеты со свободным позиционированием и абсолютным позиционированием отображаются плохо. Это проблема дисциплины Figma, а не проблема MCP, но здесь она проявляется наиболее заметно.

Ничто из этого не является критическим недостатком. Все это причины для использования MCP в паре с хорошим оперативное проектирование, а не слепого доверия.

Часто задаваемые вопросы

Можно ли бесплатно использовать Figma MCP?

Да. Сервер MCP встроен в настольную версию Figma без дополнительной платы. Вы платите за Figma и за свой инструмент ИИ (Claude, курсор и т. д.). Само подключение бесплатно.

Работает ли Figma MCP в веб-версии?

Локальный сервер MCP — это функция настольной версии Figma. Пользователи, использующие только веб-версию, пока не имеют к нему доступа. Для серьезной работы по проектированию и кодированию настольная версия в любом случае является лучшим вариантом.

Можно ли использовать MCP с несколькими инструментами ИИ одновременно?

Да. Несколько агентов могут считывать данные с одного и того же локального сервера MCP. Claude Code, Cursor, Claude Desktop и любой другой клиент, поддерживающий MCP, могут подключаться одновременно.

Что произойдет, если я переключусь между файлами Figma во время сессии?

Агент разрешает фрейм по указанному вами URL-адресу. Переключение URL-адресов меняет контекст. Вы можете ссылаться на несколько файлов в одном диалоге без перезапуска чего-либо.

Заменяет ли MCP режим разработчика Figma?

Нет. Режим разработчика — это инструмент проверки, ориентированный на человека. MCP — это уровень данных, ориентированный на агента. Они дополняют друг друга. На самом деле, те же данные, что и в режиме разработчика, MCP предоставляет агенту.

Прекратите делать скриншоты Figma

У каждой команды дизайнеров есть общая плохая привычка: делать скриншот фрейма Figma, вставлять его в ChatGPT или Claude и запрашивать код. В результате всегда получаются вибрационные эффекты, а не токены. Затем вы тратите час на исправление вибрационных эффектов вручную.

Пять минут установки — и этот рабочий процесс мертв. Агент считывает реальный фрейм. Расстояние реальное. Компоненты — это реальные компоненты. Токены — это реальные токены. Код получается с первого раза ближе к готовому к выпуску.

Включите MCP в Figma. Установите коннектор в свой инструмент ИИ. Вставляйте URL-адреса, а не скриншоты.

Разница в качестве выходных данных между «до MCP» и «после MCP» весьма существенна. Это самый прибыльный по минутам инструмент в арсенале современного дизайнера.

Прекратите делать скриншоты Figma.