ITMO Design System
Дизайн-система, поддерживающая Edita
Из разрозненного UI Kit в полноценную дизайн-систему
Перестроил архитектуру дизайн-системы ИТМО: компоненты, токены, документацию и правила работы команды. Создал единый подход к проектированию и передаче решений в разработку.
МОЯ РОЛЬ
Архитектура системы · Документация · Семантика токенов · Дизайн-ревью
FileUploader
СЕМАНТИКА ТОКЕНОВ
NIGHTDAY / PRIMARY / VIOLET · BLUE · GREEN
30+
компонентов с документацией
500+
дизайн-токенов
01
Как я перестроил существующую систему
Дизайн-система в ИТМО уже существовала, но больше напоминала UI Kit. Компонентам не хватало общей архитектуры, документации и единых правил использования.
Начав с отдельных компонентов, я постепенно взял на себя архитектуру всей системы, её развитие и контроль качества.
Разработал и внедрил
Структуру страниц компонентов, правила именования свойств и подход к дизайн-токенам.
Руководил и проверял
Качество компонентов, документацию, работу дизайнеров и соответствие реализации макетам.
Работа команды
Руководил созданием и поддержкой компонентов, часть из которых проектировал лично.
Вместе с разработчиками
Согласовывал спецификации, технические ограничения и передачу решений в разработку.
Дизайн-система используется в Edita, платформе для 50+ сайтов ИТМО.
02
Единая архитектура компонентов в Figma
Определил структуру страниц компонентов и общие правила настройки свойств. Это позволило команде работать по единому подходу.
Страница компонента
↓
Основной компонент
Базовый компонент, составные элементы,
свойства и варианты.
Примеры свойств
Состояния, размеры, темы
и дополнительные настройки.
Документация
Поведение, крайние случаи
и прототипы для разработки.
ОБЩИЕ СВОЙСТВА
Theme · State · Size · Mode · Type · Form
Visibility · Editable text · Icon swaps
Дополнительные свойстваНастройки, необходимые конкретному компоненту.
Правила задокументированы в Confluence и применяются при проектировании компонентов.
03
Button: от набора примеров к гибкой настройке
Ограниченный набор вариантов. Документация в основном показывала готовые примеры кнопок, их размеры и отступы.
Компонент настраивается через независимые свойства. Можно менять внешний вид и поведение, не создавая отдельный компонент для каждого сочетания.
Раньше
Ограниченные варианты · Примеры в документации
Сейчас
Полная модель свойств
Theme · Mode · Priority · State · Size · Form
Примеры из документации · Priority / State / Size
Сохранили необходимые состояния и расширили возможности настройки компонента.
04
FileUploader: анатомия и варианты компонента
На примере компонента FileUploader я определил единую архитектуру, набор состояний и структуру документации.
Она помогает дизайнерам собирать нужные варианты, а разработчикам понимать их поведение.
Основной компонентВарианты Day/Night и структура документации.
Field Загрузка файлов, галереи, изображения для сайтов и фоновые элементы.
ButtonЗагрузка логотипов, иконок и фавиконов.
Параметры компонента
Theme
Day / Night
Mode
Field / Button
Size
L / M / S
State
Default / Hover / Active / Disabled / Error
Loading
None / In Progress / Uploaded
108 комбинаций. Допустимые сочетания свойств с учётом ограничений состояний загрузки. In Progress: только Default; Uploaded: Default, Error и Disabled.
Определил архитектуру компонента и правила документации. Разработка отдельных вариантов велась вместе с командой.
05
Поведение компонента и нестандартные сценарии
Поведение тоже часть контракта компонента
Документация описывает не только внешний вид, но и загрузку, ошибки, удаление файлов и ограничения отображения.
УСПЕШНАЯ ЗАГРУЗКА
Initial → In Progress → Uploaded → Deleted
01 / Initial
02 / In Progress
03 / Uploaded
04 / Deleted
ОШИБКА И ВОССТАНОВЛЕНИЕ
Error → Reset
Состояния прототипа из документации · ПРИМЕРЫ
Длинные названия файлов Обрезка посередине сохраняет видимыми начало и расширение файла.
Превью изображений 16:9
Пропорции и поведение превью сохраняются при разной ширине компонента. 296 / 592 px. Примеры отображения превью при разной ширине. Минимальная ширина Field: 296 px; компонент растягивается по контейнеру.
16 : 9
06
Дизайн-токены: от цветов к единой системе значений
Инициировал внедрение дизайн-токенов и разработал их семантику. Вместо разрозненных стилей появились общие названия и значения для дизайна и разработки.
Согласовал структуру с разработчиками и проверил способы передачи токенов в код.
ТЕМЫ ОФОРМЛЕНИЯ
Day
Base
Static
Текст, иконки, фоны, границы и статусы.
Dynamic
Значения для ролей и состояний.
Primary
Акцентные цвета и интерактивные состояния.
Secondary
Светлые и тёмные оттенки для фонов, поверхностей и границ.
Night
Base
Static
Текст, иконки, фоны, границы и статусы.
Dynamic
Значения для ролей и состояний.
Primary
Акцентные цвета и интерактивные состояния.
Secondary
Светлые и тёмные оттенки для фонов, поверхностей и границ.
Visually impaired
Дополнительные палитры для специальных режимов отображения.
GLOBAL
Шрифты
Границы
Размеры и отступы
500+ токеновЦвета, типографика, размеры и правила оформления.
ПРИМЕРЫ ТОКЕНОВ
Цвета и доступность
day/primary/blue/default
#006AFF
day/primary/blue/hover
#1C8CFF
day/primary/blue/active
#1362BA
day/secondary/blue/light/10
#E4EFFF
day/secondary/blue/light/20
#CBE2FF
day/secondary/blue/light/30
#AED2FF
Типографика и размеры
font/Families/Body
Golos
font/Style/Desktop/Body/M
16px / 24px
border/radius/x1
8px
elements/height/L
48px
elements/spacing/padding/x2
16px
elements/spacing/gap/x3
24px
Токены задают общие значения, на которые опираются дизайнеры и разработчики.
07
От дизайн-системы к разработке
Для реализации команда использует два источника данных: компоненты со спецификациями и JSON-файл токенов. Это даёт общие правила поведения и оформления интерфейсов.
Семантика
дизайн-системы
Спецификации компонентовПоведение, свойства и состояния.
JSON-файл токеновИмена и значения дизайн-токенов.
Реализация в коде
Документация также фиксирует зависимости, авторов, даты и историю изменений.
Определил архитектуру, согласовал формат передачи токенов и участвовал в проверке реализации вместе с разработчиками.
08
Правила, дизайн-ревью и история изменений
Выстроил процесс, в котором компоненты создаются по общим правилам, проходят ревью и остаются понятными после изменений.
Правила
Единая структура документации и именования свойств с учётом особенностей каждого компонента.
Дизайн-ревью
Проверяю архитектуру, состояния и документацию. Помогаю команде развивать компоненты без потери согласованности.
Changelog
История изменений с авторами, датами и зависимостями компонентов.
09
Общая основа для продуктовой разработки
Объединил архитектуру компонентов, документацию и семантику токенов в систему общих правил для дизайнеров и разработчиков.
Основа дизайн-системы
Компоненты, документация и токены, которые можно использовать в разных проектах.
50+ сайтов на Edita
Дизайн-система помогает поддерживать общие правила интерфейсов на платформе, где создаются сайты разных подразделений ИТМО.
Лидерство
Design Operations
Как я перестроил работу дизайн-команды, сократил многозадачность и начал измерять результаты.
Сравнение разных задач и периодов.