Дизайн Читати оригінал на Cmswire 1 хв читання 1

Figma інтегрує Code layers та інструменти для моушн-дизайну

Компанія Figma представила масштабне оновлення платформи під час конференції Config 2026, що знаменує початок ери інтеграції програмування безпосередньо в дизайн-середовище. Головною інновацією стали Code layers — функція, яка дозволяє перетворювати будь-які графічні елементи на інтерактивний код одним кліком або за допомогою промпту. Окрім цього, Figma запровадила вбудовані інструменти для моушн-дизайну з підтримкою таймлайнів та експорту у форматі React.

Велика білборда у центрі міста з яскравими 3D-об'єктами, логотипом Figma та написом Made in Figma by Erica Leong.
Велика білборда у центрі міста з яскравими 3D-об'єктами, логотипом Figma та написом Made in Figma by Erica Leong. · Джерело зображення: Cmswire

Як повідомляє Cmswire, компанія Figma офіційно анонсувала низку функцій, спрямованих на стирання кордонів між дизайном та розробкою. Ключовим елементом оновлення стали Code layers, які дозволяють сприймати програмний код як стандартний матеріал для створення інтерфейсів. Тепер дизайнери можуть створювати інтерактивні компоненти безпосередньо на канвасі, що значно пришвидшує ітерації продуктових команд.

Інструменти для моушн-дизайну та генеративного контенту

Окрім роботи з кодом, Figma представила інструмент Figma Motion. Він додає до платформи можливості створення анімацій за допомогою таймлайнів, ключ-фреймів та пресетів. Важливою перевагою є підтримка широкого спектру форматів експорту, зокрема CSS, JSON, React, MP4, WebM, Animated SVG та GIF. Паралельно з цим компанія впроваджує Shader fills & effects — можливість створювати параметризовані шейдери за допомогою текстових або ізобразних промптів.

Для автоматизації складних процесів було оновлено Figma agent, який використовує конектори та ембединги для виконання крос-платформних завдань. Також з'явилися Generative plugins, що дозволяють створювати кастомні інструменти лише шляхом опису бажаної поведінки, без необхідності розгортання окремого середовища розробки.

Еволюція Figma Make та інтеграція з кодом

Окрему увагу приділено розвитку Figma Make — інструменту для прототипування на базі AI. Нові можливості дозволяють дизайнерам візуально редагувати виробничі бази коду безпосередньо в інтерфейсі платформи. Ключовими функціями цього напрямку є:

  • Пряме візуальне редагування: зміна властивостей елементів з автоматичним пошуком та модифікацією відповідного коду AI-агентом;
  • Анотаційні промпти: можливість описувати зміни взаємодії або анімації через текстові позначки на екрані;
  • Підтримка Git workflow: створення гілок, відкат комітів та управління версіями всередині Make;
  • Створення Pull requests: можливість передачі змін інженерам для перегляду через стандартні процеси.
  • Ці кроки є частиною стратегії Figma щодо об'єднання дизайну, розробки та управління контентом в єдині платформи цифрового досвіду. Компанія продовжує агресивно захоплювати ринок після успішного виходу на IPO у 2025 році та придбання таких активів як Payload та Weavy.

    Контекст для України

    Для української дизайн-спільноти та продуктових студій такі оновлення означають значне прискорення процесу handoff. Українські продукти, як-от Monobank або Petcube, де швидкість ітерацій критична, зможуть скоротити час між макетом і реалтійним кодом. Використання Figma Motion та Code layers дозволить локальним студіям створювати складні анімації з вищим рівнем точності без залучення додаткових сторонніх інструментів, що може знизити витрати на розробку інтерфейсів у гривнах.

    Часті запитання

    Що дозволяють робити Code layers у Figma?
    Code layers дають можливість сприймати програмний код як стандартний матеріал для створення інтерфейсів. Дизайнери можуть створювати інтерактивні компоненти безпосередньо на канвасі, що пришвидшує ітерації продуктових команд та дозволяє перетворювати графічні елементи на код.
    Які формати експорту підтримує новий інструмент Figma Motion?
    Новий інструмент для моушн-дизайну підтримує широкий спектр форматів експорту, зокрема CSS, JSON, React, MP4, WebM, Animated SVG та GIF. Він додає до платформи можливості створення анімацій за допомогою таймлайнів, ключ-фреймів та пресетів.
    Як Figma інтегрує роботу з кодом у процес прототипування?
    Завдяки розвитку Figma Make дизайнери можуть візуально редагувати виробничі бази коду в інтерфейсі платформи. Система підтримує анотаційні промпти, створення гілок, відкат комітів та управління версіями через Git workflow, а також можливість передачі змін інженерам через Pull requests.
    Telegram

    Свіжі новини у нашому Telegram

    Отримуйте миттєві сповіщення про нові публікації в рубриці «Дизайн»

    @prodesignandevenmore