Создание и переключение между светлой и темной темами

Вы уже умеете создавать и организовывать коллекции переменных, а также использовать режимы. Отлично! Пришло время применить эти знания на практике и создать одну из самых востребованных функций в современном UI — переключение между светлой и тёмной темами.

Готовим переменные для тем

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

1. Создайте коллекцию переменных для цветов. Если у вас её ещё нет, создайте новую. Например, назовите её Colors.

2. Добавьте режимы. Внутри коллекции Colors добавьте два режима: Light и Dark.

3. Определите переменные цвета для каждого режима. Для каждого элемента интерфейса, цвет которого будет меняться в зависимости от темы, создайте соответствующую переменную.

   Вот примеры:

   • bg-primary:
     • Light режим: #FFFFFF (белый)
     • Dark режим: #1A1A1A (тёмно-серый)
   • text-primary:
     • Light режим: #000000 (чёрный)
     • Dark режим: #FFFFFF (белый)
   • button-bg:
     • Light режим: #007AFF (синий)
     • Dark режим: #64B5F6 (светло-синий)
   • button-text:
     • Light режим: #FFFFFF (белый)
     • Dark режим: #000000 (чёрный)

   Совет: Используйте семантическое именование для переменных цвета (например, bg-primary, text-secondary), а не конкретные названия цветов (например, red-500). Это делает вашу дизайн-систему гибче и понятнее.

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

Переменные цвета с режимами готовы. Теперь применим их к элементам в Figma.

1. Выберите элемент, которому хотите задать цвет (например, фон фрейма, текст, фигуру).

2. В панели свойств (Design panel) найдите свойство цвета (Fill, Stroke, Text Color).

3. Нажмите на иконку переменной (квадрат с точкой) рядом с выбором цвета.

4. Выберите нужную переменную из вашей коллекции Colors.

   Например, для фона фрейма выберите bg-primary, для текста — text-primary.

   Важно: Применяйте переменные ко всем элементам, которые должны менять цвет при смене темы. Это могут быть фоны, тексты, иконки, границы, тени и т.д.

Переключаем темы с помощью режимов

Самое интересное начинается сейчас! Переключить тему в Figma очень просто:

1. Выберите фрейм, который содержит элементы с применёнными переменными.
2. В панели свойств (Design panel), в разделе Variables, вы увидите выпадающий список Mode.
3. Выберите нужный режим (Light или Dark).

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

Это позволяет вам мгновенно переключаться между темами, видеть, как дизайн выглядит в разных условиях, и демонстрировать это заказчикам или команде. Удобно, правда? 😉

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

Создайте небольшой макет, например, карточку товара или элемент навигации. Примените к нему переменные цвета, как описано выше, для фона, текста, кнопок и других элементов. Убедитесь, что у вас есть режимы Light и Dark для этих переменных.

Попробуйте переключать режимы для вашего фрейма и понаблюдайте, как меняются цвета. Это поможет вам закрепить понимание того, как переменные и режимы работают вместе для создания динамических тем.

В следующем разделе мы углубимся в использование числовых переменных для стандартизации отступов и размеров. Это позволит вам создавать ещё более гибкие и адаптивные макеты.