Design-токены: обзор с выбором ответа
Синтез по всему юниту в формате выбора: границы тиров, тематизация через semantic-токены, кросс-платформенный пайплайн, каскад CSS-переменных и как drift возвращается.
Шесть вопросов через весь юнит. Каждый отражает реальное решение — где живёт токен, на что компоненту разрешено ссылаться, когда пайплайн окупается — а не определение для пересказа.
Убедитесь, что можете связать три тира, тематизацию через semantic-токены, кросс-платформенную сборку и дисциплину, которая не даёт drift вернуться — синтез, к которому вёл урок.
Ревью показывает кнопку со стилем background: var(--color-blue-600). В системе есть primitive-, semantic- и component-тиры. Почему это дефект, хотя цвет формально и есть токен?
Dark mode должен перекрасить все компоненты без JavaScript и за одну перерисовку. Какой подход даёт это в вебе?
Команда авторит токены один раз в DTCG JSON и гоняет Style Dictionary. Какой шаг несёт нагрузку, делая один источник корректным на web, iOS и Android?
Команда из пяти человек поставляет одно веб-приложение, одну тему, без нативных таргетов. Они предлагают полную трёхтировую систему со сборкой Style Dictionary. Как читает это senior?
Через три недели после выката токенов grep находит свежие захардкоженные hex по новым компонентам. Модель тиров корректна. В чём устойчивое решение?
Дизайнер спрашивает, почему кнопка не может просто ссылаться на color.blue.600, раз она всё равно к этому и разрешается. В чём точная причина лишнего semantic-хопа?
Сквозная линия — одно правило с последствиями: компонент ссылается на semantic-токен, никогда на primitive и никогда на literal. Именно эта дисциплина позволяет каскаду бесплатно тематизировать dark mode, позволяет одному DTCG-источнику генерировать корректные CSS, Swift и Android через transforms и делает ребрендинг одной правкой primitive-слоя. Размеряйте тиры под таргеты, которые поставляете, и закрывайте правило линтером — потому что конвенция без принудительного гейта за недели сползает обратно к захардкоженным hex. Теперь, когда на ревью увидишь спор о том, на какой токен должен ссылаться компонент, ты знаешь ответ: проследи тир, найди semantic-имя для этого intent, и убедись, что гейт поймает любой откат.
Что-то непонятно?
Задай вопрос по этому уроку. Вопросы анонимны и попадают напрямую автору — урок станет лучше.