Code Layers — представлена на Config 2026 можливість, за якої шар у Figma перестає бути «картинкою» й починає нести реальний код компонента. Простими словами: ви бачите на полотні звичний макет, але під ним живе справжня реалізація — з пропсами, станами й логікою, — і зміна в одному місці відображається в іншому. Це прибирає найстарішу прірву індустрії: розрив між тим, що намальовано, і тим, що зібрано в проді. У цій статті розберемо, що таке Code Layers, як працює синхронізація дизайн ↔ код і чому ця фіча — фактично маніфест ролі Design Engineer.
Я 15 років спостерігаю один і той самий цикл: дизайнер малює, розробник переносить у код, макет і реалізація розходяться вже за тиждень, і починається нескінченне звіряння «а чому тут інший відступ». Code Layers атакує саме цей цикл — не косметично, а на рівні того, що таке «шар».
Що таке Code Layers простими словами?
Уявіть звичайний компонент кнопки у Figma. Донедавна це був набір векторів і тексту: форма, заливка, підпис. Code Layers додає до цього шару прив'язку до фактичного коду компонента — того самого, що працює у застосунку. Шар знає, що він Button, знає свої пропси (variant, size, disabled) і рендериться на полотні так, як його побачить реальний користувач, бо це і є реальний компонент, а не його намальована копія.
Наслідок простий, але глибокий: «дизайн» і «реалізація» перестають бути двома різними артефактами, які хтось мусить синхронізувати руками. Вони стають двома проєкціями одного об'єкта.
Чим Code Layers відрізняється від Code Connect?
Це питання плутає багатьох, бо назви схожі. Різниця принципова. Code Connect — це міст: він показує розробнику, якому компоненту в коді відповідає компонент у Figma, і виводить приклад використання з пропсами. Але дизайн і код лишаються окремими світами — Code Connect лише підписує відповідність.
Code Layers йде далі: код не «підписаний збоку», а вбудований у сам шар, і полотно рендерить його наживо. Якщо Code Connect відповідає на питання «який це компонент у коді?», то Code Layers стирає саме питання — бо шар і є цей компонент. Хороша новина: одне не скасовує інше. Про налаштування мосту я докладно писав у гайді про Figma Code Connect — це логічний перший крок перед Code Layers.
Як працює синхронізація дизайн ↔ код
Механіка двонаправлена, і саме це найцінніше:
- Код → дизайн. Розробник оновив компонент кнопки у репозиторії — новий радіус, новий стан. Оновлення підтягується в Figma, і всі макети з цією кнопкою бачать актуальну версію. Ніхто не перемальовує руками.
- Дизайн → код. Дизайнер міняє токен або структуру компонента — і ця зміна виражається у коді у форматі, придатному для пул-реквесту, а не як скриншот із підписом «зроби так».
Ключове тут — спільне джерело правди. Токени, пропси й структура перестають існувати в двох несумісних копіях. Коли макет і прод розходяться, це видно одразу, а не через спринт, коли QA знаходить «баг», якого насправді немає — просто дизайн застарів.
Суть у одному реченні: Code Layers перетворює хендоф із «передачі артефакту» на «доступ до спільного об'єкта». Передавати нема чого — усі дивляться на одне й те саме.
Чому це саме про роль Design Engineer
Code Layers робить цінною конкретну людину — ту, що вільно почувається по обидва боки. Щоб шар ніс код, хтось має розуміти і дизайн-намір, і структуру компонента: що таке проп, чому цей стан, як влаштована композиція. Це і є Design Engineer — не «дизайнер, що трохи кодить», і не «фронтендер з оком», а людина, для якої макет і реалізація — одна думка у двох формах.
Донедавна цю роль можна було вважати екзотикою. Code Layers переводить її в розряд необхідних: команда, де ніхто не тримає обидва боки в голові, просто не зможе користуватися фічею на повну — у них шари й далі житимуть окремо від коду. Попит на цей профіль зростатиме рівно тому, що інструмент нарешті винагороджує саме таке мислення.
Що це змінює у хендофі?
Класичний хендоф помирає — і це добре. Замість ритуалу «дизайнер закінчив, кидає лінк, розробник відкриває, звіряє редлайни» приходить безперервна робота над одним об'єктом. Практичні наслідки:
- Менше звіряння. Відступи, кольори й радіуси не треба вимірювати — вони вже в коді.
- Менше «загубленого в перекладі». Стани й краєві випадки не зникають між макетом і реалізацією, бо реалізація і є макет.
- Швидший цикл правок. Дрібна зміна не проходить повний ланцюжок «дизайн → тікет → дев → рев'ю» — частина замикається на рівні спільного компонента.
Я окремо розбирав, скільки коштує зламаний хендоф у годинах і грошах — з Code Layers більша частина цих витрат просто зникає як клас.
Приклад із практики: кнопка, що тихо розійшлася
Найкраще цінність видно на буденній історії. У продукті, над яким я працював, дизайн-система мала кнопку з радіусом 8. Через пів року фронтенд-команда під час рефакторингу перевела всі кнопки на радіус 12 — рішення слушне, але в макетах Figma лишилася вісімка. Ще три місяці дизайнери малювали нові екрани зі старим радіусом, розробники мовчки правили його «як у коді», а на рев'ю регулярно спалахувала суперечка, чия версія правильна. Дрібниця в 4 пікселі коштувала десятків годин звіряння за квартал.
З Code Layers такого сценарію не існує в принципі. Радіус живе в коді кнопки, макет рендерить його наживо — у ту саму мить, коли фронтенд змінив значення, усі 200 екранів із цією кнопкою показують дванадцятку. Немає застарілої вісімки, бо немає окремої намальованої копії, яка могла б застаріти. Розходження неможливе не тому, що всі дисципліновані, а тому, що синхронізувати нема чого — джерело одне.
Як почати працювати з Code Layers
Стрибати в Code Layers без фундаменту — марно. Порядок, який раджу:
- Наведіть лад у токенах. Спільне джерело правди починається з токенів. Хаос у змінних Figma = хаос у синку.
- Підключіть Code Connect. Це м'який вступ: команда звикає, що компонент Figma має пару в коді.
- Виберіть 3–5 базових компонентів. Кнопка, поле вводу, картка — почніть з простих, з чистими пропсами.
- Домовтеся про власника. У кожного зв'язаного компонента має бути людина (Design Engineer), що відповідає за обидва боки.
Це не тижневий проєкт, а зміна способу роботи. Але й віддача не косметична — вона на рівні того, як команда взагалі будує продукт. Живі демо синку дизайн ↔ код я показую на YouTube-каналі, щоб було видно, як це виглядає в реальному файлі, а не на слайді з анонсу.
Кому це поки що не потрібно
Чесно: не всім. Якщо ви фрилансер, що малює лендінги під ключ і не підтримує продукт роками, Code Layers — з гармати по горобцях. Вигода з'являється там, де є жива кодова база, довгоживучий продукт і команда, яка страждає від розходження дизайну й реалізації. Немає коду, з яким синхронізуватися, — немає й сенсу в синхронізації. Але якщо ви в продуктовій команді — це напрям, у якому рухається вся індустрія, і вигідніше вчитися зараз, ніж наздоганяти за рік.
Підводні камені, про які мовчать анонси
Щоб не було ілюзій: Code Layers не безкоштовний у сенсі зусиль. Три речі, до яких варто приготуватися. Перша — дисципліна репозиторію: якщо код компонентів брудний, синхронізація принесе цей бруд у дизайн. Друга — крива входу для «чистих» дизайнерів: раптом стають потрібними базові поняття про пропси, гілки й рев'ю, і без них частина команди почуватиметься за бортом. Третя — версійність: коли дизайн і код — один об'єкт, помилковий мерж ламає обидва боки одразу, тож без нормального процесу рев'ю ризик вищий, а не нижчий.
Жоден із цих пунктів не є причиною не йти в Code Layers — це причина йти туди підготовленими. Виграє не той, хто ввімкне фічу першим, а той, у кого до неї вже є токени, культура рев'ю й людина, що тримає обидва боки.
Code Layers — не чергова фіча, а зміна визначення. «Дизайн» більше не картинка того, що колись стане кодом. Дизайн і є код, показаний візуально. Хто зрозуміє це першим — той і формуватиме, як команди будують продукти в наступні роки.