BEREST UX/UI

Вже уявляю як дизайнери нароблять красивених шейдерів. А потім прийдуть розробники і скажуть що не зможуть нічого цього реалізувати. @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

😍 @berestux

😮 Але найнеймовірніше це те що у macOS 27 Apple нарешті уніфікувала радіуси заокруглення вікон. Більше жодних відмінностей між системними та сторонніми додатками @berestux

Apple представила нову розумну Siri, і мені дуже подобається як вона виглядає і як потенційно працює. Нарешті вона стала справжнім ШІ-помічником, про якого ми так довго мріяли. Тепер завдяки моделі Gemini вона не просто виконує команди, а розуміє контекст вашого життя: може підтримати довгу розмову або допомогти з написанням курсової. Для зручності з’явився окремий застосунок, де зберігається вся історія ваших чатів. Siri стала по-справжньому проактивною: вона «бачить» ваш екран і фонові завдання. Наприклад, ви можете попросити її повідомити про старт передзамовлення на гру чи косметику — і вона не забуде. Вона навіть вміє автоматизувати рутину: сама розрахує час у дорозі за картами та напише близьким, що ви вже їдете додому. Безпека — у пріоритеті: прості завдання Siri вирішує прямо на вашому пристрої, а для складних — використовує хмару з надійним шифруванням. На iOS її можна викликати свайпом донизу, а на Mac вона стала частиною оновленого Spotlight. На жаль, на старті (iOS 27 та macOS 27) Siri розумітиме лише англійську і працюватиме тільки в США. До інших країн оновлення дійде згодом, щойно Apple домовиться з місцевими регуляторами. @berestux

🔥У Figma з’явився новий інструмент для автоматизації рутини — Check Designs. Тепер перевірка макета на відповідність дизайн-системі займає лічені секунди. Щоб протестувати фрейм, просто натисніть правою кнопкою миші та оберіть Check Designs. Функціонал миттєво підсвітить: -Стилі та змінні: чи прив’язані кольори та типографіка до ваших Libraries. -Доступність: чи відповідають кольори стандартам контрастності. -Консистентність: чи збігаються відступи та радіуси скруглення з налаштуваннями системи. -Стан компонентів: наявність «від’єднаних» (detached) елементів, які потребують оновлення. Всі помилки можна виправити в один клік, а після завершення — змінити статус макета на «Ready for dev». Функція доступна для всіх платних підписок Figma. @berestux

Вийшла Reve 2.0 — нова версія топової моделі для створення зображень. У бенчмарках вона поступається лише GPT Image 2. Reve 2.0 працює за новою логікою: спочатку перетворює промт на детальний код із розкладкою об'єктів, а потім рендерить картинку. Завдяки цьому з нею простіше редагувати окремі деталі. Генерує одразу у форматі 4K, тому окремий апскейл не потрібен. Працює швидко, проте на складних сценах можна помітити дрібні артефакти. Чудово справляється з інтерфейсами та текстами. Тестуємо безкоштовно тут. @berestux