Claude Code to Figma: код теперь живёт на канвасе
Знакомая ситуация: вы накидали интерфейс в Claude Code, подняли локальный сервер, покликали — всё работает, выглядит неплохо. И тут нужно показать это команде. Что делаем?
Скриншоты в Slack, запись экрана через Loom, или классическое «подними у себя билд и посмотри». Дизайнер смотрит скриншот и говорит: «А можно чуть левее? И попробовать другой вариант карточки?». А вы понимаете что для «чуть левее» нужно лезть в код, менять стили, пересобирать, снова делать скриншот... И так по кругу.
Figma и Anthropic на прошлой неделе выкатили штуку которая этот цикл ломает. Называется Claude Code to Figma: берёт то, что рендерится в браузере, и превращает в редактируемые фреймы прямо на канвасе Figma. Не скриншоты. Не картинки. Полноценные слои — двигай, дублируй, перекрашивай.
Короче давайте разберёмся как это работает.
Что происходит под капотом
Строится всё на Figma MCP Server — это протокол, через который Claude Code общается с Figma. MCP (Model Context Protocol) — по сути мост между LLM и внешними сервисами. Claude Code через этот мост умеет читать дизайн из Figma и, что самое интересное, записывать туда результат из браузера.
Когда вы просите Claude Code «отправить UI в Figma», происходит вот что:
- Claude поднимает локальный сервер вашего приложения (если ещё не поднят)
- Инжектит специальный скрипт в браузер
- Открывает окно с приложением, там появляется тулбар захвата
- По нажатию «Entire screen» снимает текущее состояние DOM
- Конвертирует в Figma-совместимые слои и отправляет в файл
Это не растровый скриншот, что важно. Figma получает структурированные данные — фреймы, текстовые слои, цвета, отступы. Всё можно редактровать как обычный дизайн.
Настройка за 5 минут
Понадобится:
- Claude Code (CLI от Anthropic, ставится через npm)
- Figma Desktop (именно десктопное приложение — браузерная версия не подойдёт)
- Figma Dev или Full seat (нужна платная лицензия)
Подключаем Figma MCP одной командой:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
Всё. Серьёзно это вся настройка.
Примеры промптов
Работа идёт через обычные текстовые промпты в Claude Code. Тут как по мне, самое кайфовое начинается.
Захватить UI в новый файл Figma:
Start a local server for my app and capture the UI in a new Figma file.
Claude сам поднимет сервер, откроет браузер, сделает захват и спросит в какую организацию/команду положить файл.
Захватить в существующий файл:
Start a local server for my app and capture the UI in https://www.figma.com/design/abc123/MyProject
Скопировать в буфер обмена (если хотите сами выбрать куда вставить):
Start a local server for my app and capture the UI to my clipboard.
Самый короткий варинт (если сервер уже запущен):
Send this to Figma
Лайфхак: если захватываете несколько страниц подряд Claude запоминает контекст. После первого промпта с полной ссылкой на файл можно просто писать:
Also capture the login page Now capture checkout
Всё полетит в тот же файл. Не нужно каждый раз повторять URL.
Зачем это реально полезно
Допустим вы пилите новый онбординг. Сели, накидали в Claude Code три экрана: приветствие, выбор интересов, финальный шаг. Подняли на localhost, потыкали — работает.
Раньше дальше начиналась боль. А теперь:
- Захватываете все три экрана в один Figma-файл
- Дизайнер открывает и видит реальный флоу, не абстрактные макеты
- Дублирует фрейм второго шага, пробует альтернативный лейаут
- PM ставит комментарий: «А давайте объединим шаги 2 и 3»
- Вы видите три варианта рядом, обсуждаете и выбираете лучший
И вот тут самое главное — обратный путь тоже работает. Команда выбрала финальный вариант в Figma, вы берёте ссылку на фрейм кидаете её в Claude Code с промптом типа «implement this design» — и MCP-сервер передаёт Claude всю инфу о дизайне: компоненты, переменные, стили, структуру. Код генерируется с учётом того что нарисовано.
Получается полноценный roundtrip. Код → канвас → обсуждение → канвас → код. Без скриншотов, без «а покажи мне вот тот экран ещё раз».
Чего ожидать не стоит
Честно говоря есть нюансы, и лучше знать о них заранее.
Claude Code работает напрямую с вашим кодом. Это не песочница. Изменения которые он вносит — это изменения в реальных файлах, которые вы потом будете шипить. Так что делайте коммиты перед экспериментами, не будьте как я.
Каждый экран захватывается отдельно. Для сложного приложения с десятком страниц придётся прокликать каждую — это занимает время и расходует токены.
Визуального редактирования «туда-обратно» в реальном времени пока нет. Подправили дизайн в Figma — нужно явно попросить Claude Code «подтянуть» изменения. Не Figma-to-code в один клик, а скорее осознаный шаг.
Ну и десктопное приложение Figma обязательно. Если привыкли в браузерной версии работать — придётся переключиться.
А что с конкурентами?
Есть же html.to.design, есть плагины для захвата страниц. Чем отличается?
Главное — интеграция на уровне протокола. Сторонние плагины захватывают визуальное представление страницы. А Figma MCP читает семантическую структуру: какие компоненты используются, какие переменные дизайн-системы задействованы, как связаны стили. При обратном пути (из Figma в код) эта информация используется для генерации более качественого кода.
Плюс ничего дополнительно не надо ставить в браузер — всё работает через одну точку интеграции в терминале.
Итого
Claude Code to Figma — не революция, а логичный следующий шаг. Код и дизайн перстают быть параллельными вселенными с синхронизацией через скриншоты и Loom-видео.
Мой совет: попробуйте на ближайшей задаче где нужно «показать команде». Вместо скриншота в Slack — захватите экран в Figma и скиньте ссылку. Разница в качестве обсуждения будет заметна сразу.
Ссылки для старта: