Figma викатила розширення для Chrome, яке автоматично імпортує будь-яку вебсторінку у Figma, розбиваючи її на повністю редаговані шари.

І того:
- Миттєвий імпорт: Весь контент (тексти, іконки, кнопки) одразу готовий до редагування.
- Робоча структура: Розширення зберігає ієрархію шарів, що значно пришвидшує роботу над редизайном або аналізом конкурентів.
- Економія часу: Більше не потрібно з нуля перемальовувати базові елементи сайту.

@berestux

Про це ніхто не знає, але це можна зробити у Figma

@berestux

Днями Figma Agent у беті став доступний для всіх платних користувачів.

Зрозуміло, що його не можна використовувати як повноцінну заміну дизайнеру, оскільки сам дизайн він робить досить посереднім. Але він дуже хороший у деяких юзкейсах — прискорює вашу роботу в рази, перевіряє вас і ваш дизайн на помилки та прибирає рутину.

Я зібрав основні сценарії, які можна використовувати вже зараз. Щось уже й сам протестував, про щось лише прочитав. Деякі працюють добре в одному випадку, а в іншому помиляються. Але давайте зважати на те, що це його перший тиждень на роботі, і це ок, що він може помилятися зараз (бо бета ж).

Рутина, Cleanup та Дизайн-системи
▪️Масове переведення макетів у темну/світлу тему: Перефарбовування цілих флоу та десятків екранів однією командою з автоматичним підбором правильних семантичних токенів.

▪️Пакетна заміна компонентів (Bulk Swap): Миттєва заміна старих кнопок, інпутів або іконок на нові актуальні версії з оновленої бібліотеки по всіх екранах файла.

▪️Групове наведення ладу в шарах (Layer Cleanup): Автоматичне перейменування хаотичних «Frame 2356» та «Rectangle 4» у зрозумілі семантичні структури на кшталт ⁠CardContainer⁠ або ⁠CTA_Button⁠.

▪️Вирівнювання відступів за сіткою (Spacing Scale Alignment): Приведення всіх випадкових і «брудних» відступів у флоу до єдиного кроку вашої дизайн-системи (наприклад, строго кратно 4px/8px).

▪️Автоматичне обгортання в Auto Layout: Виділення розрізненої групи елементів і розумне перетворення її на адаптивну структуру з правильними властивостями fill, hug або fixed.

▪️Групове керування змінними (Variables Operations): Масове перейменування змінних, зміна їхніх значень або зв'язування жорстко прописаних (hardcoded) параметрів зі стилями дизайн-системи

▪️Автодокументування компонентів: Автоматичний опис усіх стейтів (hover, focus, disabled) та пропсів компонента для бібліотеки або передачі розробникам.

▪️Очищення файла від «сміття»: Швидке знаходження та видалення прихованих, порожніх або невикористовуваних шарів, які перевантажують оперативну пам'ять Figma.

▪️Масове заповнення метаданих: Автоматичне оновлення описів (descriptions) та тегів у компонентів у дизайн-системі, щоб команда могла легко знаходити їх через пошук.

▪️Адаптація під автолейаут сітки (Grid Mode): Переведення старих фіксованих макетів на сучасні стандарти сіток (включно з Grid Mode), які нативно мапляться в CSS Grid.

Робота з контентом і локалізація
▪️Розумне заповнення контекстним контентом (Smart Populate): Заміна стандартного Lorem Ipsum на реальні імена, ціни, адреси або описи товарів, що підходять саме під ваш домен (доставка, фінтех, авіаквитки).

▪️Стрес-тест інтерфейсу локалізацією: Миттєвий переклад усіх екранів німецькою (для перевірки довгих рядків) або арабською (для тестування RTL-верстки та зміни напрямку елементів).

▪️Генерація реалістичних зображень-заглушок: Швидке наповнення аватарок і банерів релевантними картинками замість сірих квадратів (наприклад, «заповни картки фотографіями кросівок»).

▪️Валідація довгих заголовків: Симуляція крайніх станів контенту (вкрай довге ім'я користувача), щоб перевірити, як поводиться текстовий контейнер (... або перенесення рядка).

▪️Швидке наповнення порожніх станів (Empty States): Автоматична генерація текстів і графіки для станів «кошик порожній», «немає результатів пошуку», «помилка 404».

Генерація концептів та варіативність
▪️Паралельна генерація стилістичних напрямків: Створення кількох варіантів одного й того самого екрана в різній стилістиці (мінімалістичний, яскравий, строгий) side-by-side для порівняння.

▪️Інтелектуальний пошук за асетами (Asset Search): Пошук потрібного елемента у гігантській дизайн-системі не за точною назвою, а за візуальною схожістю або смисловим контекстом.

▪️Генерація UI-структур за брифом: Створення чорнових варфреймів або екранів з нуля на основі текстового опису, використовуючи компоненти вашої компанії.

▪️Швидке створення альтернативних лейаутів (Layout Variations): Перебір різних варіантів сітки (наприклад, бокове меню vs таббар) для одного й того самого контенту.

@berestux

UX-аудит, доступність та збір фідбеку
▪️Синтез фідбеку з коментарів: Аналіз величезних тредів обговорень від менеджерів та розробників під макетами та перетворення їх на структурований To-Do список.

▪️Аудит доступності за WCAG (Accessibility Check): Миттєва перевірка контрастності текстів, розмірів шрифтів та зон тапу (мінімальний розмір клікабельних елементів).

▪️Евристичний UX-аудит: Оцінка екранів на відповідність базовим правилам юзабіліті (наприклад, за Нільсеном) із зазначенням потенційних проблемних зон.

▪️Тестування макетів під різні Персони: Аналіз інтерфейсу очима конкретного сегмента аудиторії (наприклад: «перевір цей флоу з погляду 65-річного користувача»).

▪️Перевірка консистентності (Consistency Audit): Пошук елементів, що вибиваються із загальної дизайн-системи (не ті скруглення, використання кастомних кольорів замість токенів).

Прототипування та передача в розробку
▪️Автоматичне пролінковування прототипів (Auto-Prototyping): Налаштування базових зв'язків між екранами (кнопка «Назад» повертає назад, хрестик закриває модалку) однією командою.

▪️Підготовка структури для Dev Mode: Автоматичне впорядкування шарів так, щоб розробникам у Dev Mode було максимально зручно копіювати чистий CSS/Flexbox код.

▪️Автогенерація коду через Figma Make: Підготовка асетів та фрагментів інтерфейсу для безшовного передавання у фронтенд через інтеграції.
Пошук логічних тупиків (Edge-case Audit): Аналіз користувацького сценрію на предмет забутих екранів (наприклад, Агент підкаже: «Ви забули намалювати екран помилки при збої оплати»).

🤔Насправді кількість сценаріїв обмежена лише нашою уявою, і з часом ми знайдемо їх сотні, і вони стануть невіддільною частиною нашої рутини.
Діліться вашими ідеями, сценаріями та фідбеком в коментарях!

@berestux

Алелуя, тепер у Figma можна групувати вкладки

@berestux

Apple опублікували UI-кіти iOS 27, iPadOS 27 та macOS 27 у Figma Community. Тож можна вже поколупатися

@berestux

Почалася Config 2026

Із цікавого:

У Figma завезуть генеративні плагіни які ви можете створювати разом з агентом.

Просто опишіть потрібний вам інструмент: поведінку, елементи керування, параметри — і отримайте саме те, що необхідно для вашого робочого процесу.

Такє нам дуже треба.

@berestux

Можна створювати кастомні шейдери та візуальні ефекти своєї мрії прямо у Figma

@berestux

А ще вони кажуть що весь відос до запуску Figma Motion був повністю створений у Figma Motion.

Але ми не віримо)))

@berestux

Вже уявляю як дизайнери нароблять красивених шейдерів. А потім прийдуть розробники і скажуть що не зможуть нічого цього реалізувати.

@berestux