Как масштабировать вашу дизайн-систему с помощью Design Tokens
В такой компании, как Raet, существующей более 50 лет, многое изменилось, а другие остались прежними. Это означает стек технологий, полный блестящих современных технологий, некоторых технологий, которые были блестящими и современными несколько лет назад, и технологий динозавров, которые совсем не блестящие или современные. Когда мы совершаем переход к слиянию с другой компанией (Visma), мы сталкиваемся с совершенно новым набором современных и не очень современных технологий.
Даже если вам повезло в повседневной работе с современными интерфейсными технологиями, это не означает, что все наши продукты написаны или будут написаны с использованием современных технологий. У нас всегда будет наследие и не будет четкого представления о том, как будет выглядеть технологическое будущее. Кроме того, как крупная организация мы строим для нескольких веб-платформ и собственных платформ, которым требуется единообразие дизайна. Это приводит к проблеме: Как сделать так, чтобы наша дизайн-система охватывала все? К сожалению, мы не можем выбирать удобные части и игнорировать остальное. Мы должны принять кроссплатформенность и обмен технологиями.
Наша текущая ситуация выглядит так:
Как интерфейсный инженер я предполагаю, что дизайнеры несут ответственность за принятие проектных решений и что обновление жестко запрограммированных значений в коде является пустой тратой времени и ресурсов. Обновление цвета, размера шрифта или любого «основного стиля» и просмотр результата на любой платформе не требует усилий. К сожалению, в настоящее время это не так.
Допустим, нужно обновить цвет. Текущий рабочий процесс выглядит так:
- Дизайнер обновляет цвет в средстве дизайна.
- Это обновление дизайна предоставлено разработчику.
- Разработчик обновляет значение в библиотеке повторно используемых компонентов.
- Разработчик обновляет версию библиотеки, чтобы этот цвет менялся везде, где он используется.
- Разработчик использует новый цвет в коде продукта.
- Дизайнер может увидеть результат в среде разработки.
Этот рабочий процесс страдает множеством подводных камней и приводит к огромной задержке вывода продуктов на рынок. Страдают и люди, работающие над дизайн-системой.
Итак, как мы можем оптимизировать этот рабочий процесс?
Жетоны дизайна
Этот концепт был создан Salesforce, и его название происходит от Джины Энн.
Маркеры дизайна - это элементы визуального дизайна системы дизайна, в частности, именованные объекты, которые хранят атрибуты визуального дизайна. Мы используем их вместо жестко запрограммированных значений (таких как шестнадцатеричные значения для цвета или пиксельные значения для интервала), чтобы поддерживать масштабируемую и согласованную визуальную систему для разработки пользовательского интерфейса. ~ Salesforce, Жетоны дизайна
Дизайн-системы всегда включают в себя этот набор небольших центральных частей информации пользовательского интерфейса, которые становятся основой всего построенного. Они являются частью «атомного» уровня дизайн-системы и включают цвета, шрифты, интервалы, значки и т. Д. Они лежат в основе каждой части пользовательского интерфейса в дизайн-системе.
Все эти крошечные кусочки должны быть в формате, который работает как единый источник истины. Другими словами, вместо того, чтобы предоставлять эти базовые элементы дизайна в формате, который может использоваться, например, только для веб-приложения, они должны быть в формате, отвечающем потребностям любой платформы - формате данных, который не зависит от языка: JSON или YAML. Затем его можно преобразовать и отформатировать для удовлетворения потребностей любой платформы (Android, iOS, Интернет и т. Д.), Что позволит группам разработчиков лучше сотрудничать и обеспечить согласованность бренда на любой платформе.
Этот метод означает, что решения о цветах, шрифтах и других основных стилях принимаются на атомарном уровне системы дизайна. Это гарантирует, что новые технологии не требуют от кого-либо переписывать стили и устраняют необходимость в жестко заданных значениях. Решили изменить все закругленные углы с 3px на 5px? Измените значение один раз в файле токенов, и оно автоматически распространяется на все ваши приложения.
Конструкторские токены преобразованы в отдельную библиотеку SASS, CSS, типографики и значков.
В настоящее время у нас есть несколько веб-приложений, и мы ожидаем, что в будущем их будет гораздо больше. Усилия, необходимые для поддержания согласованных размеров шрифтов, цветов, шрифтов, интервалов и значков во всех этих различных приложениях, возрастают, и все может стать беспорядочным. Приняв токены централизованного проектирования, эти токены затем можно преобразовать в определенные форматы, создав общие переменные Sass с помощью пакетов NPM. Это заботится о самой базовой конфигурации дизайна для Интернета и обеспечивает уровень, совместимый с современными интерфейсными технологиями, а также с не очень современным наследием, которое мы все еще используем. Изолируя эти части (цвета, значки, интервалы, шрифты) от компонентов пользовательского интерфейса, библиотека становится более открытой для различных интерфейсных фреймворков, поскольку она не связана с конкретным фреймворком, таким как React, Angular или VueJs.
Если ваша цель - создать систему дизайна, которая способствует повышению производительности, возможности повторного использования и визуальной согласованности всего портфеля продуктов, потратить время, необходимое для определения этого набора свойств, будет потраченным не зря.
Чтобы сделать еще один шаг…
- Очень важно учитывать, что маркеры дизайна - это не только цвета или анимация. Это может быть что угодно, от компонентов пользовательского интерфейса до макетов. Идея токенов дизайна заключается в том, что у вас есть один источник для обслуживания и несколько выходов.
- Архитектура и реализация токенов присутствуют постоянно. Успешная и устойчивая архитектура токена зависит от простой группировки, упорядочивания, классификации и принятия решений.
- Выявить возможности расширить систему до инструментов дизайнера, особенно программного обеспечения для проектирования.
- Вы можете создавать темы для нескольких продуктов из токенов дизайна, чтобы добиться надежных возможностей создания тем.
- Дизайнерскими токенами можно управлять с помощью таких инструментов, как Theo, разработанного командой дизайнерских систем в Salesforce, или словаря стилей, разработанного Danny Banks в Amazon.
