06 /2026 · у роботі
КонцептForma — масштабована дизайн-система для digital-студій
Проєктування масштабованої дизайн-системи для digital-студії: від базових дизайн-токенів і бібліотеки компонентів до правил використання, адаптивних патернів і документації. Кейс у роботі.
- Design System
- UI Design
- Design Tokens
- Accessibility
Кейс у роботі. Forma Studio — вигаданий клієнт, макети й документація зʼявляться тут, щойно будуть готові.
01 /06
Про проєкт
Forma — концепт дизайн-системи для digital-студії, яка одночасно веде кілька клієнтських проєктів: корпоративні сайти, адмін-панелі й SaaS-продукти.
Forma Studio — вигаданий клієнт. Це самостійний концепт без реального замовлення, тож результати тут — цілі, а не виміряні показники.
Мета кейса — показати роботу Design System Designer: архітектуру токенів, масштабування компонентів, адаптивність, доступність і передачу в розробку.
- Тип
- Самостійний концепт
- Клієнт
- Forma Studio (вигаданий)
- Моя роль
- UI/UX Designer, Design System Designer
- Продукти
- Сайти · Адмін-панелі · SaaS
- Статус
- У роботі: архітектура токенів і план бібліотеки
02 /06
Спільна основа, різні бренди
Кожен проєкт студії стартує майже з нуля: компоненти дублюються, стилі розходяться, а передача в розробку щоразу інша.
Завдання — стандартизувати компоненти, стилі й правила і водночас дати кожному клієнту власну візуальну ідентичність без копіювання бібліотеки.
- 01
Дизайнер студії
збирає інтерфейс нового клієнта з готових компонентів, змінюючи лише бренд.
- 02
Фронтенд-розробник
бачить ті самі назви токенів і властивостей, що й у коді.
- 03
Клієнт студії
отримує власний бренд без втрати якості й доступності.
03 /06
Архітектура токенів
Бренд і тема змінюють значення, а не компоненти. Для цього токени розкладено на три рівні.
- 01
Базові токени
Палітра, типографічна шкала, крок 4 px, радіуси, тіні. Сирі значення без змісту.
- 02
Семантичні токени
Ролі: фон, текст, акцент, межа, успіх, помилка. Бренд клієнта й тема змінюють лише те, яке базове значення стоїть за роллю.
- 03
Токени компонентів
Кнопка, поле, картка посилаються лише на семантичні ролі. Новий бренд не вимагає правки жодного компонента.
04 /06
Обсяг системи
Це запланований обсяг концепту, а не перелік уже готових матеріалів.
Основи
- Семантичні кольори
- Типографічна шкала
- Сітка 4 px
- Радіуси, тіні, межі
- Адаптивні сітки
Компоненти
- Кнопки й поля
- Селекти, чекбокси, радіо
- Картки, модалки, підказки
- Навігація, вкладки, хлібні крихти
- Таблиці, фільтри, пагінація
- Сповіщення й тости
Архітектура компонентів
- Варіанти й властивості
- Інтерактивні стани
- Світла й темна теми
- Адаптивна поведінка
- Доступність
Документація й передача
- Правила використання
- Приклади Do і Don’t
- Специфікації станів
- Структура токенів
- Правила іменування
05 /06
План роботи
Кейс у роботі. Кожен етап зʼявиться тут, коли буде готовий у Figma.
- 01
UI-аудит
Інвентар типових компонентів і того, що справді відрізняється між брендами.
- 02
Основи
Кольори, типографіка, відступи, сітки, теми.
- 03
Компоненти
Бібліотека з варіантами, властивостями й станами.
- 04
Патерни й шаблони
Форми, таблиці з фільтрами, дашборд — на реальних екранах сайту, адмінки й SaaS.
- 05
Документація
Правила використання, Do і Don’t, специфікації для розробників.
- 06
Огляд системи
Презентаційна сторінка системи і два бренди на одних компонентах.
06 /06
Цілі
Це цілі концепту, а не досягнуті результати. Перевірити їх можна лише на реальних проєктах.
Повторне використання компонентів 80–90%. На 30% менше часу на макети нового проєкту. На 40% менше дублікатів компонентів. 100% основних компонентів задокументовано. Світла й темна теми. Desktop, tablet і mobile.
Наступний кейс · 01 / 06
Робочий простір продуктового дизайнера
Розкажіть коротко про продукт і терміни — відповім протягом доби.