Создание и организация коллекций переменных

Переменные в Figma — это мощный инструмент для централизованного управления значениями: цветами, отступами, размерами и даже текстом. Вы уже знакомы с их типами и базовым применением. Теперь давайте разберёмся, как эффективно организовать переменные, чтобы они стали фундаментом вашей дизайн-системы.

Зачем нужны коллекции переменных?

Представьте: у вас десятки или сотни переменных. Если они в одном списке, управлять ими сложно. Коллекции переменных (Variable Collections) решают эту проблему. Они позволяют группировать переменные по смыслу, назначению или темам.

Например, вы можете создать отдельные коллекции для:

• Цветов (Colors)
• Отступов и размеров (Spacing и Sizing)
• Типографики (Typography)
• Брейкпоинтов (Breakpoints)
• Токенов состояния (StateTokens)

Это улучшает читаемость, упрощает поиск и делает дизайн-систему масштабируемой.

Создаём новую коллекцию переменных

Создать новую коллекцию просто:

1. Откройте панель Local Variables (локальные переменные) в правой боковой панели Figma. Если её нет, убедитесь, что на холсте не выбран ни один объект.
2. Нажмите Create collection (Создать коллекцию).
3. Назовите коллекцию осмысленно, например, Core Colors или Spacing System.

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

Организуем переменные внутри коллекций

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

Группировка переменных с помощью слешей (/)

Как и для стилей, слеши в именах переменных создают иерархию внутри коллекции. Это особенно полезно для цветовых палитр, шкал отступов или размеров.

Пример организации цветов:

• colors/primary/500
• colors/primary/600
• colors/secondary/500
• colors/neutral/white
• colors/neutral/black

Пример организации отступов:

• spacing/xs (4px)
• spacing/sm (8px)
• spacing/md (16px)
• spacing/lg (24px)
• spacing/xl (32px)

Такая структура упорядочивает переменные и облегчает их использование: Figma автоматически группирует их в выпадающих списках.

Режимы (Modes) для тем и адаптивности

Ключевая особенность переменных — режимы (Modes). Они позволяют задавать разные значения для одной переменной в зависимости от контекста. Это идеальный инструмент для светлых/тёмных тем, разной плотности интерфейса или адаптивных брейкпоинтов.

Пример использования режимов для тем:

Представьте переменную colors/background/primary. В коллекции Colors вы можете создать два режима:

• Light Mode: colors/background/primary = #FFFFFF (белый)
• Dark Mode: colors/background/primary = #121212 (тёмно-серый)

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

Как создать режим:

1. В панели Local Variables выберите нужную коллекцию.
2. Нажмите Add new mode (Добавить новый режим) в верхней части панели.
3. Назовите режим осмысленно, например, Light, Dark, Desktop, Mobile.
4. Для каждой переменной в коллекции задайте соответствующее значение для нового режима.

Важно: Переменные без значения в определённом режиме будут использовать значение из первого (базового) режима.

Практика: Создаём коллекцию цветов и отступов

Закрепим знания на практике.

1. Создайте новый файл Figma.
2. Откройте панель Local Variables.
3. Создайте новую коллекцию Design Tokens.
4. В ней создайте две переменные типа Color:
   • colors/primary/main со значением #007BFF (синий)
   • colors/text/primary со значением #333333 (тёмно-серый)
5. Создайте две переменные типа Number:
   • spacing/md со значением 16
   • spacing/lg со значением 24
6. Создайте новый фрейм, добавьте прямоугольник и текстовый слой.
7. Примените colors/primary/main к заливке прямоугольника.
8. Примените colors/text/primary к цвету текста.
9. Используйте spacing/md и spacing/lg для отступов (padding) с помощью Auto Layout.

Теперь создайте новый режим Dark в коллекции Design Tokens. Измените значения colors/primary/main и colors/text/primary для этого режима на подходящие для тёмной темы (например, colors/primary/main на #66B2FF и colors/text/primary на #E0E0E0). Переключите режим на фрейме и посмотрите, как автоматически меняются цвета.

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