![](/upload/iblock/47c/71k3p03yjps8ieeti2futbik6ybvmtx8/%D0%9E%D0%B1%D0%BB%D0%BE%D0%B6%D0%BA%D0%B0%20%284%29.jpg)
Дизайн-токены: как быстрее и проще работать с проектами
30.08.2023
Дизайн-токены: как быстрее и проще работать с проектами
При реализации дизайна в конечном продукте у специалистов могут возникнуть проблемы во время адаптации дизайна под несколько платформ или устройств. Чтобы минимизировать риски, продуктовые группы полагаются на дизайн-системы. Одна из ее важных составляющих – это токены, о которых мы поговорим.
Что такое дизайн-токены
Это набор основных переменных визуального языка, таких как отступы, цвета, типографика, стили объектов и анимация. Они представлены в виде данных, где цвет представляется значением RGB, прозрачность – числом, а анимация – координатами Безье. Вместо жестко запрограммированных значений токены используются, чтобы управлять визуальным стилем и обеспечить единство во всех продуктах.
Основная задача дизайн-токенов
Дизайн-токены необходимы для того, чтобы сократить время разработки и помочь поддерживать единый вид нескольких приложений, оптимизируя затраты на изменения. Они также помогают дизайнеру и разработчику взаимодействовать на одном языке. После создания дизайн-токенов разработчик может легко экспортировать всю библиотеку стилей и немедленно внедрить ее в проект.
Дизайн-токены можно сравнить с составляющими атомов: протонами, нейтронами и электронами.
![Токены 1.png Токены 1.png](/upload/medialibrary/bd6/279idagijjlng14yu1s9ci4owsttiutl/Токены%201.png)
Примеры дизайн токенов
Как дизайн-токены помогают в проектировании
У дизайнеров есть два способа работы со значениями стиля: либо жестко закодировать их в дизайне, либо использовать токены. В первом случае необходима ручная корректировка, когда дизайн меняется. Это может быть долго и непрактично в тех проектах, где, к примеру, цвет бренда или типографика используются во многих местах.
Использование токенов позволяет обновлять значение стиля один раз и автоматически обновлять его во всех местах, где он используется. Это сокращает время и не дает забыть обновить конкретное значение для какого-либо элемента.
Благодаря токенам проектирование становится проще, а дизайнеры избегают несоответствий в проекте.
![Токены 2.png Токены 2.png](/upload/medialibrary/524/ao1v16kbpo5tze5noqql901jdh0i5qgf/Токены%202.png)
Использование в дизайне
Конструкция дизайн-токенов
Для унификации токенов-переменных можно использовать следующую конструкцию:
[Category]-[Type]-[Item]-[SubItem]-[State]
Где:
Category — определяет категорию токена (например, цвет или шрифт);
Type — указывает тип токена (например, текст, фон или граница);
Item — обозначает конкретный элемент (например, кнопка, таблица или поле ввода);
SubItem — определяет тип элемента (например, основной или вторичный);
State — указывает состояние элемента (например, по умолчанию, при наведении или активном состоянии).
При этом, отталкиваясь от условий и предпочтений, можно создать более короткую конструкцию. Это зависит от того, насколько подробная детализация вам нужна.
![Токены 3.png Токены 3.png](/upload/medialibrary/ad1/7fpkxikebrvtohb9d5k871g812twmbj8/Токены%203.png)
Конструкция токенов
Единый вид
Токены помогают создать согласованный внешний вид на различных платформах, позволяют сохранять значения вашей дизайн-системы единообразными во всех проектах и адаптировать их под требования любой платформы.
Например, при разработке веб-версии вашего продукта вы можете использовать HEX-значение цвета из CSS, а при проектировании iOS-приложений - цветовой формат RGBA.
Тематизация
В различных продуктах используются уникальные темы оформления. Каждая тема является наследником базовой, но изменяет значения определенных переменных. Например, имеются отдельные темы для продуктов «productivity» и «media», но все они основаны на базовой теме. Этот подход получил успешное применение в создании темного интерфейса. Цветовые переменные базовой темы изменяются с использованием токенов темной темы.
![Токены 4.png Токены 4.png](/upload/medialibrary/592/gu7fudjzrhqa8hlo6ckhd02q37jjkl3e/Токены%204.png)
Тематизация
Как управлять дизайн-токенами
Ведущие эксперты дизайн-систем считают, что один из наиболее эффективных методов управления - это создание наиболее объективных типовых токенов. Типовые токены определяют базовые значения, такие как цвета, шрифты и размеры, которые затем могут быть использованы в различных проектах и платформах.
Другим полезным приемом является документирование и организация токенов. Создание централизованной документации позволит всем участникам проекта легко находить и использовать токены. Можно использовать таблицы, диаграммы или специальные инструменты для визуализации и организации данных токенов.
Еще один метод – назначение токенам понятных и информативных имен. Используйте названия, отражающие значение и назначение токена, чтобы другие дизайнеры и разработчики могли легко понять и использовать его.
Также будет полезно применять методику версионирования токенов. Записывайте все изменения в токенах и отмечайте их версии, чтобы обеспечить единообразие во всех проектах и упростить изменение токенов в будущем.
Важный совет: активно сотрудничайте с вашей командой и убедитесь, что все сотрудники понимают и следуют принципам использования токенов. Регулярно обсуждайте эту тему и проводите обучение, чтобы команда эффективно использовала токены в проектах.
Формат JSON
Применяйте его для повторного использования данных токена. JSON – это формат для кодирования пар значений. С использованием токенов в JSON можно настраивать параметры дизайна для нескольких препроцессоров, таких как SASS, LESS или Stylus.
![Токены 5.jpg Токены 5.jpg](/upload/medialibrary/101/nzjziyl1limvuv310j307wxp5tm96u1u/Токены%205.jpg)
JSON
Применяйте шкалы
Шкалы, такие как размеры футболок (XS, S, M, L, XL, XXL) или прогрессии (2, 4, 8, 16, 32), являются полезными инструментами в различных сценариях использования токенов. Например, вы можете определить стандартный размер шрифта для основного текста и затем использовать шкалу размеров футболок при настройке его для разных экранов.
Подведем итоги
Разработка и внедрение токенов является новым этапом взаимодействия между дизайнерами и разработчиками. Этот подход позволяет автоматически преобразовывать дизайн-макеты в код, что является значительным прогрессом. Однако необходимо понимать, что внедрение этой сложной системы требует активного участия и команды дизайнеров, и разработчиков. Перед тем, как приступить к работе над этим, важно убедиться, что все участники проекта обладают достаточной мотивацией, так как этот процесс может занять немало времени.
Все материалы
При реализации дизайна в конечном продукте у специалистов могут возникнуть проблемы во время адаптации дизайна под несколько платформ или устройств. Чтобы минимизировать риски, продуктовые группы полагаются на дизайн-системы. Одна из ее важных составляющих – это токены, о которых мы поговорим.
Что такое дизайн-токены
Это набор основных переменных визуального языка, таких как отступы, цвета, типографика, стили объектов и анимация. Они представлены в виде данных, где цвет представляется значением RGB, прозрачность – числом, а анимация – координатами Безье. Вместо жестко запрограммированных значений токены используются, чтобы управлять визуальным стилем и обеспечить единство во всех продуктах.
Основная задача дизайн-токенов
Дизайн-токены необходимы для того, чтобы сократить время разработки и помочь поддерживать единый вид нескольких приложений, оптимизируя затраты на изменения. Они также помогают дизайнеру и разработчику взаимодействовать на одном языке. После создания дизайн-токенов разработчик может легко экспортировать всю библиотеку стилей и немедленно внедрить ее в проект.
Дизайн-токены можно сравнить с составляющими атомов: протонами, нейтронами и электронами.
![Токены 1.png Токены 1.png](/upload/medialibrary/bd6/279idagijjlng14yu1s9ci4owsttiutl/Токены%201.png)
Примеры дизайн токенов
Как дизайн-токены помогают в проектировании
У дизайнеров есть два способа работы со значениями стиля: либо жестко закодировать их в дизайне, либо использовать токены. В первом случае необходима ручная корректировка, когда дизайн меняется. Это может быть долго и непрактично в тех проектах, где, к примеру, цвет бренда или типографика используются во многих местах.
Использование токенов позволяет обновлять значение стиля один раз и автоматически обновлять его во всех местах, где он используется. Это сокращает время и не дает забыть обновить конкретное значение для какого-либо элемента.
Благодаря токенам проектирование становится проще, а дизайнеры избегают несоответствий в проекте.
![Токены 2.png Токены 2.png](/upload/medialibrary/524/ao1v16kbpo5tze5noqql901jdh0i5qgf/Токены%202.png)
Использование в дизайне
Конструкция дизайн-токенов
Для унификации токенов-переменных можно использовать следующую конструкцию:
[Category]-[Type]-[Item]-[SubItem]-[State]
Где:
Category — определяет категорию токена (например, цвет или шрифт);
Type — указывает тип токена (например, текст, фон или граница);
Item — обозначает конкретный элемент (например, кнопка, таблица или поле ввода);
SubItem — определяет тип элемента (например, основной или вторичный);
State — указывает состояние элемента (например, по умолчанию, при наведении или активном состоянии).
При этом, отталкиваясь от условий и предпочтений, можно создать более короткую конструкцию. Это зависит от того, насколько подробная детализация вам нужна.
![Токены 3.png Токены 3.png](/upload/medialibrary/ad1/7fpkxikebrvtohb9d5k871g812twmbj8/Токены%203.png)
Конструкция токенов
Единый вид
Токены помогают создать согласованный внешний вид на различных платформах, позволяют сохранять значения вашей дизайн-системы единообразными во всех проектах и адаптировать их под требования любой платформы.
Например, при разработке веб-версии вашего продукта вы можете использовать HEX-значение цвета из CSS, а при проектировании iOS-приложений - цветовой формат RGBA.
Тематизация
В различных продуктах используются уникальные темы оформления. Каждая тема является наследником базовой, но изменяет значения определенных переменных. Например, имеются отдельные темы для продуктов «productivity» и «media», но все они основаны на базовой теме. Этот подход получил успешное применение в создании темного интерфейса. Цветовые переменные базовой темы изменяются с использованием токенов темной темы.
![Токены 4.png Токены 4.png](/upload/medialibrary/592/gu7fudjzrhqa8hlo6ckhd02q37jjkl3e/Токены%204.png)
Тематизация
Как управлять дизайн-токенами
Ведущие эксперты дизайн-систем считают, что один из наиболее эффективных методов управления - это создание наиболее объективных типовых токенов. Типовые токены определяют базовые значения, такие как цвета, шрифты и размеры, которые затем могут быть использованы в различных проектах и платформах.
Другим полезным приемом является документирование и организация токенов. Создание централизованной документации позволит всем участникам проекта легко находить и использовать токены. Можно использовать таблицы, диаграммы или специальные инструменты для визуализации и организации данных токенов.
Еще один метод – назначение токенам понятных и информативных имен. Используйте названия, отражающие значение и назначение токена, чтобы другие дизайнеры и разработчики могли легко понять и использовать его.
Также будет полезно применять методику версионирования токенов. Записывайте все изменения в токенах и отмечайте их версии, чтобы обеспечить единообразие во всех проектах и упростить изменение токенов в будущем.
Важный совет: активно сотрудничайте с вашей командой и убедитесь, что все сотрудники понимают и следуют принципам использования токенов. Регулярно обсуждайте эту тему и проводите обучение, чтобы команда эффективно использовала токены в проектах.
Формат JSON
Применяйте его для повторного использования данных токена. JSON – это формат для кодирования пар значений. С использованием токенов в JSON можно настраивать параметры дизайна для нескольких препроцессоров, таких как SASS, LESS или Stylus.
![Токены 5.jpg Токены 5.jpg](/upload/medialibrary/101/nzjziyl1limvuv310j307wxp5tm96u1u/Токены%205.jpg)
JSON
Применяйте шкалы
Шкалы, такие как размеры футболок (XS, S, M, L, XL, XXL) или прогрессии (2, 4, 8, 16, 32), являются полезными инструментами в различных сценариях использования токенов. Например, вы можете определить стандартный размер шрифта для основного текста и затем использовать шкалу размеров футболок при настройке его для разных экранов.
Подведем итоги
Разработка и внедрение токенов является новым этапом взаимодействия между дизайнерами и разработчиками. Этот подход позволяет автоматически преобразовывать дизайн-макеты в код, что является значительным прогрессом. Однако необходимо понимать, что внедрение этой сложной системы требует активного участия и команды дизайнеров, и разработчиков. Перед тем, как приступить к работе над этим, важно убедиться, что все участники проекта обладают достаточной мотивацией, так как этот процесс может занять немало времени.
Все материалы