Применение переменных для управления цветами и режимами (modes)

Мы уже знаем, как создавать коллекции переменных и организовывать их с помощью режимов. Теперь давайте углубимся в практику: научимся управлять цветами и режимами, чтобы создавать гибкие и масштабируемые дизайн-системы.

Управляем цветами с помощью переменных

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

Создаём цветовые переменные

Начнём с базовых цветовых переменных. Представьте, что у вас есть основной цвет бренда и несколько нейтральных оттенков.

1. Откройте панель Variables: В правой боковой панели Figma перейдите на вкладку "Local Variables".
2. Создайте новую коллекцию: Нажмите "Create collection" и назовите её, например, Colors.
3. Добавьте переменные цвета:
   • Нажмите "Create variable" и выберите "Color".
   • Назовите первую переменную brand/primary и задайте ей синий цвет (#007AFF).
   • Добавьте neutral/white (#FFFFFF) и neutral/black (#000000).
   • Для текста создайте text/primary (например, #333333) и text/secondary (например, #666666).

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

Применяем цветовые переменные к элементам

Теперь, когда у нас есть переменные, применим их к элементам дизайна.

1. Создайте простой элемент: Нарисуйте прямоугольник или текстовый блок.
2. Примените переменную:
   • Выберите элемент.
   • В панели "Fill" (Заливка) или "Text" (Текст) нажмите на иконку "Style" (четыре точки).
   • В разделе "Variables" выберите brand/primary для заливки прямоугольника или text/primary для текста.

Теперь цвет этого элемента связан с переменной. Измените значение переменной brand/primary — и все элементы, к которым она применена, автоматически обновятся.

Работаем с режимами (Modes) для тем

Режимы позволяют создавать разные версии одной и той же переменной. Это идеально подходит для реализации светлой и тёмной тем, разных цветовых схем или даже языковых версий.

Создаём режимы для светлой и тёмной темы

Расширим нашу коллекцию Colors, добавив режимы для светлой и тёмной темы.

1. Добавьте новый режим: В панели "Local Variables" в коллекции Colors нажмите "Add new mode". По умолчанию он будет называться Mode 2.
2. Переименуйте режимы:
   • Переименуйте Mode 1 в Light.
   • Переименуйте Mode 2 в Dark.
3. Настройте значения переменных для каждого режима:
   • Для режима Dark измените значения переменных:
     • brand/primary: оставьте тот же синий или выберите более насыщенный оттенок для тёмной темы.
     • neutral/white: измените на neutral/black (#000000).
     • neutral/black: измените на neutral/white (#FFFFFF).
     • text/primary: измените на светлый серый (#E0E0E0).
     • text/secondary: измените на более тёмный серый (#A0A0A0).

Теперь у каждой переменной есть два значения: одно для Light режима и одно для Dark.

Переключаем режимы на фреймах

Чтобы увидеть, как работают режимы, примените их к фреймам.

1. Создайте два фрейма: Нарисуйте два фрейма, например, Light Theme Page и Dark Theme Page.
2. Примените режим к фрейму:
   • Выберите фрейм Light Theme Page.
   • В правой боковой панели, в разделе "Layer", в выпадающем списке "Variables" выберите Light для коллекции Colors.
   • Повторите для фрейма Dark Theme Page, выбрав Dark.

Теперь все элементы внутри фрейма Dark Theme Page, которые используют переменные из коллекции Colors, автоматически примут значения, определённые для режима Dark. Это позволяет быстро переключаться между темами и демонстрировать их.

Важно: Переменные применяются к элементам, а режимы — к фреймам. Элементы внутри фрейма наследуют режим, назначенный этому фрейму. Если элемент не находится во фрейме с назначенным режимом, он будет использовать значение переменной из режима по умолчанию (первого созданного).

Практическое задание

1. Создайте коллекцию переменных Semantic Colors.
2. В этой коллекции определите переменные, которые описывают назначение цвета, а не его конкретный оттенок:
   • background/primary
   • background/secondary
   • text/on-primary (цвет текста на основном фоне)
   • text/on-secondary
   • button/primary
   • button/secondary
3. Создайте два режима: Light и Dark.
4. Настройте значения этих семантических переменных для каждого режима, используя уже созданные вами базовые цветовые переменные (например, background/primary в Light режиме может быть neutral/white, а в Dark режиме — neutral/black).
5. Создайте несколько элементов UI (кнопки, карточки, текстовые блоки) и примените к ним эти семантические переменные.
6. Поместите эти элементы в два фрейма и назначьте каждому фрейму соответствующий режим (Light и Dark), чтобы увидеть, как они меняются.

На следующем шаге мы продолжим работать с переменными, но уже для управления отступами и размерами. Это позволит нам создавать по-настоящему адаптивные и гибкие макеты.