Переменные

Переменные хранят переиспользуемые дизайн-токены — цвета, значения отступов и другие свойства, которые можно привязывать к узлам. Измените значение переменной, и каждый использующий её узел обновится.

Открытие диалога переменных

Когда узлы не выделены, вкладка «Дизайн» показывает свойства уровня страницы, включая раздел «Переменные» с количеством коллекций и переменных. Нажмите значок настроек, чтобы открыть диалог переменных.

Коллекции

Переменные организованы в коллекции. Каждая коллекция отображается как вкладка в диалоге.

• Переключение коллекции — кликните по вкладке
• Переименование коллекции — дважды кликните по названию вкладки

Режимы

У каждой коллекции может быть несколько режимов (например, Светлая и Тёмная тема). Режимы отображаются как столбцы в таблице переменных. Переменная имеет значение для каждого режима.

Добавление коллекций и режимов

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

Управление переменными

Таблица переменных использует столбцы с изменяемой шириной: «Имя» и по одному столбцу на каждый режим.

• Создать переменную — нажмите кнопку «+ Создать переменную»
• Редактировать имя — кликните по ячейке с именем переменной для встроенного редактирования
• Редактировать значение — кликните по любой ячейке значения, чтобы изменить его для данного режима
• Поиск — введите текст в строку поиска для фильтрации переменных по имени

Цветовые переменные

Цветовые переменные отображают встроенное поле ввода цвета с палитрой. Кликните по образцу, чтобы открыть палитру и выбрать новый цвет.

Привязка переменных к заливкам

В разделе «Заливка» панели свойств используйте выбор переменных, чтобы привязать цветовую переменную к заливке узла.

• Привязать — выберите цветовую переменную из списка. Заливка отображает фиолетовый бейдж с именем переменной.
• Отсоединить — нажмите кнопку отсоединения на бейдже, чтобы удалить привязку. Заливка возвращается к разрешённому значению цвета.

Когда значение переменной изменяется (или при переключении режимов), все привязанные заливки обновляются автоматически.

Советы

• Используйте коллекции для группировки связанных токенов (например, «Примитивы» для базовых цветов, «Семантические» для ролевых алиасов, «Отступы» для значений раскладки).
• Режимы полезны для переключения тем — определите значения для светлого и тёмного режимов в одной коллекции.
• Переменные поддерживают алиасы — коллекция «Семантические» может ссылаться на значения из коллекции «Примитивы».
• См. Рисование фигур для информации о заливках и палитре цветов.