Красивий макет уже не є доказом кваліфікації. Сьогодні від UX/UI дизайнера очікують не окремі гарні екрани, а систему, з якої ці екрани збираються — послідовно, швидко й так, щоб продукт можна було масштабувати. Ця система живе в Figma й називається дизайн-системою.
У цій статті розберемо простими словами, що таке дизайн-система, навіщо вона UX/UI-дизайнеру, з чого реально почати в Figma й чому це не «теорія для галочки», а щоденний робочий інструмент. Якщо ви ще тільки розбираєтесь у професії, спершу корисно прочитати, хто такий UX/UI дизайнер і що він робить — ця стаття про наступний, практичний крок.
Що таке дизайн-система простими словами
Дизайн-система — це не один макет, а набір багаторазових будівельних блоків та правил, за якими будується весь інтерфейс: кольори, типографіка, компоненти (кнопки, інпути, картки) і гайдлайни, як усе це використовувати. Сама Figma описує дизайн-систему як набір компонентів, стилів і ассетів, які тримають продукт консистентним у різних командах і продуктах.
Проста аналогія: макет — це готова страва, а дизайн-система — це кухня з інгредієнтами й рецептами. Маючи кухню, ви приготуєте будь-яку страву швидко й у тому самому стилі. Без неї — щоразу починаєте з нуля.
Навіщо вона UX/UI дизайнеру
Для UI/UX дизайнера дизайн-система вирішує одразу кілька болей:
- Послідовність. Однакові кнопки, відступи й кольори на всіх екранах — інтерфейс сприймається як одне ціле, а не як клаптикова ковдра.
- Швидкість. Новий екран збирається з готових компонентів за хвилини, а не малюється щоразу заново.
- Менше рішень. Ви не вирішуєте вкотре, який відтінок сірого взяти — рішення вже ухвалене й зафіксоване.
- Простіша передача розробникам. Компоненти й токени лягають на код майже один в один, тож менше непорозумінь на хендофі.
З чого почати в Figma
Головна помилка новачків — намагатися одразу зібрати «монстра» на сотні елементів. Правильний шлях — почати з малого й нарощувати. Ось базовий порядок:
- Кольори. Створіть стилі або змінні (variables) для палітри. Хороша практика — два рівні:
- примітиви — сира палітра (наприклад,
blue-500,gray-100); - семантичні — ролі, що посилаються на примітиви (
text-primary,surface,border), з режимами Light/Dark.
- примітиви — сира палітра (наприклад,
- Типографіка. Задайте текстові стилі з чіткою ієрархією:
- заголовки (H1–H3), основний текст, підписи;
- однакові розміри, міжрядкові інтервали й накреслення для всього продукту.
- Сітка й відступи. Оберіть крок (зазвичай 8px) і тримайтеся його в паддінгах та відступах — це те, що робить макет «акуратним» майже автоматично.
- Компоненти. Зберіть базові ui components — кнопки, інпути, картки:
- використовуйте variants для станів (default, hover, disabled);
- вмикайте auto layout, щоб компоненти тягнулися під контент.
- Бібліотека. Опублікуйте все у team library, щоб компоненти були за перетягуванням в усіх файлах команди.
Не обов'язково будувати це з нуля. У Figma Community є готові базові дизайн-системи — офіційний стартовий UI-kit від Figma, який показує найкращі практики й економить тижні. Покроково цей шлях також розбирає урок Figma «Build your design system», а тонкощі роботи з компонентами й бібліотеками — гайд Figma про best practices.
Чим дизайн-система відрізняється від просто красивого макета
Це ключова різниця, яку варто зрозуміти раз і назавжди:
- Макет показує, як виглядає один конкретний екран. Це фінальна картинка.
- Дизайн-система визначає, з чого будь-який екран збирається. Це джерело істини (single source of truth).
Змінили колір кнопки в дизайн-системі — він оновився на всіх сотнях екранів автоматично. У «просто макеті» довелося б правити кожен вручну. Саме тому дизайн-система масштабується, а гарний макет — ні.
Чому це важливо для команди й масштабування
Поодинці можна працювати й без системи. Але щойно з'являється команда або продукт росте, дизайн-система стає критичною:
- Єдине джерело істини — усі дизайнери й розробники беруть елементи з одного місця, тож продукт не «розповзається».
- Масштабування на теми й бренди — через variable modes одна система підтримує світлу/темну теми чи кілька брендів без дублювання.
- Онбординг нових людей — новачок швидко розуміє правила, бо вони зафіксовані, а не «в голові» в тімліда.
Figma не випадково позиціює себе як спільне середовище, де дизайн, код і AI працюють разом: дизайн-система — це саме той місток між дизайном і розробкою.
Часті помилки початківців
- Будувати завелику систему одразу, замість того щоб рости поступово.
- Не мати правил найменування — потім неможливо знайти потрібний стиль.
- Ігнорувати auto layout — компоненти не тягнуться під контент і ламаються.
- Плутати макет і систему — робити «красиво один раз» без багаторазовості.
FAQ
Скільки компонентів потрібно на старті?
Мінімум: палітра кольорів, кілька текстових стилів і 3–5 базових компонентів (кнопка, інпут, картка). Цього достатньо, щоб зібрати перші екрани. Решту додавайте, коли вона реально знадобиться.
Чи потрібна дизайн-система для маленького проєкту?
Навіть для одного лендінга базові стилі кольорів і типографіки заощаджують час і рятують від різнобою. Повноцінна система з бібліотекою — уже коли проєкт росте або над ним працює команда.
Це замінює навички дизайну?
Ні. Дизайн-система — інструмент, а не заміна смаку й розуміння UX. Вона прибирає рутину, щоб ви витрачали час на складні рішення, а не на копіювання кнопок.
Що показати в портфоліо
Дизайн-система — сильний кейс для портфоліо UX/UI-дизайнера. Показуйте не лише фінальні екрани, а й систему за ними: як організовані токени, компоненти, стани. Це доводить, що ви мислите системно, а не просто «малюєте гарно». Як зібрати такий кейс, ми розібрали в гіді «Як зробити портфоліо», а приклади для натхнення — у статті про портфоліо дизайнера.
Додайте у профіль відповідні навички та інструменти, позначайте технології проєктів тегами й дивіться, як подають роботи інші фахівці.
Готові діяти?
- Створіть власне портфоліо: https://searchtalent.dev/uk/projects/new
- Каталог навичок і технологій: https://searchtalent.dev/uk/talents/skill
- Перегляньте проєкти інших фахівців: https://searchtalent.dev/uk/projects
- Більше статей: https://searchtalent.dev/uk/articles
