🤔 Відчуваєте підвох?

@berestux

🤯 Тепер прямо у Figma можна підключити backend і створити повноцінне рішення!

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

@berestux

Tomorrow

@berestux

Як створити анімацію завантаження за допомогою змінних.

@berestux

Apple релізнули iOS і iPad 26 UI Kit в Figma Community

@berestux

OpenAI представили Agent — нову модель, якій можна дати завдання, і вона самостійно виконає його, використовуючи інтернет.

Agent вміє робити дослідження, створювати презентації та таблиці на основі зібраної інформації. Також він знаходить авіаквитки, ресторани за вашими побажаннями й одразу додає все це в календар.

@berestux

So true!

@berestux

Просто великий набір прикольних шейпів, згенерованих у Midjourney.

@berestux

ПМ вмовляє тімліда поставити ще один проект на дизайнера

@berestux

Про інструменти вайб-кодингу

Вайб-кодинг — це новий підхід до створення продуктів із використанням AI-інструментів, який дозволяє швидко та інтуїтивно створювати код через візуальні інтерфейси без необхідності писати код саморуч.

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

Категорії інструментів:
🟢 Мінімальний контроль: усе робить AI.
🟡 Помірний контроль: можливе часткове втручання.
🔵 Повний контроль: код-редактор з AI-помічником.

🟢 Bolt
Ідеальний інструмент, щоб швидко почати. Підтримує імпорт з Figma, створення мобільних прототипів з переглядом через QR-код (завдяки Expo), та навіть розгортання в App Store / Web. Але редагування або рефакторинг компонентів — болісне, особливо якщо використовуєш зовнішні сервіси, як Supabase.

🟢 Lovable
Схожий на Bolt, але має розумні підказки наступних дій. Інтеграція зі Stripe або PayPal дозволяє швидко додати платну підписку. Також є синхронізація з GitHub — можна внести зміни вручну в редакторі й повернути код назад у Lovable. Також є можоивість попросити AI не чіпати певні частини коду — що зменшує ризик зламати інші елементи.

🟡 V0 (Vercel)
Чудовий вибір, якщо хочеш вийти за межі прототипів. Мінус — Figma-інтеграція не входить у безкоштовний план. Плюс — можна бачити роботи інших, використовувати їхню логіку в своїх проектах.

🟡 Replit
Тут усе відкрито — структура файлів, можливість додавати файли, бачити, що робиться “під капотом”. Зручно для співпраці дизайнерів і розробників. Replit навіть пропонує “таски”, які можна автоматично додати до проекту. Особливо крута фіча — мобільний застосунок. Можна працювати й отримувати нотифікації прямо на телефоні.

🔵 Cursor
Це повноцінний код-редактор, тому ви маєте повну свободу встановлювати пакети й редагувати код так, як вам хочеться. Але разом із цим з’являється й можливість усе запросто зламати .

🔵 Figma Make
AI-інструмент від Figma, що об'єднує в одному середовищі дизайн, створення інтерактивних прототипів і генерацію готового для використання коду. Дизайнери можуть легко перетворювати свої ідеї в реальні продукти завдяки автоматичній генерації коду та повній інтеграції з усіма інструментами екосистеми Figma. Поки що інструмент знаходиться на ранньому етапі розвитку, через що деякі функції можуть працювати нестабільно.

Відчуваю, що дуже скоро вміння вайб-кодити стане must-have навичкою для кожного дизайнера. Тож я активно досліджую цю тему і час від часу ділитимусь спостереженнями.

@berestux

Підбірка безкоштовних бібліотек з мінімалістичними іконками для ваших проектів

→ hicon.me
→ iconoir.com
→ boxicons.com
→ mingcute.com
→ tabler-icons.io
→ remixicon.com
→ icons.download
→ feathericons.com
→ phosphoricons.com
→ supercons.vercel.app
→ iconpark.oceanengine.com
→ heroicons.com
→ oleg.design/icons

@berestux

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

@berestux

Ти, коли хтось зайшов у твій файл у Figma

@berestux

Figma Make нарешті доступний безкоштовно для всіх

Make швидко створює повністю робочі прототипи з готовим інтерфейсом і кодом. Можна редагувати кожен елемент і завантажувати власні макети.

Поклацати

@berestux

Цей степер зійшов з небес і посилився в моєму серці 😍

@berestux

Зумери вигадали Pinterest.
Envato запустили InspoGen — стильний та інтерактивний інструмент для натхнення дизайнерів.

Навігація відбувається у форматі паралакс-карти — це ніби візуальний квест: шукаєш цікаві ідеї, клікаєш — і занурюєшся глибше, відкриваючи схожі проєкти. Хочеш переглянути оригінал — тицни правою кнопкою миші.

@berestux

У бета-версії Photoshop з’явилася функція Harmonize — вона дозволяє штучному інтелекту автоматично налаштовувати кольори, тіні та освітлення об’єктів, щоб вони природно поєднувалися з фоном.

Детальніше

@berestux

Figma вийшла на IPO на Нью-Йоркській біржі

Після старту торгів акції зросли до $85–$115, що на 158%–277% вище від початкової ціни. Ринкова капіталізація — близько $67 млрд.

Цікаво, що у 2022 році Figma не продалась Adobe за $20 млрд, і сьогодні її вартість утричі більша.

Що це означає для нас?
Для Figma — це фінансова стабільність, зростання впізнаваності та нові можливості для B2B.
Для нас — пришвидшення запуску нових функцій, інтеграцій та розвиток AI завдяки довгостроковим інвестиціям у продукт.

@berestux

Складання інпутів у стопку при переході до наступних кроків, виглядає як мінімум дуже цікаво

@berestux

Коли бачиш курсор клієнта в своєму файлі

@berestux

А це логотипи сучасних компаній в ретро стилі😍

@berestux