Code Layers вышли в открытую бету: код можно добавлять на холст Figma

Figma вывела Code Layers в открытую бету: команды могут добавлять код на холст и собирать работающие прототипы рядом с макетами. Как пишет Figma Blog в материале от 24 октября 2026 года, шесть команд уже используют инструмент, чтобы проверять взаимодействия и согласовывать решения. Попробовать его можно в открытой бете, но при планировании работы нужно учитывать условия расходования AI-кредитов.

От статичных экранов к работающим вариантам

У Code Layers разные отправные точки: макеты Figma, кодовые компоненты продукта или готовый HTML-прототип. Figma agent помогает создать кодовый слой и менять его по запросам команды. Слои остаются на холсте, поэтому варианты можно рассматривать рядом, а не только по очереди.

В Superside начали со статичных экранов кошелька для карт. Леонардо Рика с помощью агента добавил прокрутку стопки, выбор карты и переворот для просмотра деталей. Он работал поэтапно: сначала наладил прокрутку, затем остальные действия. Агенту передавал снимки экрана и точные значения положения, размеров и параметров пружинного движения. Так команда смогла проверить взаимодействие, которое трудно оценить по неподвижным кадрам.

У Dell кодовые слои опираются на React-компоненты, которые разработчики уже используют в продукте: команда дизайн-системы сделала их доступными в Figma. Дизайнер Мигель Вермут показывает партнёрам работающий сценарий, где можно ввести вопрос и получить ответ прототипа в виде подходящего экрана. После согласования сценария с дизайнерами он развивает его для обсуждения с другими участниками проекта. Альтернативы Мигель оставляет рядом, дублируя кодовые слои.

Скорость итераций и проверка деталей

В Cox Automotive старший продакт-менеджер Линдси Брехлер загрузила большой HTML-прототип и с помощью агента прорабатывала четыре варианта уровней новой функции для дилеров. По её словам, на 19 версий ушло около часа непосредственной работы за клавиатурой: большую часть обработки выполнял агент. По сравнению с самостоятельной сборкой в Figma как человек без дизайнерской подготовки она оценила экономию времени примерно в 90%. Затем Брехлер выгрузила сложный HTML-файл для внутреннего сайта компании. Это её оценка конкретного эксперимента, а не обещание такой же скорости всем пользователям.

Rocket Money использует Code Layers, чтобы раньше обсуждать поведение компонентов и сверяться с требованиями доступности. Дерек Оней попросил агента пересобрать существующий макет в коде, указав точные названия компонентов дизайн-системы. Через несколько минут и после двух уточняющих запросов он показал концепцию участникам проекта. Работающий пример помог вынести на обсуждение то, что трудно объяснить серией статичных экранов.

Merkle применяет инструмент на разных этапах — от поиска идей до доработки функций, уже реализованных в коде. По данным компании, итерации и разработка функций стали на 30% быстрее благодаря меньшему числу передач работы и ожиданий между специалистами. На документацию, в том числе описание взаимодействий в задачах, уходит до 50% меньше времени. Эти показатели относятся к опыту Merkle.

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

Что это значит для команд и бизнеса

Владельцу сайта или маркетологу работающий сценарий может помочь обсуждать решение предметнее: участники проекта увидят не только последовательность экранов, но и то, как интерфейс отвечает на действия. Дизайнеру и разработчику полезна возможность проверить поведение рядом с макетом — особенно если прототип опирается на компоненты, уже используемые в продукте. Смежный вопрос — как передать агенту правила дизайн-системы; о другом подходе к нему рассказывает материал про формат DESIGN.md.

При этом Code Layers пока находится в открытой бете и будет использовать AI-кредиты. На платных планах создание и редактирование кодовых слоёв бесплатно до 4 ноября 2026 года. Если команда собирается попробовать инструмент, этот срок стоит учитывать при выборе задачи для эксперимента.

Моё мнение: начать с одного сценария

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

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

Источники

Откуда новость. Текст — пересказ своими словами, факты — из источника, мнение — автора.

1. 6 ways teams are experimenting with code layers www.figma.com

Об авторе

Белла В. Вашаაძე

UX/UI-дизайнер

Проектирую сайты и интерфейсы в Тбилиси, особенно люблю этап, когда из хаотичного брифа складывается ясный сценарий. Сейчас тестирую прототипы с более лёгкими анимациями.

Все публикации автора