BEREST UX/UI

Figma опублікували AI Report 2026 Головне: AI перестає бути інструментом для однієї людини та стає способом спільної роботи команд. Кілька цікавих цифр: 41% фахівців вважають, що AI вже помітно змінює командну роботу. Два роки тому так відповідали лише 7%. Дизайнери все частіше беруть участь у розробці: зростання з 21% до 41% за рік. Розробники, навпаки, активніше залучаються до дизайну: з 44% до 60%. 76% респондентів виконують щонайменше половину своєї роботи прямо на полотні (canvas), а 60% проводять там більшу частину робочого часу. У Figma вважають, що з розвитком AI роль дизайну стає тільки важливішою. Генерація інтерфейсів, коду та контенту спрощується, але саме люди вирішують, що варто створювати, як це має працювати та які компроміси обирати. Ще один висновок дослідження: найуспішніше AI впроваджують компанії, де зміни йдуть одночасно знизу (від команд) і зверху (від керівництва), а процеси стають спільними для всіх, а не залишаються набором особистих прийомів. @berestux

Lottie заметушилися й зробили плагін для експорту Figma motion у формат Lottie. На коня так сказати 😆 @berestux

Коли сініор дизайнер перевіряє твій файл @berestux

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

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

😮 Figma Motion тут!!! Виглядає як LottieLab, але тепер нативно і можна працювати колаборативно. Треба клацати, але схоже що на перспективу може витіснити усі схожі проекти @berestux

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

У Figma завезуть генеративні плагіни які ви можете створювати разом з агентом. Просто опишіть потрібний вам інструмент: поведінку, елементи керування, параметри — і отримайте саме те, що необхідно для вашого робочого процесу. Такє нам дуже треба. @berestux

Почалася Config 2026 Із цікавого:

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

Ось вам віджет з басейнами щоб легче переживати спеку 💗 @berestux

Honor представили MagicOS 11, і якщо ви думаєте що вам здалося, то вам не здалося! @berestux

Алелуя, тепер у Figma можна групувати вкладки @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 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

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

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

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