Figma MCP — это мост между файлом дизайна в Figma и ИИ-агентом: протокол открывает агенту доступ к макету, компонентам, слоям и тексту интерфейса напрямую, минуя экспорт картинок и ручной пересказ задачи. Агент получает структуру страницы как данные и держит связь с оригиналом макета, пока дизайнер правит файл. Дальше — какие сценарии это открывает компании, как подключить связку к Claude Code или Cursor и где провести границу доступа.
Что открывает связка
Коротко: агент через Figma MCP читает макет напрямую — слои, текст, цвета, структуру компонентов — и работает с живым файлом, пока дизайнер вносит правки.
Раньше связка дизайнера и разработчика держалась на экспорте: скриншот, PNG со слоями, комментарий в задаче. Агент в такой схеме видел картинку и додумывал детали — отступы, названия переменных, состояния кнопки. MCP меняет канал: агент подключается к файлу Figma как клиент, получает дерево узлов, стили и токены дизайна структурированно и сверяет код с макетом по актуальным данным, а версия файла остаётся живой. Сам протокол разобран в статье что такое MCP и зачем он бизнесу — здесь смотрим частный случай для дизайна.
- Вёрстка по макету: агент берёт разметку, отступы и стили из файла и пишет компонент под целевой стек
- Проверка текстов интерфейса: сверка подписей кнопок, ошибок форм и микрокопии с макетом перед релизом
- Экспорт токенов дизайна: цвета, шрифты, отступы уходят в код одним проходом вместо ручной выписки
- Синхронизация с дизайн-системой: агент замечает, когда компонент в макете разошёлся с библиотекой в коде
До связки цикл выглядел так: дизайнер выгружает картинку, разработчик открывает Figma отдельно и вручную снимает значения отступов и цветов, а тексты кнопок копирует построчно из комментариев в задаче. Каждый шаг — источник расхождений: значение округлили, комментарий устарел, макет обновили уже после выгрузки. Структурированный доступ к файлу убирает промежуточные звенья: агент смотрит туда же, куда смотрит дизайнер, и в тот же момент.
Подключение к агенту
Принцип одинаков для Claude Code и для Cursor: в среде агента регистрируется MCP-сервер Figma, агент получает токен доступа к нужным файлам и права — что можно читать, а что менять запрещено. Общий разбор подключения MCP-серверов — в статье как подключить MCP к Claude и в материале про какие MCP-серверы подключать первыми. Права настраивайте узко, на уровне конкретного файла или проекта — тогда токен одной команды разработки трогает только те макеты, над которыми она работает.
- Создайте токен доступа в личном кабинете Figma и ограничьте его нужными файлами или проектом
- Установите MCP-сервер Figma в среде агента (Claude Code, Cursor) через конфигурацию клиента
- Выдайте агенту права на чтение — вёрстка и проверка текстов идут без права правки макета
- Проверьте связь тестовым запросом: попросите агента описать структуру одной страницы файла
- Закрепите регламент — какие файлы агент видит и кто выдаёт токен новым проектам
Рабочие сценарии
На практике внедрений связка чаще всего закрывает четыре задачи — от вёрстки до проверки дизайн-системы:
| Задача | Что делает агент | Что проверяет человек |
|---|---|---|
| Вёрстка по макету | Берёт разметку и стили, пишет компонент под стек | Отступы, адаптив, состояния наведения |
| Проверка текстов | Сверяет подписи и ошибки форм с макетом | Тон текста и юридические формулировки |
| Экспорт токенов | Выгружает цвета, шрифты, отступы в переменные кода | Совпадение с актуальной дизайн-системой |
| Синхронизация с системой | Находит компоненты, разошедшиеся с библиотекой | Решение — обновить компонент или макет |
| Документация UI-кита | Собирает описание компонентов и примеры использования | Актуальность относительно последней версии макета |
Если вёрстка и макет расходятся уже на втором спринте команды, разговор про агента-помощника — логичный следующий шаг.
Нужен агент, который держит код в связке с макетом?
Риски доступа
Файл Figma часто содержит больше, чем интерфейс: скриншоты переписки в макетах поддержки, тестовые данные клиентов в карточках, черновики раздела с персональными данными. Агент с широким токеном доступа читает всё это заодно с вёрсткой, и здесь граница ответственности переходит от протокола к человеку, который выдаёт права.
Условный пример: агенту выдали токен на всё рабочее пространство компании, а задача звучала узко — свериться с макетом карточки товара. Заодно с ней агент прочитал черновик другого раздела, где в примерах остались реальные имена клиентов поддержки. Технической ошибки здесь нет — агент действовал в границах выданных прав. Ошибка — в самой границе токена, которую выставил человек.
- Токен ограничивайте конкретным файлом или проектом вместо всей рабочей области команды
- Персональные данные и реальные примеры клиентов держите вне макетов — используйте условные подписи
- Право на запись давайте отдельно от чтения и только под конкретную задачу
- Логируйте обращения агента к файлам — так проще свериться при инциденте, чем разбираться постфактум
Начните с одного файла и токена только на чтение. Дайте агенту задачу проверить тексты интерфейса — риск низкий, результат понятный, и на этом примере видно, где связка держит скорость, а где нужен человек. Подробнее о собственном контуре доступа — в статье свой MCP-сервер: как дать Claude доступ к вашим данным.
Итог для команды
Figma MCP оставляет решения дизайнеру и разработчику — он убирает разрыв между макетом и кодом, который раньше закрывали скриншотами и переписыванием руками. Компании, где дизайн меняется каждую неделю, связка экономит больше всего: агент видит правки в момент публикации макета, а команда экономит круг согласований.
Путь внедрения обычно короче, чем кажется на старте: один файл, токен на чтение, задача с понятным критерием успеха — совпал текст на кнопке с макетом или разошёлся. Когда команда видит результат на этом масштабе, расширение на второй и третий проект — вопрос недели, а отдельный цикл согласований с безопасностью остаётся редкостью.
- Начинайте с одного проекта и токена на чтение, расширяйте права по мере доверия
- Держите регламент в одном документе: кто выдаёт токены и какие файлы открыты агенту
- Похожий принцип работает и для других инструментов — Blender, Unity, собственные MCP-серверы компании
По нашему опыту внедрений, после подключения Figma MCP на планёрках заметно реже звучит спор «какая версия макета актуальна», а время ревью вёрстки освобождается для содержательных вопросов — сверку пикселей забирает агент.
Если хотите собрать такого агента под свой стек и дизайн-систему, обсудите задачу на странице ИИ-агенты для бизнеса.