Pixso 2.0: Дизайн-токены

Когда вы в последний раз тратили часы на обновление одинаковых цветов или отступов во множестве элементов дизайна?
Pixso 2.0 с Дизайн-токенами избавит вас от этой рутины. Эти умные, повторно используемые Дизайн-токены позволяют один раз задать цвета, числа, текст и другие параметры — и синхронизировать их повсюду.

Что такое Дизайн-токены?

Дизайн-токены — это мощный инструмент для оптимизации рабочих процессов, повышения эффективности дизайна, обеспечения консистентности, улучшения совместной работы и создания адаптивных, интерактивных макетов — всё это способствует масштабируемости и повышает общее качество дизайна.

Основные преимущества Дизайн-токенов

Повторное использование: назначайте элементам свойства, такие как цвета, числа, текст и логические значения.

Гибкое переключение: легко переключайтесь между различными темами.

Динамические обновления: автоматически синхронизируйте изменения во всех экземплярах, где применяются токены, экономя время и усилия при обновлении дизайн-систем.

Примеры использования Дизайн-токенов

• Переключение между светлым/тёмным режимами или другими темами
• Настройка макетов
• Переключение языков
• Применение к типографике

Поддерживаемые типы Дизайн-токенов

Pixso предлагает 4 типа Дизайн-токенов, охватывающих различные потребности дизайна: цвета, числа, текст и логические значения.

Цветовые токены можно применять к заливке или обводке объекта.
Числовые токены можно использовать для задания размеров слоя, отступов и радиуса скругления.
Текстовые токены применяются к текстовым слоям, что удобно при повторении контента и локализации.
Булевы токены позволяют управлять видимостью слоя.

Как применять токены?

Дизайн-токены доступны в разных разделах панели дизайна в зависимости от их типа. Вот как их использовать:

1. Применение Дизайн-токенов к объектам

Выберите слой на холсте, затем используйте правую боковую панель.
Для цветовых токенов: нажмите на иконку Стиль.
Для числовых, текстовых или булевых токенов: нажмите на иконку токена (шестиугольник) или откройте выпадающее меню в полях ввода текста/чисел.

2. Дизайн-токены в компонентах

Создавайте формы компонентов с помощью наборов токенов, таких как Цвета и Интервалы.
Выберите элемент и выберите цветовые токены из коллекции Цвета.

Применяйте числовые токены из набора «Интервалы» к значениям отступов и интервалов в карточках с автоматической компоновкой (Auto Layout).

3. Использование Дизайн-токенов в тексте

Связывайте текстовые токены с текстовыми слоями для централизованного управления контентом (например, обновление повторяющегося текста во всех макетах).
Используйте текстовые токены для поддерживаемых текстовых свойств, например семейства шрифта.

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

4. Типографические токены

Текстовые токены (например, семейство шрифта) и числовые токены (например, насыщенность, размер) можно комбинировать для стандартизации типографических систем.

5. Токены в сетках

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

6. Дизайн-токены в эффектах

Связывайте токены со свойствами эффектов. Например, можно привязать значения тени к токенам.
Если перетащить карточку с токенами тени в другой контейнер, тень может исчезнуть (если токены применяются только в светлом режиме).

7. Дизайн-токены в градиентах

Вы также можете привязывать цветовые токены к отдельным узлам градиента:

1.  Выберите слой, откройте панель Заливка и выберите начальную точку градиента.
2. Перейдите на вкладку Токены, найдите Градиент и выберите «начальную точку градиента», чтобы применить её.

С Дизайн-токенами в Pixso 2.0 поддерживать консистентность дизайна и адаптироваться к изменениям стало проще, чем когда-либо — оптимизируйте рабочие процессы и создавайте более надёжные дизайн-системы уже сегодня.

Попробуйте Pixso бесплатно