UXPUB 🇺🇦 Дизайн-спільнота: Dinozavrix

Що таке Figma Agent для дизайнерів і як він працює

Dinozavrix — Thu, 21 May 2026 08:44:21 +0000

Figma запустила власного AI-агента для дизайнерів

Починаючи з сьогоднішнього дня, користувачі можуть працювати з агентом, створеним спеціально для Figma, прямо на canvas.

Дизайнерам потрібні спеціалізовані інструменти, які підтримують ключові процеси: дослідження, експерименти, співпрацю та точність. Figma була створена як мультиплеєрний canvas саме для цього. Але в міру того як команди впроваджують агентні інструменти для швидшої розробки продуктів, з’являються хибні дилеми: швидкість чи точність? AI-генерація чи пряме ручне редагування? У Figma вважають, що користувачам не потрібно обирати щось одне.

Раніше цього року Figma відкрила canvas для сторонніх агентів, щоб команди могли використовувати знання дизайн-систем у своїх агентних workflow. Тепер компанія йде далі — запускає Figma Agent, доступний безпосередньо на canvas та в лівій панелі.

Саме для цього Figma створила власного агента. Мета компанії — зробити агента, який добре розуміє Figma та природно вписується у спосіб роботи команд. Це означає, що сама Figma стає зрозумілою для моделі на рівні, недоступному стороннім інструментам: із глибоким контекстом компонентів, токенів, стандартів і best practices.

Як Figma Agent і MCP Server працюють разом

Figma Agent варто використовувати під час роботи на canvas: він вбудований у продукт і має додатковий контекст про дизайн-систему.

MCP Server та use_figma варто використовувати для перенесення коду на canvas або повернення дизайнів назад у код.

У результаті користувач отримує спеціалізованого дизайн-агента, який працює поруч на canvas, у тому самому файлі, що й команда, фактично як повноцінний учасник процесу.

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

На відміну від MCP Server, агент працює безпосередньо на canvas — без окремого налаштування чи перемикання контексту. Це дозволяє:

запускати prompt із будь-якого design layer;
паралельно запускати кілька prompt’ів, щоб перевірити різні ідеї;
редагувати дизайн ітеровано, поки агент також продовжує ітерації.

Від пошуку нових напрямків до масових правок і впровадження feedback — Figma Agent має стати частиною дизайн-workflow вже сьогодні.

Дослідження більшої кількості напрямків

Найкращі дизайни рідко з’являються з першої ідеї або першого prompt’у. Дослідження напрямків, порівняння підходів та ітерації вже є базовою частиною роботи дизайнерів. Figma Agent має допомогти командам проходити більше варіантів за менший час.

Як Figma Make і Figma Agent вписуються у workflow

Користувач може почати у Figma Design і за допомогою агента згенерувати design layers, щоб уточнити intent у flows, states, copy та структурі. Потім результат можна передати у Make для генерації code layers і уточнення поведінки. Після цього його можна знову вбудувати назад у Figma Design.

Або навпаки: почати у Figma Make, скопіювати frames у Figma Design, доопрацювати їх через агента й повернути назад у Make.

Користувач може “йти вшир”: швидко генерувати різні стилістичні підходи до однієї задачі та досліджувати багато напрямків одночасно. Наприклад, порівняти кілька checkout flows, оптимізованих під різні бізнес-цілі, або попросити агента створити три різні information architectures.

Або можна “йти вглиб”: обрати один напрямок і попросити агента ітерувати його, порівнювати реалізації та переосмислювати наявні дизайни, залишаючись у межах дизайн-системи. Агент використовує найчастіше й нещодавно використані компоненти як стартову точку. Водночас користувач може керувати результатом, обираючи конкретну library або згадуючи через @ конкретні tokens, variables і components.

У Figma зазначають, що головний ризик AI-генерації — створення “посереднього” дизайну. Саме тому Figma Agent створений для того, щоб допомогти досліджувати більше напрямків і обрати правильний.

Приклад prompt для design exploration

Дай 3 стилістичні варіанти цього дизайну: один органічний, один modern і один retro.

Приклад prompt для design generation

Створи горизонтальний image carousel для mobile app. Заповни зображення placeholder-картинками outdoor/sports тематики. Дай кілька варіантів із різними title treatments: текст поверх зображення та під ним, щоб зрозуміти, що працює краще.

Автоматизація рутинної роботи

З Figma MCP Server робота може переходити між кодом і Figma без втрати точності. Команда може почати в коді, перенести результат у Figma через code-to-canvas, доопрацювати його або застосувати дизайн-систему, а потім повернути назад через Figma MCP Server — і все залишатиметься синхронізованим.

Коли Figma Agent працює поруч на canvas, користувач не просто працює швидше — він може легко перемикатися між AI-допомогою та ручним редагуванням. Це спрощує виконання рутинних задач, які все одно потребують контексту й точності.

Figma Agent може:

перейменовувати variables;
масово змінювати компоненти;
оновлювати typography;
замінювати lorem ipsum на реальний контент;
переводити інтерфейси у dark mode;
оновлювати documentation дизайн-системи;
стандартизувати naming conventions;
створювати документацію для components, states та variants.

Приклади prompt для consistency

Переведи всі @ Tile / Callout components у highlight states.

Знайди весь текст більший за size 10 і зміни font на Inter.

Використай чистіший typeface.

Приклад prompt для documentation

Створи документацію для моїх компонентів, включно з усіма states і variants. Додай contextual examples, які показують, як ці компоненти слід використовувати.

Робота з feedback

У дизайн-процесі накопичується багато feedback, який часто розкиданий між comments і файлами: від crit notes та реакцій stakeholders до відкритих питань. Figma Agent допомагає перетворювати цей feedback на дію.

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

Figma Agent може:

узагальнювати feedback;
знаходити повторювані теми;
перетворювати comments у actionable next steps;
симулювати реакцію різних stakeholders;
допомагати готуватися до critique sessions.

Приклад prompt для feedback

Відсортуй ці comments за темами. Створи нову revision мого дизайну, яка враховує feedback для цього профілю.

Figma Agent вбудований туди, де вже відбувається робота. Немає потреби перемикатися між інструментами або втрачати контекст. У Figma кажуть, що головна мета продукту — допомогти командам працювати швидше без компромісів у якості та craft.

Що далі

У найближчі місяці Figma планує:

покращити підтримку дизайн-систем;
удосконалити user experience;
розширити можливості агента для пошуку у файлах;
додати більше способів кастомізації.

Доступність

Figma Agent поступово запускається в beta протягом найближчих тижнів.

Під час beta:

AI credits не витрачатимуться;
після general availability функція стане usage-based.

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

Professional;
Organization;
Enterprise plans.

Collab і Dev seats зможуть використовувати агента в drafts.

Starter, Education і Government plans наразі не підтримуються.

Джерело: figma.com

OpenAI представила нову флагманську модель для генерації зображень — GPT Image 2

Dinozavrix — Wed, 22 Apr 2026 09:16:30 +0000

Компанія OpenAI представила свою нову флагманську модель для генерації зображень — GPT Image 2

Це масштабне оновлення, яке суттєво розширює можливості створення візуального контенту безпосередньо в інтерфейсі ChatGPT.

Головні фішки GPT Image 2

Текст на зображеннях: Модель стала набагато краще справлятися з написанням тексту. Тепер вона може коректно відображати слова навіть на українській мові.
Дизайн та верстка: Нейромережа демонструє професійні результати в створенні продуктових карток (наприклад, для маркетплейсів), макетів журналів (editorial design) та інфографіки.
Робота з інтерфейсами: Модель ідеально підходить для генерації UI/UX дизайнів та макетів веб-сайтів.
Складні промпти: GPT Image 2 точніше слідує довгим та заплутаним описам, краще розуміючи контекст та взаємозв'язки між об'єктами.

Приклади використання

Маскоти

Логотипи

Лендінги

Плакати

Інфографіка

Прості презентації

Higgsfield AI здійснила революцію: 23-хвилинний пілот серіалу створено лише за 4 дні

Dinozavrix — Sun, 19 Apr 2026 19:35:29 +0000

Компанія Higgsfield AI представила пілотну серію свого флагманського проекту "Hell Grind", довівши, що штучний інтелект здатний створювати повноцінний кіноконтент голлівудської якості у неймовірні терміни.

САН-ФРАНЦИСКО — Стартап Higgsfield AI офіційно оголосив про вихід першого епізоду серіалу «Hell Grind». Головною сенсацією став не лише сюжет, а швидкість виробництва: невелика команда згенерувала 23 хвилини високоякісного відео всього за 4 дні.

Ключові факти:

Технологічний прорив: Для створення серії використовувалася власна модель компанії — Seedance 2.0. Вона дозволила забезпечити ідеальну візуальну стабільність персонажів та складну фізику рухів у високій якості, що раніше було головною проблемою ШІ-відео.
Сюжет "Hell Grind": Це історія про чотирьох підлітків (Роко, Джакса, Лулу та Рейну), які випадково отримують суперздібності після знаходження магічного артефакту в музеї.
Економіка виробництва: За оцінками експертів, традиційне створення такого епізоду (анімація та спецефекти подібного рівня) зайняло б від 6 до 9 місяців роботи великої студії та коштувало б мільйони доларів. Higgsfield AI зробили це ресурсами мікро-команди за ціною, що на декілька порядків менша за ринкову.
Нова ера стрімінгу: Разом із релізом компанія запустила Higgsfield Original Series — першу спеціалізовану платформу для серіалів, створених виключно штучним інтелектом.

"Ми не просто зробили демо-ролик, ми розповіли історію. Це доводить, що ера, коли ШІ-контент був лише набором випадкових кадрів, закінчилася. Тепер це інструмент для справжнього сторітелінгу," — зазначили в Higgsfield AI.

Наразі перший епізод доступний для перегляду на Youtube та на платформі Higgsfield.

10 фактів про шрифти, які ви не просили

Dinozavrix — Fri, 27 Jun 2025 12:04:09 +0000

1. Helvetica — швейцарець без настрою!

Цей шрифт, що став стандартом у дизайні, був створений у Швейцарії в 1957 році. Його назва "Helvetica" — це латинський варіант слова "Швейцарія". Головна мета шрифту — максимальна нейтральність і читабельність без емоційного забарвлення. Він настільки популярний, що про нього зняли повнометражний фільм "Гельветика" (2007), який розповідає про його історію та культурний вплив.

2. Comic Sans: створено для дітей… і інтерфейсу Microsoft Bob

Шрифт був створений для інтерфейсу Microsoft Bob (1995), де мав озвучувати репліки мультяшного помічника-собаки, тому був розрахований на дитячий та неформальний контекст. Однак люди почали використовувати його скрізь: у ділових листах, на медичних попередженнях і навіть на надгробках. Так невинний шрифт став головним мемом та символом поганого смаку в дизайнерській спільноті.

3. Справжній "безсмертний" шрифт — Garamond. Йому понад 500 років.

Це група шрифтів, що походять від робіт французького пуансоніста Клода Гарамона з XVI століття. Завдяки високій читабельності в малих кеглях та економному використанню місця, Garamond досі є одним зі стандартів для набору великих обсягів тексту, зокрема у книговидавництві.

4. Є шрифти, які імітують почерк серійного вбивці.

Хочете оформити листівку своєму начальнику? Тепер ви знаєте, який шрифт обрати.

5. Капітель — це не просто зменшені великі літери.

Справжня капітель (small caps) — це окремий набір спеціально розроблених гліфів, що мають висоту рядкових літер, але пропорції великих. Вони використовуються для абревіатур або виділень, щоб не порушувати ритм рядка, як це роблять повнорозмірні великі літери.

6. Значок "&" (амперсанд) — це лігатура.

Він виник у результаті злиття латинських літер "e" та "t", що разом означають "і" (et). Ця форма виникла для прискорення письма, і якщо придивитися до символа, можна розгледіти обидві літери.

7. "Зарубки" (Serif) мають практичне походження.

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

8. Назва шрифту Times New Roman говорить сама за себе.

Шрифт був замовлений британською газетою "The Times" у 1931 році для покращення читабельності її колонок. Назва розшифровується як "Новий" (New) шрифт для газети "The Times", виконаний у стилі "Roman" (шрифти із зарубками).

9. Курсив був створений для економії місця.

Близько 1500 року італійський друкар Альд Мануцій розробив нахилені літери, щоб вмістити більше тексту на сторінці та зробити книги меншими й дешевшими. Перші курсиви не мали великих літер.

10. Шрифт Trajan використовується у кожному другому постері до фільму.

Форма літер шрифту Trajan повністю базується на написах на колоні римського імператора Траяна (113 р. н. е.). Через асоціації з античною величчю він став типографічним кліше для постерів історичних та епічних фільмів.

Бонус: Піктограми — універсальна візуальна мова

Це символи, що передають інформацію без використання мови. Вони є основою систем навігації (в аеропортах, на вокзалах), дорожніх знаків та інтерфейсів програм. Ефективність піктограми визначається її здатністю бути зрозумілою для людей з різних культур без додаткових пояснень.

Новинки Figma Config 2025: огляд нових інструментів Make, Sites, Grid, Draw та Buzz

Dinozavrix — Wed, 07 May 2025 18:56:42 +0000

Config 2025: новий етап розвитку дизайну

У рамках конференції Config 2025 було анонсовано низку інструментів і функцій, покликаних розширити можливості дизайнерів та продуктових команд. За десять років свого існування Figma суттєво розширила поняття “дизайн”, інтегрувавши в робочі процеси автоматизацію, адаптивність та глибоку колаборацію. Нижче описано ключові новинки та їхні основні характеристики.

Зміст

Figma Make
Figma Sites
Grid
Figma Draw
Figma Buzz

Figma Make: від дизайну до коду в одному середовищі

Figma Make — інструмент «prompt-to-code», що дозволяє трансформувати статичні макети в інтерактивні прототипи за допомогою природних мовних запитів. Між дизайном і продакшеном традиційно існує технологічний розрив, який здебільшого долався складними та фрагментованими процесами. Figma Make об’єднує етапи розробки, дизайну й тестування під одним інтерфейсом.

Ключові можливості

Натуральні мовні запити: можна вказати текстом, куди й що додати («додати кнопку “Опублікувати”»).
Запит по файлу: достатньо передати Figma-файл, щоб отримати початковий прототип.
Прецизійна ітерація: виділити потрібну ділянку макета й змінити її через текстову команду.
Колаборативність: всі зміни відстежуються й відображаються в реальному часі для всієї команди.

Переваги

Швидке перетворення ідей у інтерактивні прототипи без залучення окремих розробників.
Гнучкість: експерименти з дизайном можна проводити швидко й з високою точністю.
Єдине джерело правди: дизайн, код, тестування й правки — в межах одного середовища.

Figma Sites: публікація сайтів без додаткових інструментів

Figma Sites дає змогу одним кліком робити живі вебсайти з дизайнів та прототипів, минаючи етап передачі макетів у фронтенд-розробку. Це рішення ліквідує традиційну “остання милю” у продуктовому циклі.

Головні функції

Responsive design: адаптивна верстка за допомогою Auto Layout, Grid і нових брейкпоїнтів.
Компоненти та варіанти: створення й налаштування UI-компонентів для різних екранів.
Прототипування: знайомі інструменти Figma доповнені налаштуванням веб-взаємодій (hover, click, scroll).
Анімації та код: інтеграція з Figma Make для генерації складних анімацій і взаємодій.
CMS (скоро): вбудована безкодова система керування контентом для динамічних оновлень.

Переваги

Мінімізація часу від дизайн-макета до живого сайту.
Підтримка адаптивності без додаткового коду.
Майбутня можливість оновлювати контент через інтерфейс, без звернень до розробників.

Grid: структуровані макети без складності

Grid — новий режим Auto Layout, що поєднує вільне розміщення елементів із точними сетками. Раніше в Figma для адаптивних сеток доводилося використовувати складні вкладені фрейми та хаки, що сповільнювало роботу.

Основні можливості

Розтягування елементів: span елементів на декілька клітинок сетки.
Реальне відображення: зміна розміру рамки відразу показує, як адаптується макет.
Точні налаштування: задавання ширини кожного рядка/колонки, керування відступами.
Ізоляція шарів: позиціонування елементів незалежно від порядку шарів.
Dev Mode: прямий експорт CSS Grid для розробників.

Переваги

Швидка й точна розробка адаптивних макетів.
Менше складних вкладень — код ближчий до візуального результату.
Збереження єдиного джерела правди між дизайнерами та розробниками.

Figma Draw: потужні векторні інструменти

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

Ключові інструменти

Shape Builder: комбінування й віднімання форм, мультивибір векторів.
Lasso Tool: точний вибір опорних точок.
Pattern & Text Tools: повторення по колу/лінії, текст на шляху, кастомні візерунки.
Ефекти: варіативні обводки, текстури/шум, прогресивне розмиття для глибини.
Інтеграція з DS: застосування змінних кольорів із дизайн-системи.

Переваги

Прямий інтерфейс із великими прев’ю шарів і видимими повзунками.
Плавні Boolean-операції та швидше створення складних ілюстрацій.
Гнучке управління стилями для адаптації до світлих і темних тем.

Figma Buzz: брендовані активи для всієї команди

Figma Buzz призначена для створення й централізованого керування маркетинговими й брендованими матеріалами — від соціальних мереж до івент-принтів і мерчу. Основна ідея — знизити залежність від дизайнера-експерта в щоденних завданнях із створення багатьох однотипних активів.

Основні можливості

Шаблони: налаштовувані шаблони з обмеженим редагуванням, щоб не порушити брендбук.
Bulk creation: масове генерування активів через зв’язки з таблицями чи CSV.
Фокусоване редагування: інтерфейс для швидких правок без ризику зламати загальний вигляд.
Grid view: інтуїтивний перегляд активів у вигляді сітки.
Content Seat: спеціальна ліцензія без повного доступу дизайнера, але з можливістю експорту.

Переваги

Зниження навантаження на дизайнерів при створенні рутинних матеріалів.
Забезпечення консистентності бренду навіть за участі непрофільних користувачів.
Централізоване зберігання й швидкий експорт у потрібні формати.

Підсумок

Конференція Config 2025 представила кілька нових інструментів, які зменшують розрив між дизайном і продакшеном, розширюють творчі можливості та автоматизують рутинні завдання. З появою Figma Make, Sites, Grid, Draw і Buzz дизайнерські процеси стають швидшими, точнішими та доступнішими для всієї команди — від студентів і фрилансерів до великих продуктових відділів.

Як AI змінює світ дизайну та розробки: 5 головних трендів за версією Figma

Dinozavrix — Mon, 05 May 2025 09:37:56 +0000

Минулого року компанія Figma у своєму першому звіті щодо штучного інтелекту (AI) зазначила, що ми перебуваємо в «переломному моменті». Тоді індустрія переживала справжній пік інтересу до штучного інтелекту. Через рік багато що змінилося, але основні питання залишилися незмінними: як саме AI змінює нашу роботу та які можливості й виклики він приносить?

У 2025 році Figma провела опитування 2500 своїх користувачів, щоб краще зрозуміти ці питання. Виявилося, що кожен третій респондент запускає продукти на основі AI, що на 50% більше, ніж минулого року. Ці продукти охоплюють найрізноманітніші сфери — від аналітики для технічного обслуговування обладнання до автоматизованої обробки медичних документів.

Ось 5 головних висновків, які допоможуть зрозуміти, куди рухається світ дизайну та розробки завдяки AI.

1. Агентний AI — найшвидше зростаюча категорія

Хоча генерація тексту залишається найпопулярнішим типом AI-продуктів, агентні системи (ті, що виконують багатокрокові завдання) зростають удвічі швидше за інші категорії. Вже 51% користувачів Figma створюють такі системи порівняно з 21% минулого року.

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

2. Успіх потребує поєднання перевірених методів та інновацій

Створення AI-продуктів вимагає гнучкості та критичного мислення. Найуспішніші команди ті, які комбінують традиційні найкращі практики (швидке прототипування, регулярна ітерація, тісна співпраця) з новими підходами, спеціально адаптованими під AI.

52% респондентів вважають дизайн більш важливим для AI-продуктів, ніж для традиційних, а 95% впевнені, що він має бути як мінімум таким самим.

3. Малі компанії активно експериментують з AI

Компанії до 10 осіб бачать в AI ключ до швидкого зростання: 61% з них назвали AI критично важливим для своїх бізнес-цілей. У маленьких командах простіше та швидше тестувати нові рішення, що дозволяє їм швидше адаптуватися та інтегрувати AI у свої продукти.

4. AI проникає в усі аспекти роботи, але дизайнери менш задоволені, ніж розробники

Попри те, що і дизайнери, і розробники все активніше використовують AI, між ними є розрив у сприйнятті його якості. 82% розробників задоволені AI-інструментами, а серед дизайнерів таких лише 69%.

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

5. Майбутнє за AI, але шлях ще не визначений

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

Попри це, понад 80% дизайнерів та розробників упевнені, що вміння працювати з AI стане ключовим навиком у майбутньому.

AI продовжує трансформувати роботу команд, але перед нами ще багато питань і завдань. Весь звіт ви можете переглянути на сайті Figma.

Битва за Dev Mode: Figma погрожує стартапу Lovable через назву функції

Dinozavrix — Fri, 18 Apr 2025 12:08:43 +0000

У світі технологій знову спалахнула суперечка навколо прав на, здавалося б, звичайний термін. Компанія Figma направила шведському AI-стартапу Lovable листа з вимогою припинити використання назви «Dev Mode» для нової функції. На перший погляд, це здається дрібницею, адже «Dev Mode» — поширене скорочення від «developer mode» («режим розробника»), функції, яка вже давно є стандартом в індустрії.

У чому суть конфлікту?

Figma зареєструвала торговельну марку Dev Mode ще в листопаді минулого року, після чого у 2023 році офіційно запустила власну функцію під цією назвою. Відповідно, компанія вважає, що стартап Lovable порушує її інтелектуальні права.

«Ми раді, що ви погоджуєтесь, що „Dev Mode“ — це ідеальна назва для інструменту, який об'єднує дизайн та розробку, але змушені захищати наш бренд», — написала Figma у листі, який публічно оприлюднив співзасновник Lovable Антон Осіка на LinkedIn.

Функція «Dev Mode» від Lovable дозволяє редагувати код проєктів без підключення до GitHub, тоді як рішення Figma спрямоване на полегшення перетворення дизайнів у програмний код.

// Detect dark theme var iframe = document.getElementById('tweet-1912147137728589915-161'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1912147137728589915&theme=dark" }

Тонка межа між торговою маркою та загальновживаним терміном

Ця суперечка піднімає важливе питання про те, наскільки компанії можуть контролювати поширені технічні терміни. З юридичної точки зору, «Dev Mode» — це описова фраза, яка зазвичай не отримує сильного захисту за законами про торговельні марки, якщо тільки не здобуває «вторинного значення». Тобто, користувачі повинні чітко асоціювати цей термін з конкретним брендом.

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

Ризики жорсткої політики захисту бренду

Для Figma подібна агресивна стратегія щодо захисту власної торгової марки може виявитися палкою з двома кінцями. З одного боку, компанія захищає свій бренд від ризику перетворення на загальновживаний термін («genericized»). З іншого — надто агресивний захист може створити напруження в екосистемі, де багато термінів природно використовуються спільно різними компаніями.

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

Контекст: Що насправді відбувається з Figma?

Цікаво, що цей конфлікт виник на фоні великих змін у Figma. Наприкінці 2023 року компанія відмовилась від угоди про продаж Adobe за 20 мільярдів доларів (отримавши при цьому солідну компенсацію в розмірі 1 мільярда). Зараз Figma готується до виходу на IPO, і захист бренду стає критично важливим питанням.

Таким чином, агресивна політика щодо назви «Dev Mode» може бути пов'язана не лише з бажанням захистити торговельну марку, а й зі спробою зміцнити позиції перед виходом на публічний ринок.

Що далі?

Lovable поки що не заявила офіційної позиції щодо виконання вимоги Figma. Водночас сама Figma поки що не додає нічого нового, окрім того, що було озвучено в офіційному листі.

Ситуація продовжує розвиватися і може стати важливим прецедентом, який вплине на майбутні спори навколо поширених технічних термінів у технологічній індустрії.

Новий плагін Cursor AI дозволяє робити дизайн у Figma за допомогою штучного інтелекту

Dinozavrix — Wed, 19 Mar 2025 12:36:09 +0000

Cursor тепер може програмно взаємодіяти з Figma завдяки новому MCP-плагіну

Команда Cursor AI презентувала новий проєкт інтеграції з Figma — Cursor Talk to Figma MCP. Він базується на протоколі MCP (Model Context Protocol) і дозволяє Cursor AI читати, редагувати та створювати дизайн у Figma програмним шляхом.

Цей інструмент відкриває нові можливості для дизайнерів, надаючи змогу керувати файлами Figma за допомогою AI, автоматизувати рутинні операції та значно прискорити процес створення дизайну.

Що нового?

Інтеграція складається з трьох основних компонентів:

MCP сервер — написаний на TypeScript сервер, що відповідає за взаємодію Cursor AI з Figma.
Figma плагін — дає змогу Cursor AI надсилати команди безпосередньо у відкритий дизайн у Figma.
WebSocket сервер — забезпечує миттєвий зв'язок між MCP сервером і плагіном Figma.

Як це працює?

Після встановлення плагіну та запуску сервера дизайнер отримує низку інструментів для роботи з елементами дизайну через Cursor AI. Серед них:

Робота з документом та вибором:

get_document_info – інформація про відкритий файл.
get_selection – інформація про обрані елементи.
get_node_info – деталізовані дані про конкретний елемент.

Створення нових елементів:

create_rectangle – прямокутники із заданими параметрами.
create_frame – створення контейнерів-фреймів.
create_text – додавання текстових елементів.

Стилізація елементів:

set_fill_color – налаштування кольору заливки.
set_stroke_color – колір та товщина обводки.
set_corner_radius – закруглення кутів з можливістю налаштування окремих кутів.

Макетування і управління елементами:

move_node – переміщення елементів.
resize_node – зміна розміру елементів.
delete_node – видалення елементів з документа.

Компоненти та стилі:

get_styles, get_local_components, get_team_components – перегляд інформації про компоненти та стилі.
create_component_instance – створення екземплярів компонентів.

Експорт та розширені можливості:

export_node_as_image – експорт елементів у PNG, JPG, SVG чи PDF.
execute_figma_code – виконання JavaScript у Figma (рекомендується використовувати з обережністю).

Початок роботи

Для швидкого запуску потрібно встановити Bun (менеджер пакетів та інструментів JavaScript), підключити MCP сервер у Cursor та активувати плагін у Figma.

Інструкція зі встановлення доступна в офіційному репозиторії.

Free Handwritten Fonts with Ukrainian Language Support

Dinozavrix — Thu, 13 Mar 2025 09:55:47 +0000

Looking for stylish handwritten fonts that support the Ukrainian language? We've compiled a list of unique and elegant options to enhance your projects with personality and sophistication.

Sweet Mavka Script Font

The name Mavka comes from Ukrainian folklore, referring to a mystical creature that loved flowers, wore them in her hair, and lured young men into the mountains in spring.

Sweet Mavka Script is a stylish and refined handwritten font that supports both Latin and Cyrillic alphabets. It is versatile and looks stunning at any size. This font is ideal for branding, interior design, packaging, magazine headlines, or adding a stylish touch to your visuals. It is available for free for personal use.

Designer: Anastasiia Vyshnevska
Download: Sweet Mavka Script

Kobzar KS Font

To commemorate the 200th anniversary of the birth of Taras Shevchenko, Kyivstar created a special gift for Ukrainians—the Kobzar KS font. This typeface replicates the handwriting of the legendary poet and artist.

Despite its simplicity, Kobzar KS is highly expressive. It serves as a bridge to Ukrainian culture, reflecting the intellect and creativity of Shevchenko. By using this font, you can showcase your love for your heritage and preserve cultural traditions. The font is free to download and use under its licensing terms.

Designer: Dmytro Rastvorcev
Download: Kobzar KS

Veles Font

The Veles Font is inspired by Ukrainian cursive script, reimagined with a modern twist.

This font comes in two styles: Regular and Bold. It is suitable for both commercial and non-commercial projects.

Designer: Bohdan Hdal
Download: Veles Regular | Veles Bold

Comforter Brush Font

The Comforter Brush is a stylish brush script font with a modern, light, and dynamic feel. While resembling traditional handwriting, it features a contemporary interpretation with fluid strokes that add liveliness and uniqueness to the text.

Designer: Robert Leuschke
Download: Comforter Brush

Pacifico Font

Inspired by the vibrant American surf culture of the 1950s, Pacifico is a bold and expressive handwritten font. Its fluid strokes evoke the carefree spirit of sun-soaked beaches and rolling waves.

More than just a typeface, Pacifico exudes a retro charm, offering a fun and stylish touch to any project.

Designer: Vernon Adams
Download: Pacifico

Shantell Sans Font

Shantell Sans is a unique font created by British artist and philosopher Shantell Martin, known for her text-based artworks displayed at the Oculus in the World Trade Center and Times Square in New York.

Having struggled with spelling and reading as a child, Shantell later embraced typography as a form of self-expression. This font reflects her artistic vision, combining playfulness and creativity.

Designer: Shantell Martin
Download: Shantell Sans

Great Vibes Font

With its graceful curves and fluid connections, Great Vibes is an elegant and sophisticated script font. It blends effortless charm with a refined, formal appeal, making text appear lively and eye-catching.

This font features special ligatures and alternative characters, allowing for customized text variations and a truly unique aesthetic.

Perfect for projects that require elegance, lightness, and a touch of magic.

Designer: Robert Leuschke
Download: Great Vibes

Conclusion

Whether you're designing for branding, packaging, magazine headlines, or creative text overlays, these handwritten fonts with Ukrainian language support will bring uniqueness and artistic flair to your projects. Explore, experiment, and add a personal touch to your designs!

Як правильно скругляти кути: border-radius для плавних вкладених елементів

Dinozavrix — Thu, 06 Mar 2025 12:49:54 +0000

Чому border-radius важливий

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

Давайте розглянемо простий трюк, який допоможе зберегти плавність і послідовність округлення кутів, незалежно від кількості рівнів.

Базова Формула: Зовнішній радіус = Внутрішній радіус + відступ

Це базова формула, яка забезпечує рівномірне округлення кутів:

Почніть з внутрішнього радіусу (найменший кут у вашому дизайні).
Потім додайте відступ до цього радіусу, щоб визначити радіус зовнішнього кута.

Наприклад, якщо внутрішній контейнер має радіус 24px і ви хочете 8px відступу, встановіть радіус зовнішнього контейнера рівним:

24px + 8px = 32px.

Легко, правда?

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

Ідеальне вкладене скруглення в CSS

Розглянемо простий приклад CSS. Припустимо, ми хочемо оформити два вкладених блоки з округленими кутами. Зовнішній блок має border-radius 24px та padding 8px. Використовуючи попередню формулу, можна зробити висновок, що внутрішній блок має border-radius 16px.

.outer {
  border-radius: 24px;
  padding: 8px;
}

.inner {
  border-radius: 16px;
}

Вкладені контейнери: чому не завжди можна використовувати цю формулу

Припустимо, ви хочете створити картку з декількома шарами:

Перший контейнер: Радіус = 24px, Відступ = 8px
Другий контейнер (всередині першого): Радіус = 24px − 8px = 16px
Третій контейнер (всередині другого): Радіус = 16px − 8px = 8px
Четвертий контейнер (всередині третього): Радіус = 8px − 8px = 0px

Ой. Досягнувши найвнутрішнього шару, кути стають гострими. Це зовсім не той плавний вигляд, якого ви прагнули.

Отже, як це виправити?

Замість того, щоб щоразу віднімати повний відступ, спробуйте зменшувати його пропорційно. Ось що я маю на увазі:

Перший шар: Радіус = 24px, Відступ = 8px
Другий шар: Радіус = 24px − 8px = 16px
Третій шар: Радіус = 16px − (8px / 2) = 12px
Четвертий шар: Радіус = 12px − (8px / 2) = 8px

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

Приклад з реального життя: розробка карткового компонента

Припустимо, ви розробляєте картковий компонент з трьома шарами:

Зовнішня картка має радіус 24px з 8px відступу.
Усередині, зона контенту має радіус 16px з 6px відступу.
Всередині цього — іконка або кнопка з радіусом 10px.

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

Навіщо клопотатися? Сила послідовних кутів

Послідовні кути можуть здатися незначними, але вони мають велике значення. У дизайні інтерфейсу все зводиться до деталей, і візуальна гармонія елементів створює враження цілісності. Користувачі можуть не усвідомлювати окремо border-radius кожного елемента, але загальна гармонія робить дизайн більш акуратним та професійним.

Професійні поради щодо роботи з border-radius

Почніть з великого: Використовуйте більший радіус на зовнішньому шарі, щоб було простір для плавного зменшення.
Грайте з відступами: Не обмежуйте себе одним і тим самим відступом для кожного шару. Спробуйте зменшувати його поступово, щоб зберегти послідовність округлення.
Обмежте кількість шарів: Занадто багато вкладених шарів можуть створити перевантаження. Найкращий результат досягається з двома або трьома шарами.
Перевіряйте в інструментах дизайну: Програми на зразок Figma або Sketch ідеально підходять для візуалізації налаштувань border-radius. Ви можете експериментувати з числами та бачити, як кожен шар формує загальний вигляд у реальному часі.

Підсумок

Досягнення ідеального border-radius для вкладених контейнерів – це питання балансу. Завдяки цій простій формулі та кільком коригуванням ви зможете зберегти дизайн плавним і професійним. Наступного разу, працюючи з округленими кутами, пам’ятайте: додайте відступ до внутрішнього радіусу для зовнішнього шару і коригуйте за потребою для глибших рівнів.

З невеликими зусиллями ви зможете округлювати кути як професіонал!

Якщо вам цікавіше дізнатися більше про тему скруглення кутів, рекомендую прочитати статтю Чому ми скругляємо кути

Чому ми скругляємо кути

Dinozavrix ・ Серп 28 '23

#ui #ux

OpenAI представила оновлені бренгайди

Dinozavrix — Wed, 05 Feb 2025 12:02:51 +0000

OpenAI оновила свої брендові гайдлайни, надавши партнерам, розробникам та користувачам детальні правила використання логотипів, шрифту OpenAI Sans та інших фірмових елементів.

Словесний знак OpenAI є найчистішим виразом нашої візуальної філософії. Він створений шрифтом OpenAI Sans, де літера "O" має ідеальну круглу форму.

Разом із логотипами компанія оновила типографіку OpenAI Sans – шрифт, який поєднує технічну точність із людяністю. Він доступний у п'яти основних варіаціях, включаючи Light, Regular, Medium, Semibold і Bold.

OpenAI також наголосила на чітких правилах щодо використання фірмових елементів у партнерських проєктах. Зокрема, всі ко-брендовані матеріали мають проходити перевірку як OpenAI, так і партнера.

Для журналістів та блогерів компанія також запровадила нові правила щодо згадування OpenAI у прес-релізах та публікаціях. Усі згадки повинні відповідати офіційному формулюванню:

"OpenAI – компанія, що займається дослідженнями та впровадженням штучного інтелекту з метою створення безпечних і потужних технологій на благо людства."

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

Докладніше https://openai.com/brand/

Безкоштовні рукописні шрифти з підтримкою української мови

Dinozavrix — Wed, 06 Nov 2024 13:24:10 +0000

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

Шрифт Sweet Mavka Script

Мавка — загадкова істота з українських легенд. Вони любили квіти, носили їх у волоссі й заманювали хлопців навесні в гори, де ті знаходили свою смерть.

Шрифт Sweet Mavka Script це стильний і витончений шрифт, підтримує як латиницю, так і кирилицю. Він універсальний і виглядає чудово у будь-якому розмірі. Його можна використовувати для брендингу, дизайну інтер’єрів, упаковок, заголовків у журналах або для стильних текстових вставок на фото. Шрифт доступний для безкоштовного особистого використання.

Автор Anastasiia Vyshnevska
Скачати шрифт Sweet Mavka Script

Шрифт Kobzar KS

До 200-річчя з дня народження Тараса Шевченка Kyivstar створив подарунок для українців — шрифт Kobzar KS. Він передає почерк нашого легендарного поета і художника.

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

Автор Дмитро Растворцев
Скачати шрифт Kobzar KS

Шрифт Велес

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

Шрифт доступний у двох накресленнях: звичайному (regular) та гладкому (bold). Ви можете використовувати шрифт для некомерційних і комерційних проектів.

Автор Богдан Гдаль
Скачати шрифт Veles Regular, Veles Bold

Шрифт Comforter Brush

Comforter Brush — це стильний «пензлевий» шрифт, який має сучасний, легкий та динамічний характер. Comforter Brush створений у формі рукописного стилю, але з власною сучасною інтерпретацією. Він нагадує легкі мазки пензля, що додає тексту живості та унікальності.

Автор Robert Leuschke
Скачати шрифт Comforter Brush з Google Fonts

Шрифт Pacifico

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

Pacifico — це не просто шрифт, це настрій, свобода і трохи ретро-шарму.

Автор Vernon Adams
Скачати шрифт Pacifico з Google Fonts

Шрифт Shantell Sans

Британська художниця та філософ Шантель Мартін відома своїми роботами, в яких вона активно використовує слова. Її мистецтво прикрашає Oculus у Всесвітньому торговому центрі в Нью-Йорку. Її роботи бачили і на екранах Таймс-сквер, і на сцені Лінкольн-центру, де виступає Нью-Йоркський балет.

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

Автор Shantell Martin
Скачати шрифт Shantell Sans з Google Fonts

Шрифт Great Vibes

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

Шрифт має спеціальні лігатури, що роблять з'єднання літер більш м'якими, є альтернативні символи. Текст можна робити ще більш унікальним і гратися з його виглядом.

Він ідеально підходить для проєктів, де потрібно передати елегантність, легкість і трохи чарівної атмосфери в тексті.

Автор Robert Leuschke
Скачати шрифт Great Vibes з Google Fonts

UXPUB 🇺🇦 Дизайн-спільнота: Dinozavrix

Що таке Figma Agent для дизайнерів і як він працює

Figma запустила власного AI-агента для дизайнерів

Як Figma Agent і MCP Server працюють разом

Дослідження більшої кількості напрямків

Як Figma Make і Figma Agent вписуються у workflow

Приклад prompt для design exploration

Приклад prompt для design generation

Автоматизація рутинної роботи

Приклади prompt для consistency

Приклад prompt для documentation

Робота з feedback

Приклад prompt для feedback

Що далі

Доступність

OpenAI представила нову флагманську модель для генерації зображень — GPT Image 2

Головні фішки GPT Image 2

Приклади використання

Маскоти

Логотипи

Лендінги

Плакати

Інфографіка

Прості презентації

Higgsfield AI здійснила революцію: 23-хвилинний пілот серіалу створено лише за 4 дні

10 фактів про шрифти, які ви не просили

1. Helvetica — швейцарець без настрою!

2. Comic Sans: створено для дітей… і інтерфейсу Microsoft Bob

3. Справжній "безсмертний" шрифт — Garamond. Йому понад 500 років.

4. Є шрифти, які імітують почерк серійного вбивці.

5. Капітель — це не просто зменшені великі літери.

6. Значок "&" (амперсанд) — це лігатура.

7. "Зарубки" (Serif) мають практичне походження.

8. Назва шрифту Times New Roman говорить сама за себе.

9. Курсив був створений для економії місця.

10. Шрифт Trajan використовується у кожному другому постері до фільму.

Бонус: Піктограми — універсальна візуальна мова

Новинки Figma Config 2025: огляд нових інструментів Make, Sites, Grid, Draw та Buzz

Config 2025: новий етап розвитку дизайну

Зміст

Figma Make: від дизайну до коду в одному середовищі

Figma Sites: публікація сайтів без додаткових інструментів

Grid: структуровані макети без складності

Figma Draw: потужні векторні інструменти

Figma Buzz: брендовані активи для всієї команди

Підсумок

Як AI змінює світ дизайну та розробки: 5 головних трендів за версією Figma

1. Агентний AI — найшвидше зростаюча категорія

2. Успіх потребує поєднання перевірених методів та інновацій

3. Малі компанії активно експериментують з AI

4. AI проникає в усі аспекти роботи, але дизайнери менш задоволені, ніж розробники

5. Майбутнє за AI, але шлях ще не визначений

Битва за Dev Mode: Figma погрожує стартапу Lovable через назву функції

У чому суть конфлікту?

Тонка межа між торговою маркою та загальновживаним терміном

Ризики жорсткої політики захисту бренду

Контекст: Що насправді відбувається з Figma?

Що далі?

Новий плагін Cursor AI дозволяє робити дизайн у Figma за допомогою штучного інтелекту

Cursor тепер може програмно взаємодіяти з Figma завдяки новому MCP-плагіну

Що нового?

Як це працює?

Робота з документом та вибором:

Створення нових елементів:

Стилізація елементів:

Макетування і управління елементами:

Компоненти та стилі:

Експорт та розширені можливості:

Початок роботи

Рекомендації для роботи:

Free Handwritten Fonts with Ukrainian Language Support

Sweet Mavka Script Font

Kobzar KS Font

Veles Font

Comforter Brush Font

Pacifico Font

Shantell Sans Font

Great Vibes Font

Conclusion

Як правильно скругляти кути: border-radius для плавних вкладених елементів