Що таке дизайн-система?
Дизайн-система — єдиний набір правил і готових компонентів продукту: палітра, типографіка, відступи, кнопки, поля, картки, а також опис того, коли і як їх застосовувати. Вона існує одночасно в макетах і в коді.
Без неї кожен новий екран малюється заново, і в продукті з часом зʼявляються пʼять відтінків синього та чотири види кнопок. Дизайн-система прибирає ці розбіжності й помітно пришвидшує роботу: екран збирається з готових блоків, а не створюється з нуля.
Ключова умова — синхронність. Компоненти у 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);
}Часті запитання
Чим дизайн-система відрізняється від UI kit?
UI kit — це набір готових елементів у макеті. Дизайн-система додає до нього правила застосування, живі компоненти в коді та процес їх оновлення. Простіше кажучи, UI kit показує, як виглядає кнопка, а дизайн-система відповідає ще й на питання, коли її використовувати.
Чи потрібна дизайн-система маленькому проєкту?
Повноцінна — ні, вона буде дорожчою за користь. Але мінімальний набір токенів варто завести одразу: кольори, розміри тексту, крок відступів, радіуси. Це майже не потребує часу на початку і позбавляє різнобою, коли проєкт почне рости.
Хто підтримує дизайн-систему?
У великих компаніях — окрема команда з дизайнера і фронтенд-розробника. У невеликих це спільна відповідальність: хто додає новий компонент, той і заносить його в бібліотеку. Без власника система швидко розходиться з реальним продуктом і перестає використовуватися.
Що входить у дизайн-систему крім компонентів?
Токени — кольори, типографіка, відступи, тіні, радіуси. Правила доступності: мінімальний контраст, розміри зон натискання, поведінка при навігації з клавіатури. Тексти інтерфейсу і тон спілкування. А також опис станів: завантаження, порожній екран, помилка.