Цвета, интервалы, вес шрифта и размер шрифта - все это маркеры дизайна.

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

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

Маркеры дизайна - это то, что обеспечивает единообразие нашей системы дизайна: цвета, интервал, вес шрифта и размер шрифта являются примерами маркеров. В идеальном мире они следуют последовательности (4 пикселя, 8 пикселей и т. Д.) И всегда выбираются из этой последовательности.

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

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

Обзор

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

Короче говоря, наш любимый инструмент дизайна - Figma. Они предоставляют отличный API для взаимодействия, и это упрощает доступ к токенам дизайна.

Мы создадим сервер Node.js, который будет подключаться к Figma для получения токенов (веса текста, интервалов, цветов и т. Д.). После этого экземпляр узла сгенерирует файлы темы для использования разработчиками.

Мы сгенерируем файл Sass и Tailwind со всеми переменными, но будет легко создать другой файл темы (возможно, тему со стилями компонентов).

Настройка токенов дизайна Figma

Чтобы сервер Node.js знал, как получать токены дизайна, нам нужно определенным образом структурировать их в Figma. Это причина того, почему создание абстрактной реализации сейчас сложно. Все должно быть настроено одинаково. Однако, когда он настроен, процесс будет работать без проблем.

Лучше всего создавать файл для каждого токена дизайна в Figma. Итак, файл для интервалов, цветов, размеров шрифта и т. Д.

Внутри этих файлов мы можем создать страницу под названием Tokens. Мы можем заполнить эту страницу всеми значениями. Для интервала мы можем создать компоненты для каждого значения:

Мы следуем тому же процессу определения цветов в Figma: создаем новый файл со страницей под названием Tokens, которая содержит цвета. Именование важно, так как эти имена будут извлечены сервером Node.js и будут доступны для использования разработчиками.

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

Создание сервера Node.js

Чтобы получить доступ к Figma API, нам нужно сначала сгенерировать личный токен доступа, который Node.js будет использовать для аутентификации.

Создать его в Figma довольно просто. Вы можете найти его в Профиле ›Настройки› Персональные токены доступа. Нажмите «Создать новый токен личного доступа» и скопируйте и вставьте значение. Важно сохранить его в надежном месте, потому что он нам понадобится на следующем этапе.

Теперь мы можем начать с создания нашего сервера Node.js, который будет получать токены дизайна из Figma. Чтобы статья оставалась по теме, я не буду вдаваться в подробности о том, как настроить Node. См. Инструкции в официальной документации.

Нашему серверу Node.js нужна пара зависимостей:

Затем мы можем сохранить наш токен персонального доступа Figma в файле .env. Таким образом, мы можем использовать его в коде JavaScript:

Начнем с создания точки входа в Node.js application.js со следующим содержимым:

Теперь мы можем подключиться к Figma и получить маркеры расстояния и цвета. Первый шаг - создать функцию, которая будет подключаться к Figma с нашим PAT:

Эту функцию можно использовать для получения всех значений интервалов из Figma. Прежде чем мы сможем использовать следующий фрагмент кода, нам нужно определить spacingFileId. Это можно найти, получив URL-адрес Figma. Они всегда имеют одинаковую структуру: https://www.figma.com/file/xxxx/. Получите значение xxxx из своего URL и поместите его в переменную spacingFileId:

Получение цветов очень похоже. Единственное отличие состоит в том, что значения цвета необходимо преобразовать в значения RGB, которые мы затем для удобства конвертируем в HEX:

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

Создание файлов темы

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

Sass файл

Давайте сначала сгенерируем переменные Sass на основе токенов дизайна. Мы можем начать с создания функции convertToSassFile:

Что именно здесь происходит?

  • Функция reduce преобразует каждое значение токена проекта в переменную Sass и объединит вывод.
  • Мы дадим каждой переменной префикс системы дизайна. Я выбрал $tb.
  • Содержимое будет записано в выходной файл (theme.scss).

Это приведет к следующему выводу:

Файл Tailwind

Создание файла Tailwind выполняется по той же структуре. Единственная разница в том, как создается конфигурационный файл:

Это приводит к следующему выводу:

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

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

Заключение

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

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