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-дизайнерка

Проєктую сайти й інтерфейси в Тбілісі, особливо люблю етап, коли з хаотичного брифу складається зрозумілий сценарій. Зараз тестую прототипи з легшими анімаціями.

Усі публікації автора