Статья про дизайн-систему в Фигме — местами будет терминология этого инструмента, основные понятия объясняю по ходу.
Рубрика «design tokens»
Собрал мультибрендовую дизайн-систему аж для семи брендов
2026-06-05 в 16:03, admin, рубрики: design system, design tokens, figma, figma variables api, Token Studio, дизайн-процессы, компоненты, мультибрендовостьДизайн-токены способны на большее: создаем единый источник информации о компонентах UI
2020-03-12 в 10:18, admin, рубрики: design system, Design Systems, design tokens, Блог компании Badoo, дизайн мобильных приложений, интерфейсы, разработка мобильных приложенийТермином «дизайн-система» в IT давно никого не удивишь. Компании систематизируют дизайн продуктов, придумывая свои или используя чужие инструменты для управления стилями, паттернами и компонентами.
Badoo не является исключением: с помощью нашей дизайн-системы Cosmos мы поддерживаем общие принципы дизайна для четырёх приложений, работающих на четырёх платформах.

Одна из первых и основных вещей, с которой начинается работа по созданию дизайн-системы, — это токены (или переменные), которые определяют значения разных сущностей системы.
Как это работает? Например, у вас есть приложение для двух платформ. Вместо того чтобы для каждой заново указывать в CSS-файле размер и стиль шрифтов, вы можете хранить эти значения в JSON-файле, который легко преобразуется в код для любой платформы. В дальнейшем этот файл можно использовать и в других проектах с другими кодовыми базами.
Несмотря на потенциал дизайн-токенов, во многих компаниях их структура остаётся довольно простой, что сильно ограничивает возможности их применения.
Я хочу поделиться адаптированным переводом статьи моего коллеги Кристиано Растелли (Cristiano Rastelli), который несколько лет развивает дизайн-систему Cosmos. На примере своего опыта он показывает, как работать с токенами более эффективно: добавлять метаданные и использовать их для описания свойств компонентов.
Под катом — небольшой рассказ о том, как выглядят дизайн-токены в Badoo и почему они значительно упрощают процесс разработки.
