Знакомимся с формой
Мы пройдём путь от цвета, записанного прямо в CSS, до единого набора дизайн-токенов. В финале курса команда проведёт ребрендинг, и одна правка в одном файле перекрасит обычную кнопку и кнопки двух UI-библиотек.
Цель: понять, как устроены дизайн-токены, и увидеть исходное поведение формы.
Почему: дизайн-токен — это именованное решение интерфейса, например «цвет основного действия».
- Компоненты используют именованные значения вместо жёстко заданных цветов, размеров и других свойств.
- Поэтому решение можно менять централизованно, в одном месте.
Пока таких имён в проекте нет: сначала посмотрим, какую проблему они решают.
Northstar
Вы — фронтенд-разработчик Northstar. Через неделю релиз экрана настроек, в пятницу его показывают инвесторам. Начинаем с рабочей формы и выясняем, во что обойдётся смена фирменного цвета.
Релиз через неделю, а в пятницу показываем экран настроек. Маркетинг параллельно готовит ребрендинг. Если основной цвет поменяется, во что обойдётся правка? Главное — ничего не сломать перед показом.
В макете фирменный цвет только у кнопки «Сохранить». Кандидат на новый — фиолетовый, как в аватаре профиля. Заменить одно значение в коде, и готово?