Коротко: дизайн-система — це набір повторюваних елементів макета (кольори, шрифти, кнопки, картки), збережених у Figma один раз і використовуваних у всьому проєкті замість того, щоб перемальовувати кожен екран з нуля. На курсі UI/UX у Figma це не окрема тема з номером, а звичка, яку дитина засвоює одразу після знайомства з самою програмою — приблизно з теми 21 з 27, коли починається робота з макетами.

Проблема, яку вирішує дизайн-система

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

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

З чого вона складається на практиці

У межах курсу дитина працює з трьома базовими шарами: кольоровими та текстовими стилями (один раз задане значення, яке можна застосувати будь-де), компонентами (кнопка чи картка, зібрана один раз і скопійована як «інстанс», що оновлюється разом з оригіналом) і, останнім часом, змінними — окремим типом значень, які можна міняти масово. Це саме те, з чим дитина стикається, щойно доходить до Figma в програмі курсу — там уже готові макети підказують, як побудований проєкт зсередини, а не тільки як він виглядає ззовні.

Свіжий приклад: як Figma сама розвиває цю ідею

3 вересня 2026 року Figma випустила оновлення Opacity Variables — можливість керувати прозорістю через змінні так само, як кольором чи текстом, і застосовувати її поверх будь-якого кольору бібліотеки без «відв'язки» від джерела, тобто зберігаючи можливість масово змінити значення пізніше. До цього, щоб зробити напівпрозору версію кольору з бібліотеки, доводилося відв'язувати стиль від джерела і губити зв'язок з рештою системи. Це прямий приклад того, чому дизайн-система — не разова вправа для курсу, а інструмент, який сама Figma продовжує розвивати: чим більше властивостей можна тримати «на прив'язці», тим менше ручної роботи лишається дизайнеру при будь-якій зміні.

Чи не занадто складно це для підлітка

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

Одна кнопка — кілька станів

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

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

Що це дає в портфоліо

У межах курсу «UI/UX дизайн у Figma» фінальний проєкт оцінюють не тільки за виглядом окремих екранів, а і за тим, наскільки послідовно в них використані одні й ті самі кольори, відступи й компоненти. У статті «Що входить у портфоліо після курсу UI/UX дизайну в Figma» описано, які саме роботи туди потрапляють, — і макет із власною міні-системою стилів там виглядає переконливіше за окремий гарний екран без внутрішньої логіки, навіть якщо той екран технічно намальований охайніше.

Хто цим займається в реальній команді

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

Сам курс триває 18 місяців і охоплює 156 занять для дітей 12–18 років у групах до 6 осіб — цього часу достатньо, щоб дизайн-система встигла стати звичкою, а не одноразовою вправою напередодні здачі проєкту.

Коротке FAQ

Чи потрібно будувати повну дизайн-систему для навчального проєкту? Ні, у межах курсу досить міні-версії — кілька кольорових стилів, один-два типи кнопок і послідовна типографіка. Повноцінні системи великих продуктів (як у Google чи Airbnb) — це вже професійний рівень, до якого веде не один курс, а роки практики.

Чи можна обійтися без цього і просто малювати гарно? Можна, і перші місяці курсу так і відбувається — спочатку дитина вчиться складати композицію взагалі. Але без системи будь-яка правка замовника перетворюється на години ручної роботи замість хвилин, а саме швидкість реакції на правки часто вирішує, чи повернеться клієнт до дизайнера вдруге.

Чи це те саме, що бренд-гайдлайн? Ні, гайдлайн описує, як бренд повинен виглядати словами й прикладами для людей. Дизайн-система — робочий інструмент усередині Figma: файли, стилі й компоненти, якими дизайнер користується щодня, а не документ, який читають раз на проєкт.

Чи можна скопіювати готову дизайн-систему з інтернету і не будувати свою? Технічно так — у Figma Community є безкоштовні бібліотеки компонентів. Але для навчального проєкту це радше шкідливо: сенс вправи саме в тому, щоб дитина сама вирішила, скільки варіантів кнопки їй потрібно і які кольори повторюються в її макеті, а не скопіювала готове рішення, не розібравшись, чому воно побудоване саме так. Готова бібліотека придатна пізніше, коли дитина вже розуміє логіку зсередини і може свідомо вирішити, що з чужого рішення підходить її проєкту, а що варто переробити під власні кольори й компоненти.