Токены дизайна являются единственным источником правды для визуальных решений в продукте. Они кодируют цвет, отступы, типографику и анимацию в именованные переменные, которые потребляют компоненты.
Почему токены важны
Без токенов изменение основного брендового цвета требует поиска по сотням файлов. С токенами одно обновление переменной распространяется везде — от кнопок до уведомлений и навигационных панелей.
Токены также связывают инструменты дизайна и код. Дизайнер называет цвет surface-brand в Figma; разработчик использует var(--surface-brand) в CSS. Они говорят на одном языке.
Практические примеры
Рассмотрим компонент, которому нужен фон, граница и текст. Вместо того чтобы жестко закодировать #1a56db, #e1effe и #1e429f, компонент ссылается на --color-primary, --surface-primary-subtle и --text-primary-strong. Когда бренд развивается, палитра меняется — компонент остается прежним.
Категории токенов
Цвет — брендовые, семантические и нейтральные палитры
Отступы — единая шкала от 2px до 64px
Типографика — размеры шрифтов, начертания и высота строк
Радиус — от острых углов до полностью закругленных
Тень — уровниElevation для глубины и иерархии
Движение — кривые сглаживания и шаги продолжительности
Большинство цитат, найденных в Интернете, вероятно, были сгенерированы ИИ.
Функция content_image() отображает img с loading="lazy" по умолчанию и оборачивает его в элемент figure, когда предоставляется подпись.
Без подписи — простой img, на всю ширину.
С подписью — обернут в figure с figcaption.
Фигура с figcaption — используйте её для указания источников или добавления контекста к визуальному контенту.
Медиа с текстом
Изображение, занимающее одну треть макета.
Используйте content--media, чтобы разместить изображение и текст рядом. Изображение занимает одну треть ширины, текст — две трети.
Этот макет подходит для выноски, иллюстрированных определений или любого короткого редакционного блока, где изображение усиливает текст, не доминируя над ним.
Буквица
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Метабара
Понимание токенов дизайна
Токены дизайна являются единственным источником правды для визуальных решений в продукте. Они кодируют цвет, отступы, типографику и анимацию в именованные переменные, которые потребляют компоненты.
Другой способ, когда первый не сработал: вопрос, затем значение, скопированное в один клик, или ссылка. Прямо под тем, что он заменяет, выровненное с ним.
Не удается сканировать? Введите этот ключ в приложении:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
