Выбор ответа Senior Дизайн-системы и компоненты обновлено
Темы через токены
Вопрос
Компании нужен второй бренд с другим основным цветом на тех же компонентах. Как это сделать правильно?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Компоненты ссылаются на семантические токены, у бренда свои значения. Темизация держится на слое семантических токенов: компонент берёт color.action.primary, а значение зависит от темы.
Варианты ответа
- Скопировать библиотеку и перекрасить компоненты второго бренда вручную
- Добавить к каждому компоненту отдельный вариант «бренд 2» в свойствах
- Использовать в компонентах hex-цвета и заменять их поиском по файлу
- Компоненты ссылаются на семантические токены, у бренда свои значенияправильный ответ
Разбор
Темизация держится на слое семантических токенов: компонент берёт color.action.primary, а значение зависит от темы. В Figma это режимы переменных, в коде CSS-переменные или конфиг токенов. Копия библиотеки и варианты по бренду удваивают поддержку, hex в компонентах делает замену хрупкой.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.