UI и дизайн-система ·
Определить дизайн-токены
Зафиксировать семантические решения цвета, типографики, отступов и размеров.
Быстро понять за 2 минуты
Зафиксировать семантические решения цвета, типографики, отступов и размеров. Результат работы — Token Set.
Контекст
Урок относится к этапу «UI и дизайн-система». Создать последовательный визуальный язык и устойчивые компоненты для всех состояний. Задачу выполняют до реализации или согласования зависимого решения, чтобы команда опиралась на проверенные факты и однозначные договоренности.
Что это дает
Правильно выполненная работа снижает стоимость переделок, делает решение проверяемым и дает участникам единый источник информации. Практический результат фиксируется в артефакте «Token Set».
Как выполнить
- Проведите audit существующих значений
- Создайте primitive и semantic tokens
- Согласуйте naming с разработкой
Критерии приемки
- Токены покрывают темы и состояния
- Нет значений без назначения
- Экспорт проверен в коде
Типичные ошибки
- Называть токены по цвету компонента
- Создавать токен на каждый пиксель
Инструменты
Рабочий артефакт
Рабочий артефакт
Token Set
На рабочем проекте специалист начинает с шага «Проведите audit существующих значений», фиксирует выводы в артефакте «Token Set» и передает его владельцам решения. Пункт закрывается после проверки: «Токены покрывают темы и состояния».
- Компоненты
- Состояния
- Токены
- WCAG
Контроль качества
UI Specification
Токены покрывают темы и состояния
После релизов, изменения требований, обновления целей и появления новых рисков.
Контекст, проблему, доказательство, владельца, срок и критерий приемки.
Перед отметкой выполнено: Токены покрывают темы и состояния
Как применять
Начинайте с влияния на пользователя, продукт и команду. Затем проверьте реализуемость, критерии качества и формат доказательства результата. Хороший пункт чеклиста объясняет, какую проблему закрываем, как выполняем работу и по каким признакам считаем ее завершенной.
Режим обучения
Тест по теме
Проверка понимания
Ответьте на вопросы по материалу и получите итоговый отчет: что понято хорошо, а что стоит перечитать.