UI/UX дизайн

Що таке дизайн-система?

Дизайн-система (design system) — це єдиний набір правил і готових елементів продукту: кольори, шрифти, відступи, кнопки, поля, картки, а також опис того, коли і як їх використовувати. Вона існує одночасно і в макетах, і в коді.

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

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

Де застосовується

Дизайн-систему створюють, коли продукт стає більшим за кілька екранів: працює кілька команд, є сайт і мобільний застосунок, регулярно з’являються нові розділи. У Figma вона існує як підключена бібліотека компонентів, а в коді — як набір токенів і UI-компонентів, які використовують усі сторінки.

Користь очевидна. Новий екран збирають із готових блоків за години, а не дні; зміна кнопки одразу застосовується в усьому продукті; доступність перевіряють один раз у компоненті, а не на кожній сторінці. Великі компанії навіть публікують свої системи відкрито — Material від Google, Carbon від IBM.

Приклад

Дизайнер змінює основний колір бренду в одному місці бібліотеки, і він оновлюється на всіх макетах. Розробник змінює одну змінну в токенах, і колір змінюється на всьому сайті — без правок у сотні файлів.

:root {
  --color-brand: #5b6cff;
  --color-text: #12141c;
  --radius-md: 12px;
  --space-3: 16px;
}

.btn-primary {
  background: var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-3) calc(var(--space-3) * 1.5);
}

Токени дизайн-системи в CSS: компоненти використовують змінні, тому тему чи бренд змінюють в одному місці.

Часті запитання

Чим дизайн-система відрізняється від UI kit?

UI kit — це набір готових елементів у макеті. Дизайн-система додає правила їх використання, робочі компоненти в коді та процес оновлення. Простіше: UI kit показує, як виглядає кнопка, а дизайн-система ще й пояснює, коли її використовувати.

Чи потрібна дизайн-система невеликому проєкту?

Повна — ні, вона коштуватиме більше, ніж дасть користі. Але базовий набір токенів варто створити одразу: кольори, розміри тексту, крок відступів, радіуси заокруглень. Це майже не забирає часу на старті і рятує від хаосу, коли проєкт росте.

Хто підтримує дизайн-систему?

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

Що входить у дизайн-систему, крім компонентів?

Токени: кольори, шрифти, відступи, тіні, заокруглення. Правила доступності: мінімальний контраст, розміри зон натискання, керування з клавіатури. Тексти інтерфейсу і тон спілкування. А також опис станів: завантаження, порожній екран, помилка.

Навчання UI/UX-дизайну в OWU

Опануйте професію UI/UX-дизайнера на практичних курсах із менторами та реальними проєктами.

Обрати курс