Що таке дизайн-система: пояснення для початківців і перша міні-система у Figma

Крок 1

Зрозумійте, з чого складається дизайн-система

Nielsen Norman Group визначає дизайн-систему як повний набір стандартів для керування дизайном у масштабі за допомогою компонентів і патернів, які можна використовувати повторно. У ній дві важливі частини: сховище з дизайном і люди, які ним керують. Саме сховище зазвичай містить три речі:

• •посібник зі стилю (style guide) — принципи дизайну, візуальні зразки й правила застосування: кольори, типографіка, тон текстів;
• •бібліотеку компонентів — окремі елементи інтерфейсу: кнопки, поля, чекбокси, у кожного є назва, опис, стани й код;
• •бібліотеку патернів — більші групи елементів і типові розкладки: форма входу, картка товару, навігація.

💡 Ті самі автори чесно пишуть і про мінуси: систему довго створювати, її треба постійно підтримувати, і людей треба вчити нею користуватися. Тому велика система для одного лендингу — зайва робота.

Крок 2

Розберіть чужу систему, перш ніж робити свою

Найшвидший спосіб зрозуміти, як влаштована дизайн-система, — відкрити відому публічну систему й подивитися, як у ній описано один компонент. Добрі приклади: Material Design від Google, Carbon від IBM, дизайн-система Atlassian і U.S. Web Design System. Оберіть одну й розберіть кнопку:

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

💡 У Figma можна підключити готові UI kits, наприклад Material 3 Design Kit від Google чи Simple Design System від Figma: вкладка Assets → Libraries → UI kits → Add to file. Подивіться, як у них названо компоненти й побудовано варіанти.

Крок 3

Закладіть фундамент: кольори, текст, відступи

Будь-яка система починається з базових рішень, які потім повторюються в кожному компоненті. У Figma для цього є стилі (styles) і змінні (variables). Стиль зберігає набір властивостей разом: наприклад, текстовий стиль одразу містить шрифт, розмір і міжрядковий інтервал. Змінна зберігає одне значення — колір, число, текст чи true/false — і може мати кілька режимів (modes), наприклад світлу й темну тему (режими доступні на платних тарифах і Education). Для навчальної системи зробіть:

• •палітру: основний колір, акцентний, кольори для помилки й успіху, нейтральні відтінки для тексту й фону;
• •шкалу тексту: заголовки двох-трьох рівнів, основний текст, дрібний підпис — як текстові стилі;
• •шкалу відступів, наприклад 4, 8, 16, 24, 32 px, як числові змінні;
• •два рівні назв кольорів: «сирі» значення (blue-500) і значення за роллю (text-primary, button-bg), де друге посилається на перше.

💡 Посилання однієї змінної на іншу у Figma називається aliasing. Змініть «сирий» синій — і всі кнопки та посилання, що посилаються на нього, оновляться разом. Саме так зазвичай працюють дизайн-токени.

Крок 4

Зробіть три-п'ять базових компонентів

Тепер зберіть компоненти, які використовують ваш фундамент: кнопку, поле введення, чекбокс, картку й верхню панель. Кожен компонент будуйте на Auto layout, щоб він підлаштовувався під текст, і застосовуйте лише свої стилі та змінні, без «ручних» кольорів. Різні стани робіть варіантами (variants), а дрібні перемикачі — властивостями компонента (component properties): наприклад, показати чи сховати іконку в кнопці.

• •називайте компоненти зрозуміло й однаково, наприклад Button, Input, Checkbox;
• •для кожного компонента зробіть усі потрібні стани, зокрема неактивний і з помилкою;
• •перевірте, що текст у компонентах читається: Figma має вбудовану перевірку контрасту в палітрі кольорів.

Крок 5

Опишіть правила й перевірте систему на екранах

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

• •якщо ви щоразу відв'язуєте компонент (detach), щоб щось змінити, — компонент спроєктовано заслабко;
• •якщо два компоненти майже однакові, можливо, це один компонент із варіантами;
• •запишіть рішення, які ухвалили, і чому: це готовий текст для кейсу в портфоліо.

💡 Покажіть файл у спільноті й попросіть подивитися на щось конкретне: назви компонентів, варіанти кнопки чи шкалу відступів. Конкретне питання дає корисну відповідь.