Компоненты · Средняя
Использовать design tokens
Применять согласованные цвета, отступы, типографику и радиусы вместо произвольных значений.
Быстро понять за 2 минуты
Применять согласованные цвета, отступы, типографику и радиусы вместо произвольных значений. На выходе: компонент использует токены.
Контекст
Пункт относится к этапу «Компоненты». Его задача — создавать повторно используемые компоненты с ясным поведением. Он нужен до передачи результата QA, дизайнеру и владельцу продукта: иначе команда рискует брать цвет пипеткой из макета.
Что это дает
Design tokens сохраняют единый визуальный язык и упрощают изменение темы или дизайн-системы. Это помогает связать работу с общей целью: понятный, быстрый и доступный интерфейс. Практический эффект виден, когда компонент использует токены.
Как выполнить
- Найдите существующие CSS variables или theme tokens.
- Заменяйте hardcoded значения токенами.
- Проверяйте контраст и состояния hover/focus.
Критерии приемки
- Компонент использует токены.
- Нет случайных цветов и отступов.
- Состояния соответствуют дизайн-системе.
Типичные ошибки
- Брать цвет пипеткой из макета.
- Создавать новый стиль для каждого экрана.
- Игнорировать focus state.
Инструменты
Рабочий артефакт
UI inventory
Компоненты: документ с выводом, доказательствами, ответственным и следующим действием
Пример для разработки личного кабинета: специалист начинает с действия «Найдите существующие CSS variables или theme tokens». Результат прикладывают к рабочей задаче и передают следующему участнику. Пункт закрывают не по факту обсуждения, а когда выполнено условие: «Компонент использует токены».
- Components
- Variants
- Duplication
- Design tokens
Контроль качества
Карта компонентов
Компонент использует токены.
После изменения пользовательского сценария, дизайна, API-контрактов, релизов и замечаний по доступности.
Сценарий, состояние интерфейса, источник данных, критерии доступности, тесты и ограничения адаптива.
Перед отметкой выполнено: Компонент использует токены.
Как применять
Начинайте с пользовательского действия и состояния интерфейса. Затем проверьте данные, адаптивность, доступность, ошибки и производительность. Хороший frontend-пункт помогает понять, что увидит пользователь, как интерфейс поведет себя в крайних состояниях и чем подтверждается качество реализации.
Режим обучения
Тест по теме
Проверка понимания
Ответьте на вопросы по материалу и получите итоговый отчет: что понято хорошо, а что стоит перечитать.