Claude Code и Figma: как перенести интерфейс и вернуть правки в код

Что можно перенести из Claude Code в Figma

Claude Code to Figma захватывает интерфейс, который открыт в браузере: рабочую версию продукта, тестовый стенд или localhost — сервер разработки на вашем компьютере. За один сеанс можно захватить несколько экранов и разместить их на холсте для сравнения. Каждый экран становится редактируемым фреймом: его можно перемещать, дублировать, дорабатывать и снабжать комментариями. Поддерживаемые среды и работу с несколькими экранами Figma описывает в своём анонсе.

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

MCP, или Model Context Protocol, — протокол, через который Claude Code получает доступ к инструментам Figma. За захват отвечает инструмент generate_figma_design. Он может отправить слои в новый или существующий файл Figma Design либо в буфер обмена. Новые файлы с захваченными экранами попадают в черновики вашей команды или организации; содержимое буфера обмена можно вставить на холст. Эти варианты описаны в справочнике инструментов Figma.

Как связать Claude Code и Figma

Для этого процесса нужен удалённый сервер. Он подключается по адресу https://mcp.figma.com/mcp и работает без настольного приложения Figma. В документации есть два способа настройки: рекомендуемый — через плагин — и ручной. Выберите один из них. Настройка удалённого сервера.

Рекомендуемый способ: плагин Figma для Claude Code

Если Claude Code уже установлен, выполните в терминале:

claude plugin install figma@claude-plugins-official

Затем пройдите авторизацию по инструкции Figma:

1. Перезапустите Claude Code, если он был открыт.
2. Введите /plugin, откройте Installed, выберите figma и начните авторизацию.
3. Перейдите в браузер и нажмите Allow access, чтобы разрешить доступ к своему аккаунту Figma.
4. Вернитесь в /plugin и убедитесь, что в разделе Installed Figma отмечена как подключённая.

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

Ручная настройка: одно подключение для всех проектов

Чтобы настроить подключение вручную и использовать его в разных проектах, Figma предлагает следующую команду:

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

Начните новый сеанс Claude Code, введите /mcp, выберите figma, затем Authenticate и Allow Access. Проверьте подключение командой /mcp.

Флаг --scope user делает подключение доступным во всех ваших проектах. В документации Figma также есть команда claude mcp add --transport http figma https://mcp.figma.com/mcp: по умолчанию она настраивает подключение только для текущего проекта. Ручная настройка и область действия подключения.

Какой тариф и тип места в Figma нужны?

У подключения к серверу, записи фреймов и чтения макетов разные требования. Ниже — опубликованные правила Figma, проверенные 12 октября 2026 года:

Источники: доступность MCP, права на захват и запись и лимиты чтения.

Пользователям Starter и владельцам мест View или Collab доступно до 20 вызовов инструментов чтения в месяц. Вызов инструмента — это отдельный запрос, поэтому лимит не означает 20 полных циклов переноса в Figma и обратно. На инструмент захвата generate_figma_design стандартные ограничения частоты вызовов MCP не распространяются. Лимиты чтения и исключение для инструмента захвата.

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

Пример: три экрана онбординга — из кода в Figma и обратно

Допустим, приложение уже работает, а онбординг состоит из трёх экранов: «Добро пожаловать», «Пригласите коллег» и «Первый проект». На этом учебном примере разберём весь цикл: захват экранов, обсуждение дизайна и реализацию изменений.

Соберите все экраны в одном файле

Откройте проект в Claude Code и укажите адрес приложения и место, куда нужно перенести экраны. Например:

Если нужен новый файл, попросите Claude создать его. Если приложение ещё не запущено, попросите запустить локальный сервер. При захвате клиент подготавливает необходимый скрипт и открывает браузер. Первый захват происходит при открытии этого окна. Инструкция Figma по захвату экранов.

Убедитесь, что экран «Добро пожаловать» появился в файле, затем пройдите дальше по приложению. На экранах «Пригласите коллег» и «Первый проект» нажмите Entire screen на панели захвата. Для захвата отдельной части есть Select element. В конце нажмите Open file. Панель захвата и завершение работы.

Мой совет: при первом проходе сохраняйте одинаковый размер области просмотра и отмечайте, какое состояние захватили. Экран с ошибкой валидации и тот же экран с корректно заполненными полями стоит назвать по-разному.

Доработайте пользовательский путь в Figma

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

Эти правки — дизайнерские гипотезы. В частности, нарисованная кнопка пропуска сама по себе не реализует ни права доступа, ни логику переходов. Зафиксируйте принятое решение рядом с согласованным фреймом и включите его в задание на разработку.

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

Передайте согласованные фреймы обратно в Claude Code

Для каждого согласованного фрейма откройте контекстное меню правой кнопкой мыши и выберите Copy link to selection. Вставьте ссылки в Claude Code вместе с заданием на реализацию. Именно такой способ работы с удалённым сервером описан в документации Figma. Использование ссылок на фреймы.

Для нашего примера задание может выглядеть так:

Инструмент Figma get_design_context передаёт агенту информацию о дизайне. В запросе можно указать фреймворк и каталог с существующими компонентами. При работе с удалённым сервером передавайте ссылки на фреймы или слои: простое выделение объекта на холсте не передаёт контекст удалённому серверу. Инструменты для переноса дизайна в код.

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

Пять задач, где такой процесс может окупиться

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

Если команда оформляет переиспользуемые инструкции по дизайну, пригодится наш материал о наборе пользовательских навыков для дизайн-системы в Figma Make. Он посвящён отдельному процессу работы в Figma Make.

Как посчитать выгоду от сокращения перерисовки

Оценивать стоит затраты на подготовку к обсуждению дизайна и повторную разработку. Если команда сейчас воссоздаёт уже реализованные экраны перед их разбором, сравните эти трудозатраты с захватом и доработкой слоёв:

Чистая выгода от одного разбора = (прежние часы на подготовку и переделки − новые часы на захват, доработку слоёв и переделки) × внутренняя стоимость часа − дополнительные расходы на инструменты.

Подставляйте фактически замеренное время. Учитывайте и дополнительные проверки реализации, если новый процесс их требует. Если команда уже использует Claude Code и нужные типы мест Figma, действующие подписки входят в обе стороны сравнения: результат меняют только дополнительные расходы. В Figma возможности места и права доступа к файлу регулируются отдельно, а стоимость подписки Professional зависит от числа мест и периода оплаты. Объяснение тарифов и оплаты от Figma.

Мой критерий: процесс стоит оставить, если он помогает прийти к согласованному изменению с меньшими суммарными усилиями дизайнеров и разработчиков. Быстрый импорт, после которого приходится много исправлять вручную, даёт слабый результат.

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

Перспективная идея — оформить процесс разбора интерфейса в продукт, используя штатное подключение. Ниже — продуктовые гипотезы. Оценки DataForSEO для англоязычных запросов в США, проверенные 12 октября 2026 года, показывают число поисков в месяц, а не количество платящих клиентов.

Самый перспективный вариант: набор для разбора онбординга

Продуктовая команда или небольшое агентство могут заплатить за воспроизводимый способ превратить работающий онбординг в структурированное обсуждение и задание на разработку. Косвенные сигналы спроса — 590 поисков в месяц по запросу «claude code to figma» и 260 по запросу «website to figma». Аудитории этих запросов могут пересекаться.

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

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

Инструмент для проверки заданий на разработку

Команде, которая регулярно передаёт изменения из Figma в Claude Code, может пригодиться небольшой инструмент: до начала реализации он отмечает недостающие ссылки на фреймы, неясные переходы и отсутствие указаний по компонентам. По запросу «Figma to code» — примерно 720 поисков в месяц. Это общий сигнал интереса к задаче, а не подтверждённый спрос на такой инструмент.

Минимальная версия могла бы проверять структурированное задание со ссылками на согласованные макеты, путями к компонентам и критериями приёмки, а затем выдавать список открытых вопросов. Ограничение здесь смысловое: инструмент способен заметить, что правила пропуска шага не описаны, но не может решить, нужно ли вообще разрешать вашим пользователям этот пропуск. Решение остаётся за владельцем продукта.

Чего не решает перенос из кода в Figma и обратно

Рассматривайте этот процесс как осознанный цикл: захват, редактирование, реализация. Figma описывает MCP как источник структурированного контекста дизайна и отправную точку для написания кода; агенту по-прежнему нужны соглашения вашего проекта и чёткие инструкции. MCP не гарантирует готовый код и не исправляет автоматически проблемы реализации. Как Figma объясняет границы возможностей.

Качество захвата тоже бывает разным. Figma называет среди возможных проблемных случаев сложную JavaScript-анимацию, отрисовку через canvas и виртуализированные списки, в которых одновременно отрисовывается лишь часть длинного списка. Если страница целиком переносится плохо, попробуйте захватить отдельный элемент. Искажённые имена CSS-переменных также могут помешать их сопоставлению; при захвате с сервера разработки читаемые имена могут сохраниться. Известные ограничения захвата.

Ради простой правки текста, не требующей дизайнерского решения, я бы не запускал весь цикл. Он полезен там, где сравнение сценария целиком способно повлиять на то, что команда в итоге создаст. Если вам в принципе не подходит совместная работа на холсте Figma, в нашем сравнении альтернатив Figma разобран этот более широкий выбор.

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

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