Основи дизайн-систем: від хаотичних екранів до єдиних стандартів

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

Що буде:

• Що таке дизайн-система і чим вона відрізняється від UI-kit.
• Які проблеми в продукті вирішує дизайн-система.
• Основні компоненти дизайн-системи: токени, компоненти, правила.
• Як навести порядок у хаотичних макетах.
• Як дизайн-система допомагає команді працювати швидше та узгодженіше.

Програма:

День 1:

• Що таке дизайн-система і навіщо вона бізнесу, дизайнерам і розробникам.
• Різниця між UI kit, UI library та дизайн-системою.
• Будова UI kit: токени, компоненти, документація.
• Примітиви та семантичні змінні.
• Компоненти, варіанти та стани.
• Документація компонентів.
• Публікація бібліотеки у Figma та робота з апдейтами.
• Практика: створення компонентів, документація, публікація бібліотеки.

День 2:

• Аналіз бізнес-контексту та потреб команди.
• Робота з готовими UI бібліотеками (Ant, Chakra, Shadcn, MUI)
• Адаптація бібліотеки під бренд
• Типові проблеми готових бібліотек.
• Домовленості між дизайном і розробкою.
• Як обрати оптимальне рішення для різних типів продуктів.
• Практика: кейси стартапів, легасі-продуктів і великих команд.

Спікерка:

• Ольга Тушич - Product Design Lead у Xenoss. Має понад 10 років досвіду в продуктовому дизайні.

Вимоги до участі:

1. Ти живеш та працюєш в Україні;
2. Ти працюєш в ІТ-сфері ;
3. Впевнено володієш Figma;
4. Готовий/-а надати фідбек після навчання.