Как мы используем дизайнерские жетоны в Trybe

В предыдущем сообщении мы указали на важность последовательности в дизайне приложения и на то, как этого можно достичь с помощью маркеров дизайна.

В этом посте мы покажем, как Trybe использует маркеры дизайна на ежедневной основе.

Наши жетоны

Наша команда дизайнеров определила 6 категорий жетонов, которые используются в наших продуктах:

  • Цвет
  • Типография
  • Тень
  • Граница
  • Расстояния
  • Z-index

В этом посте нет смысла подробно описывать каждое значение наших токенов и то, как они были определены. Определение значений жетонов продукта должно начинаться с анализа, проведенного командой дизайнеров, чтобы найти детали, которые будут представлять данный бренд/продукт.

Источник истины

Очень важным моментом для успеха и принятия токенов является наличие простого способа, с помощью которого дизайн и разработка могут потреблять одни и те же ценности.

В качестве источника истины для наших токенов мы используем файл JSON.

Как в дизайне создается и используется JSON?

Мы знаем, что вручную задавать значения в JSON не очень удобно. Исходя из этого, мы искали инструмент, который мог бы помочь нам в этом процессе, и нашли Figma Tokens.

Figma Tokens — это плагин, доступный в сообществе Figma, который позволяет управлять маркерами, которые могут быть применены во время построения макета, таким образом, плагин сам генерирует и потребляет JSON-файл.

В случае с Trybe мы пошли дальше и подключили плагин к нашему аккаунту на Github, а официальный JSON хранится в нашем репозитории Design System.

Figma Tokens также позволяет добавлять темы, связанные с жетонами, например, темную тему. Но о темном режиме мы поговорим в другой статье.

Как при разработке создается и используется JSON?

Еще одним важным моментом принятия маркеров дизайна является их использование в нашем коде. Но как мы можем использовать значения из JSON в нашем CSS?

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

В случае с Trybe мы используем библиотеку стилей JavaScript под названием Stitches. Эта библиотека уже имеет поддержку переменных и дает нам большой опыт разработки.

Чтобы использовать переменные Stitches, мы используем Styled Dictionary для преобразования значений JSON в переменные JavaScript и передаем эти значения в конфигурацию Stitches.

Таким образом, мы используем наши маркеры простым способом при создании стиля компонента.

Заключение

Используя инструменты Figma Tokens, Style Dictionary и Stitches, Trybe гарантирует, что команда дизайнеров и команда разработчиков говорят на одном языке и используют одни и те же ценности во время разработки.

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

И таким образом мы все ближе и ближе подходим к достижению согласованности дизайна нашего продукта.

Оцените статью
devanswers.ru
Добавить комментарий