Дизайн-токены: как быстрее и проще работать с проектами
При реализации дизайна в конечном продукте у специалистов могут возникнуть проблемы во время адаптации дизайна под несколько платформ или устройств. Чтобы минимизировать риски, продуктовые группы полагаются на дизайн-системы. Одна из ее важных составляющих – это токены, о которых мы поговорим.
Что такое дизайн-токены
Это набор основных переменных визуального языка, таких как отступы, цвета, типографика, стили объектов и анимация. Они представлены в виде данных, где цвет представляется значением RGB, прозрачность – числом, а анимация – координатами Безье. Вместо жестко запрограммированных значений токены используются, чтобы управлять визуальным стилем и обеспечить единство во всех продуктах.
Основная задача дизайн-токенов
Дизайн-токены необходимы для того, чтобы сократить время разработки и помочь поддерживать единый вид нескольких приложений, оптимизируя затраты на изменения. Они также помогают дизайнеру и разработчику взаимодействовать на одном языке. После создания дизайн-токенов разработчик может легко экспортировать всю библиотеку стилей и немедленно внедрить ее в проект.
Дизайн-токены можно сравнить с составляющими атомов: протонами, нейтронами и электронами.
Примеры дизайн токенов
Как дизайн-токены помогают в проектировании
У дизайнеров есть два способа работы со значениями стиля: либо жестко закодировать их в дизайне, либо использовать токены. В первом случае необходима ручная корректировка, когда дизайн меняется. Это может быть долго и непрактично в тех проектах, где, к примеру, цвет бренда или типографика используются во многих местах.
Использование токенов позволяет обновлять значение стиля один раз и автоматически обновлять его во всех местах, где он используется. Это сокращает время и не дает забыть обновить конкретное значение для какого-либо элемента.
Благодаря токенам проектирование становится проще, а дизайнеры избегают несоответствий в проекте.
Использование в дизайне
Конструкция дизайн-токенов
Для унификации токенов-переменных можно использовать следующую конструкцию:
[Category]-[Type]-[Item]-[SubItem]-[State]
Где:
Category — определяет категорию токена (например, цвет или шрифт);
Type — указывает тип токена (например, текст, фон или граница);
Item — обозначает конкретный элемент (например, кнопка, таблица или поле ввода);
SubItem — определяет тип элемента (например, основной или вторичный);
State — указывает состояние элемента (например, по умолчанию, при наведении или активном состоянии).
При этом, отталкиваясь от условий и предпочтений, можно создать более короткую конструкцию. Это зависит от того, насколько подробная детализация вам нужна.
Конструкция токенов
Единый вид
Токены помогают создать согласованный внешний вид на различных платформах, позволяют сохранять значения вашей дизайн-системы единообразными во всех проектах и адаптировать их под требования любой платформы.
Например, при разработке веб-версии вашего продукта вы можете использовать HEX-значение цвета из CSS, а при проектировании iOS-приложений - цветовой формат RGBA.
Тематизация
В различных продуктах используются уникальные темы оформления. Каждая тема является наследником базовой, но изменяет значения определенных переменных. Например, имеются отдельные темы для продуктов «productivity» и «media», но все они основаны на базовой теме. Этот подход получил успешное применение в создании темного интерфейса. Цветовые переменные базовой темы изменяются с использованием токенов темной темы.
Тематизация
Как управлять дизайн-токенами
Ведущие эксперты дизайн-систем считают, что один из наиболее эффективных методов управления - это создание наиболее объективных типовых токенов. Типовые токены определяют базовые значения, такие как цвета, шрифты и размеры, которые затем могут быть использованы в различных проектах и платформах.
Другим полезным приемом является документирование и организация токенов. Создание централизованной документации позволит всем участникам проекта легко находить и использовать токены. Можно использовать таблицы, диаграммы или специальные инструменты для визуализации и организации данных токенов.
Еще один метод – назначение токенам понятных и информативных имен. Используйте названия, отражающие значение и назначение токена, чтобы другие дизайнеры и разработчики могли легко понять и использовать его.
Также будет полезно применять методику версионирования токенов. Записывайте все изменения в токенах и отмечайте их версии, чтобы обеспечить единообразие во всех проектах и упростить изменение токенов в будущем.
Важный совет: активно сотрудничайте с вашей командой и убедитесь, что все сотрудники понимают и следуют принципам использования токенов. Регулярно обсуждайте эту тему и проводите обучение, чтобы команда эффективно использовала токены в проектах.
Формат JSON
Применяйте его для повторного использования данных токена. JSON – это формат для кодирования пар значений. С использованием токенов в JSON можно настраивать параметры дизайна для нескольких препроцессоров, таких как SASS, LESS или Stylus.
JSON
Применяйте шкалы
Шкалы, такие как размеры футболок (XS, S, M, L, XL, XXL) или прогрессии (2, 4, 8, 16, 32), являются полезными инструментами в различных сценариях использования токенов. Например, вы можете определить стандартный размер шрифта для основного текста и затем использовать шкалу размеров футболок при настройке его для разных экранов.
Подведем итоги
Разработка и внедрение токенов является новым этапом взаимодействия между дизайнерами и разработчиками. Этот подход позволяет автоматически преобразовывать дизайн-макеты в код, что является значительным прогрессом. Однако необходимо понимать, что внедрение этой сложной системы требует активного участия и команды дизайнеров, и разработчиков. Перед тем, как приступить к работе над этим, важно убедиться, что все участники проекта обладают достаточной мотивацией, так как этот процесс может занять немало времени.
Все материалы
При реализации дизайна в конечном продукте у специалистов могут возникнуть проблемы во время адаптации дизайна под несколько платформ или устройств. Чтобы минимизировать риски, продуктовые группы полагаются на дизайн-системы. Одна из ее важных составляющих – это токены, о которых мы поговорим.
Что такое дизайн-токены
Это набор основных переменных визуального языка, таких как отступы, цвета, типографика, стили объектов и анимация. Они представлены в виде данных, где цвет представляется значением RGB, прозрачность – числом, а анимация – координатами Безье. Вместо жестко запрограммированных значений токены используются, чтобы управлять визуальным стилем и обеспечить единство во всех продуктах.
Основная задача дизайн-токенов
Дизайн-токены необходимы для того, чтобы сократить время разработки и помочь поддерживать единый вид нескольких приложений, оптимизируя затраты на изменения. Они также помогают дизайнеру и разработчику взаимодействовать на одном языке. После создания дизайн-токенов разработчик может легко экспортировать всю библиотеку стилей и немедленно внедрить ее в проект.
Дизайн-токены можно сравнить с составляющими атомов: протонами, нейтронами и электронами.
Примеры дизайн токенов
Как дизайн-токены помогают в проектировании
У дизайнеров есть два способа работы со значениями стиля: либо жестко закодировать их в дизайне, либо использовать токены. В первом случае необходима ручная корректировка, когда дизайн меняется. Это может быть долго и непрактично в тех проектах, где, к примеру, цвет бренда или типографика используются во многих местах.
Использование токенов позволяет обновлять значение стиля один раз и автоматически обновлять его во всех местах, где он используется. Это сокращает время и не дает забыть обновить конкретное значение для какого-либо элемента.
Благодаря токенам проектирование становится проще, а дизайнеры избегают несоответствий в проекте.
Использование в дизайне
Конструкция дизайн-токенов
Для унификации токенов-переменных можно использовать следующую конструкцию:
[Category]-[Type]-[Item]-[SubItem]-[State]
Где:
Category — определяет категорию токена (например, цвет или шрифт);
Type — указывает тип токена (например, текст, фон или граница);
Item — обозначает конкретный элемент (например, кнопка, таблица или поле ввода);
SubItem — определяет тип элемента (например, основной или вторичный);
State — указывает состояние элемента (например, по умолчанию, при наведении или активном состоянии).
При этом, отталкиваясь от условий и предпочтений, можно создать более короткую конструкцию. Это зависит от того, насколько подробная детализация вам нужна.
Конструкция токенов
Единый вид
Токены помогают создать согласованный внешний вид на различных платформах, позволяют сохранять значения вашей дизайн-системы единообразными во всех проектах и адаптировать их под требования любой платформы.
Например, при разработке веб-версии вашего продукта вы можете использовать HEX-значение цвета из CSS, а при проектировании iOS-приложений - цветовой формат RGBA.
Тематизация
В различных продуктах используются уникальные темы оформления. Каждая тема является наследником базовой, но изменяет значения определенных переменных. Например, имеются отдельные темы для продуктов «productivity» и «media», но все они основаны на базовой теме. Этот подход получил успешное применение в создании темного интерфейса. Цветовые переменные базовой темы изменяются с использованием токенов темной темы.
Тематизация
Как управлять дизайн-токенами
Ведущие эксперты дизайн-систем считают, что один из наиболее эффективных методов управления - это создание наиболее объективных типовых токенов. Типовые токены определяют базовые значения, такие как цвета, шрифты и размеры, которые затем могут быть использованы в различных проектах и платформах.
Другим полезным приемом является документирование и организация токенов. Создание централизованной документации позволит всем участникам проекта легко находить и использовать токены. Можно использовать таблицы, диаграммы или специальные инструменты для визуализации и организации данных токенов.
Еще один метод – назначение токенам понятных и информативных имен. Используйте названия, отражающие значение и назначение токена, чтобы другие дизайнеры и разработчики могли легко понять и использовать его.
Также будет полезно применять методику версионирования токенов. Записывайте все изменения в токенах и отмечайте их версии, чтобы обеспечить единообразие во всех проектах и упростить изменение токенов в будущем.
Важный совет: активно сотрудничайте с вашей командой и убедитесь, что все сотрудники понимают и следуют принципам использования токенов. Регулярно обсуждайте эту тему и проводите обучение, чтобы команда эффективно использовала токены в проектах.
Формат JSON
Применяйте его для повторного использования данных токена. JSON – это формат для кодирования пар значений. С использованием токенов в JSON можно настраивать параметры дизайна для нескольких препроцессоров, таких как SASS, LESS или Stylus.
JSON
Применяйте шкалы
Шкалы, такие как размеры футболок (XS, S, M, L, XL, XXL) или прогрессии (2, 4, 8, 16, 32), являются полезными инструментами в различных сценариях использования токенов. Например, вы можете определить стандартный размер шрифта для основного текста и затем использовать шкалу размеров футболок при настройке его для разных экранов.
Подведем итоги
Разработка и внедрение токенов является новым этапом взаимодействия между дизайнерами и разработчиками. Этот подход позволяет автоматически преобразовывать дизайн-макеты в код, что является значительным прогрессом. Однако необходимо понимать, что внедрение этой сложной системы требует активного участия и команды дизайнеров, и разработчиков. Перед тем, как приступить к работе над этим, важно убедиться, что все участники проекта обладают достаточной мотивацией, так как этот процесс может занять немало времени.
Все материалы
