У Figma велике оновлення: представили шари з кодом, інструмент для анімації та шейдери

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Днями відбулася велика конференція для дизайнерів та розробників від Figma, де компанія представила кілька великих оновлень для роботи з дизайном, кодом, анімацією та AI.

Розробники хотіли зробити полотно більш живим та технічно гнучким — розповідаю детальніше, завдяки яким змінам.

Що нового

Вводять code layers — інтерактивні кодові шари прямо на полотні. Дизайн-шар можна буде перетворити на code layer кліком або через промпт. Такий шар можна дублювати, порівнювати, коментувати та обговорювати з командою.

Також із code layer можна буде отримати редаговані дизайн-шари, внести зміни в дизайні, а потім оновити кодовий шар одним кліком. Ранній доступ до таких шарів має стартувати в липні.

Інше оновлення — Figma Motion. У Figma Design з’являється шкала часу з ключовими кадрами, готовими налаштуваннями та іншими інструментами для анімації. Анімацію можна буде створювати з нуля, накладати на готові дизайни або просити агента згенерувати.

Motion буде інтегрований із Dev Mode. Шкалу часу можна переглядати, бачити значення часу, криві плавності та ключові кадри, а також копіювати код анімації у CSS, JSON або форматі, готовому для React. Крім того, анімований фрейм можна буде передати агенту для програмування через MCP.

Додають шейдерні заливки та ефекти. Користувач зможе описати потрібний ефект або надати зображення як приклад, а Figma agent згенерує шейдер. Налаштування ефектів можна буде змінювати прямо на полотні, поєднувати з іншими ефектами та перетворювати на код або популярні формати.

Окремо компанія показала генеративні розширення. Ідея в тому, що користувач описує потрібний інструмент, його поведінку, параметри та елементи керування, а Figma створює розширення. Поки що такі інструменти можна буде створювати для себе та ділитися ними з людьми у файлі, а згодом — публікувати для команд.

Ще одною новинкою стануть інструменти Figma Weave. Weave — це полотно на основі вузлів для побудови генеративних процесів, де можна поєднувати моделі, змінювати матеріали, порівнювати різні підходи та повторно використовувати вже зібрані процеси. Тепер такі інструменти будуть всередині полотна Figma.

Ну і звісно, Figma оновила свого агента. Він отримає скіли, які зберігають робочі процеси та правила команди як багаторазові інструкції. Буде можливим підключення зовнішніх інструментів на кшталт Notion, Slack, GitHub, Atlassian, а також додавання досліджень, брифів тощо.

Чати з агентом тепер за замовчуванням видимі для команди, щоб колеги могли бачити, які напрями хтось уже досліджує. Але за потреби можна зробити приватними.

Що думаєте про ці оновлення? Вже встигли затестити?