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

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

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

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

Повʼязані терміни

UI (User Interface) — це візуальна частина продукту, через яку людина з ним взаємодіє: екрани, кнопки, поля, іконки, шрифти, кольори та відступи. UI-дизайнер відповідає за те, як продукт виглядає і як виглядають його стани.

Figma

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

UX (User Experience) — це весь досвід людини під час використання продукту: наскільки зрозуміло, де міститься потрібне, скільки кроків займає задача, що відбувається при помилці й чи залишається відчуття, що ціль досягнута без зайвих зусиль.

CSS

CSS (Cascading Style Sheets) — мова опису зовнішнього вигляду сторінки: кольори, шрифти, відступи, розташування блоків і поведінка верстки на різних розмірах екрана. HTML задає, що є на сторінці, CSS — як це виглядає.

Frontend

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