Figma превратила канвас в среду для кода: что дают code layers

24 июня 2026 года на конференции Config 2026 компания Figma представила code layers — новый тип слоя в Figma Design, который размещает интерактивный код прямо на канвасе рядом с обычными дизайн-фреймами. Анонс вошёл в серию обновлений, посвящённых слиянию дизайна и разработки, и подробно описан в официальном блоге Figma и в итоговом обзоре Config 2026.

Суть изменения проста, но последствия заметные. Раньше интерактивный прототип, написанный кодом, жил отдельно от макета: в репозитории, в песочнице, в чате с AI-ассистентом. Теперь его можно положить на канвас как обычный слой, двигать, масштабировать, комментировать и сравнивать с альтернативами — всё в том же файле, где лежат компоненты и переменные.

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

Что такое code layers

Code layer — это слой в Figma Design, внутри которого выполняется настоящий код, а не его статичная картинка. Создать такой слой можно несколькими способами: из панели инструментов, из существующего фрейма или попросив об этом встроенного AI-агента Figma. Дальше доступны два пути: начать с шаблона и описать желаемый результат текстом либо подключить существующий код — импортировать репозиторий с GitHub или загрузить локальную папку.

Ключевое отличие от привычных прототипов в том, что code layer остаётся «живым». Его можно перемещать по канвасу, менять размер, и код реагирует на эти действия. Это приближает работу с интерактивным результатом к привычной механике дизайнера: дублировал вариант, поставил рядом, сравнил.

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

Прототип и code layer: в чём разница

Чтобы различие было наглядным, сведём ключевые параметры в одну таблицу.

Этот сдвиг — часть более широкого процесса слияния дизайна и кода, который определяет веб-дизайн 2026 года.

Как это меняет совместную работу

Figma прямо называет проблему, которую решает: AI-агенты расширили круг людей, способных собрать работающий интерфейс, но сам процесс часто происходит в изоляции — в отдельных чатах и разрозненных инструментах. Code layers переносят эту активность в общее пространство.

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

Особенно показательна функция extract designs. Она работает в обратную сторону: текущее состояние кода превращается обратно в редактируемые слои Figma. Можно вытащить на канвас один экран, отдельное состояние или целый флоу, внести правки визуально и одним действием обновить code layer. Так замыкается круг «код → визуал → правки → код».

Связь с Figma Make и репозиторием

Code layers не существуют в вакууме. Они связаны с Figma Make — инструментом, где код генерируется и редактируется. Из Make результат можно вынести на канвас как code layer, чтобы доработать и сравнить с командой.

Когда нужна точность, доступен код-редактор: можно оставить аннотацию прямо в коде и попросить агента внести изменение либо поправить вручную. Готовый результат конвертируется обратно в code layer и отправляется в репозиторий, чтобы исходный код отражал согласованные правки. Таким образом канвас становится не заменой репозитория, а визуальной надстройкой над ним.

Для команд, где дизайн и фронтенд исторически разделены, это попытка сократить потери на стыке. Макет перестаёт быть «картинкой для сверки», а код — «чёрным ящиком для дизайнера».

Что это значит для разных ролей

Веб- и UI/UX-дизайнеры получают способ проверять интерактивные идеи без ожидания сборки. Можно быстро сравнить, как вариант «ощущается», а не только как выглядит, и тут же показать коллегам.

Разработчики видят контекст: не абстрактный макет, а живой компонент рядом с дизайн-системой. Аннотации в коде и синхронизация с репозиторием снижают риск рассинхрона между тем, что нарисовано, и тем, что запущено.

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

Ограничения и риски

Главное ограничение — доступность. Code layers разворачиваются в закрытой бете в течение нескольких недель после анонса; ранний доступ предоставляется по заявке. Это значит, что массово применять функцию команды смогут не сразу, а её поведение ещё может меняться.

Есть и методологические риски. Возможность быстро сгенерировать «работающий» вариант не отменяет необходимости проектировать логику, состояния и доступность. Интерактивный прототип легко принять за готовый продукт, хотя за ним ещё предстоит адаптивная вёрстка, оптимизация и тестирование. Наконец, тесная связка с экосистемой Figma усиливает зависимость от одного вендора.

Практические рекомендации

Если ваша команда уже работает в Figma, имеет смысл подать заявку на ранний доступ и заранее договориться о правилах: кто и как создаёт code layers, как именуются версии, когда результат считается готовым к передаче в репозиторий. Полезно выделить пилотный сценарий — например, один компонент или один экран — и на нём отработать цикл «генерация → сравнение → extract designs → правки → push».

Параллельно стоит зафиксировать, какие решения остаются за человеком: информационная архитектура, доступность, контент. AI ускоряет сборку варианта, но ответственность за смысл и качество по-прежнему несёт команда.

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

Вывод

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