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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Применяйте числовые токены из набора Интервалы к значениям отступов и интервалов в карточках с авто-лейаутом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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