Что такое Design токены?
Tags: design, webdev
Published: 2020-05-13 14:17:45

Вольный перевод [What Are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)

В последнее время я много слышал о Design токенах, и хотя мне никогда не приходилось работать над проектом, который в них нуждался, я думаю, что они супер интересны и о них стоит написать несколько слов. Насколько я понимаю, общая идея такова: design токены - это независимый способ хранения переменных, таких как типография, цвет и отступы так, чтобы ваша система дизайна могла совместно использоваться на платформах, таких как iOS, Android и старых добрых веб-сайтах.

Design токены начинают набирать обороты в сообществе дизайнеров, но они не являются совершенно новой концепцией. Например, есть отличное выступление Jina Anne и Jon Levine в 2016 году, где они говорили как [design токены используются в Lightning Design System](https://www.youtube.com/watch?v=wDBEc3dJJV8) на Salesforce. Они описывают сложность мира, в котором мы живем, когда организации, которая создает несколько веб-приложений и нативных приложений, необходимо выглядеть одинаково, не замедляя работу команды разработчиков. У Jina также есть курс про desigh токены, где в превью она написла: 

> С design токенами вы можете захватить низкоуровневые значения, а затем использовать их для создания стилей для вашего продукта или приложения. Вы можете поддерживать масштабируемую и совместимую визуальную систему для разработки пользовательского интерфейса.

Давайте возьмем пример: у вас, вероятно, есть шкала типографики, и вы хотите, чтобы она была одинаковой на нескольких платформах. Вместо того, чтобы хранить значения в файле CSS и повторять их в каждом приложении или веб-сайте, они могут быть сохранены в файле JSON, который затем будет преобразован в код, необходимый для всех других платформ. Что-то вроде этого:

```
{
  "global": {
    "type": "token",
    "category": "typography"
  },
  "aliases": {
    "TYPE_SIZE_SM": {
      "value": "14px"
    },
    "TYPE_SIZE_MD": {
      "value": "25px"
    },
    "TYPE_SIZE_LG": {
      "value": "44px"
    }
}
```

Вы можете написать свой собственный код, берущий этот файл JSON и преобразовывающий его во все переменные, которые вам могут понадобиться, например, файл Sass (или custom properties) будет зависеть от этих токенов и может использовать их как переменные для использования в другом месте в веб-приложении.

Я думаю, что это невероятно аккуратный материал. И вижу, как он экономит массу дублирующегося кода и путаницы между несколькими командами, поскольку он служит единым источником правды, в отличие от нескольких кодовых баз, имеющих одинаковые требования к дизайну и собственных таблиц стилей для обслуживания. Cristiano Rastelli писал об [управлении токенами дизайна с помощью словаря стилей](https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa).

Ваш источник правды даже не должен быть файлом JSON! В посте, опубликованном ранее в этом году, Павел Лаптев показывает нам, как создавать [токены в Figma](https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f), используя ее API, абстрагировать значения от макетов дизайна и использовать их в коде. Павел разбил свой документ Figma на отдельные страницы для своей сетки, отступов, палитры и типографики.

Сейчас кажется, что потребуются огромные усилия для настройки, но я считаю, что такие инструменты, как Sketch и Figma, сделают нам подобные вещи в ближайшем будущем проще - они, вероятнее всего, захотят, чтобы источник правды был в их конкретном инструменте дизайна вместо какого-то другого инструмента.

Последнее, что я хотел бы упомянуть - это сообщение Brent Jackson, в котором он высказал некоторые мысли о [совместимости](https://jxnblk.com/blog/interoperability/), когда речь заходит о разработке систем. В частности, он утверждает, что должна быть спецификация для design токенов, чтобы любая библиотека CSS-in-JS могла использовать этот код в любом формате или стиле.

> Системные design токены должны быть гибкими и кроссплатформенными, что означает, что разные команды, разные реализации и разные библиотеки будут называть вещи по-разному. Для этого нужна спецификация. Хорошая совместимость может быть реализована, если бы мы например, назвали цвета нашей палитры `colors` и размеры шрифтов, которые мы используем `fontSizes`. Что вы делаете дальше, и какой формат данных вы используете для хранения этих значений, решать только вам. Преобразовать JSON в ES-модули, в YAML или даже TOML, если вам нужно. Это обычная структура данных, поэтому преобразование между другими структурами данных (например, дизайн инструментами или GraphQL API) также должно быть возможным.

Затем Brent разработал [спецификацию темы](https://styled-system.com/theme-specification/), чтобы решить эту проблему. Похоже, наличие единого стандарта для записи всех наших переменных и настроек поможет нам, если мы хотим переключиться с одной библиотеки CSS-in-JS на другую или если мы хотим перейти на какую-то другую систему.

В любом случае, я считаю, что design токены только начинают становиться мейнстримом, и их популярность вот-вот возрастет, так как эти инструменты, рабочие процессы и стандарты со временем становятся лучше - это все очень захватывающе!