Коротко
Переменная в Morfa — именованное значение типа «Цвет», «Число», «Строка» или «Логическое», которое хранится в коллекции и подставляется в слои по ссылке. Окно «Переменные» открывается кнопкой «Открыть переменные»: во вкладке «Дизайн», когда ничего не выделено, или в «Ассетах».
У коллекции могут быть режимы, например «Светлая» и «Тёмная»: режим выбирают на фрейме, и экран перекрашивается без копий. В коде переменные становятся CSS-переменными в tokens.css, а режимы — блоками с атрибутом data-theme. В прототипах переменных и условий пока нет.
Что такое переменная и коллекция
Переменная — значение, которое хранится в одном месте и используется во многих слоях. Привяжите заливку всех кнопок к переменной «Акцент/Основной», и цвет кнопок меняется правкой одного значения.
Переменные живут в коллекциях — наборах по смыслу: «Тема» для цветов интерфейса, «Отступы» для размеров. Косая черта в имени делит переменные на группы: «Фон/Основной» и «Фон/Карточка» окажутся в одной группе «Фон».
По сути переменные — это дизайн-токены прямо в макете: у каждой есть имя, тип и своё значение для каждого режима коллекции.
Как создать коллекцию и переменные
Всё делается в окне «Переменные». Снимите выделение: во вкладке «Дизайн» появится раздел «Переменные» с кнопкой «Открыть переменные». Та же кнопка есть в «Ассетах».
Создайте коллекцию
Нажмите «+» рядом со словом «Коллекции» («Создать коллекцию»). Появится «Коллекция 1» с режимом «Режим 1»: сразу переименуйте её, например в «Тема».
Добавьте режимы
Кнопка «+» в заголовке таблицы («Добавить режим») создаёт новый столбец. Двойной щелчок по названию режима переименовывает его, а правый щелчок открывает «Сделать основным» и «Удалить режим».
Создайте переменные
Кнопка «Создать переменную» внизу окна предложит тип: «Цвет», «Число», «Строка» или «Логическое». Назовите переменную через косую черту, например «Фон/Основной».
Заполните значения
В каждом столбце режима своё значение: цвет вводят в HEX, число и строку — в поле, логическое переключают между «Да» и «Нет».
Сошлитесь на другую переменную
Кнопка «Сослаться на переменную» рядом со значением подставит переменную того же типа: так «Кнопка/Фон» может ссылаться на «Акцент/Основной». Ссылку, которая ведёт по кругу, редактор сделать не даст.
Четыре типа переменных и к чему их привязывают
Тип выбирают при создании, и он решает, к каким полям панели переменную можно привязать.
| Тип | Что хранит | Где используется |
|---|---|---|
| Цвет | Цвет в HEX, можно с прозрачностью | Заливки и обводки слоёв |
| Число | Число | Ширина и высота, мин. и макс. размеры, интервал и отступы автолейаута, скругление, непрозрачность |
| Строка | Текст | Хранится в коллекции и меняется по режимам; в коде становится CSS-переменной со строкой |
| Логическое | «Да» или «Нет» | Хранится в коллекции; в коде попадает в tokens.ts как флаг |
Как привязать переменную к слою
Привязанный слой хранит ссылку на переменную, а не число: поменяйте значение в окне «Переменные», и все такие слои обновятся.
Цвет заливки или обводки
В разделе «Заливка» нажмите кнопку «Стили и переменные заливки» и выберите переменную в списке «Переменные». Другой путь — открыть палитру цвета и перейти на вкладку «Библиотеки».
Число
Наведите курсор на поле ширины, интервала, отступа, скругления или непрозрачности: в правом краю поля покажется шестиугольник «Применить переменную». Выберите переменную типа «Число».
Проверьте привязку
Вместо числа или цвета поле показывает имя переменной. Кнопка «Отвязать переменную» снимает связь, а слой сохраняет текущее значение.
Когда ничего не выделено, во вкладке «Дизайн» видны локальные переменные и стили файла: так удобно проверить, что уже заведено.
Режимы: светлая и тёмная тема без копий экранов
Режим — набор значений одной коллекции. В шаблоне «Мобильное приложение» у коллекции «Тема» два режима: «Светлая» (основной) и «Тёмная». Переменная «Фон/Основной» в первом режиме белая, во втором — почти чёрная.
Режим выбирают на фрейме. Выделите экран: во вкладке «Дизайн» появится раздел «Переменные» со строкой для каждой коллекции, где больше одного режима. Выберите «Тёмная», и все привязанные слои внутри фрейма возьмут тёмные значения. Вариант «Авто» берёт режим у родительского фрейма, а явный выбор на вложенном фрейме его перекрывает: так делают светлую карточку на тёмном экране.
Режимы годятся не только для темы. Коллекция «Плотность» с режимами «Обычная» и «Компактная» переключает отступы так же, как «Тема» переключает цвета.
Пошагово, от коллекции до переключения темы, — в гайде тёмная тема в макете.
Что получится в коде
Во вкладке «Код» и в проекте «Экспорт в React…» переменные становятся дизайн-токенами: CSS-переменными в src/tokens.css и именами в src/tokens.ts. Русские имена переводятся или транслитерируются: «Фон/Основной» превращается в --color-background-primary.
Значения основного режима записываются в :root, остальные режимы — в блоки с атрибутом. Первая коллекция с режимами получает атрибут data-theme, следующие — свой, например data-density для «Плотности». Фрейм, которому в редакторе выбрали «Тёмная», получает в разметке data-theme="dark", а ссылка на другую переменную остаётся ссылкой var(--…).
Привязанные слои ссылаются на токен и не повторяют значение, поэтому правка токена меняет все места сразу. Логические переменные попадают только в tokens.ts, в объект flags.
:root {
--color-background-primary: #FFFFFF; /* Фон/Основной */
--radius-card: 20px; /* Скругление/Карточка */
}
[data-theme='dark'] {
--color-background-primary: #0E0F13;
}
Как разработчик получает эти файлы, описано на странице дизайн в код.
Переменные в библиотеке команды
Коллекции переменных публикуются в общую библиотеку вместе с компонентами и стилями: «Файл → Опубликовать библиотеку…». Служебную переменную можно скрыть от публикации.
В файле, который подключил библиотеку, её коллекция доступна только для чтения: значения меняют в файле библиотеки, и они приходят с обновлением. Как устроены общие библиотеки, описано на странице для дизайн-систем.
Чего пока нет
Переменные работают в макете и в коде, но у них есть границы, которые стоит знать заранее.
- Переменных и условий в прототипах: «Установить переменную» и переходы по условию сделать нельзя. Смену состояния показывают вариантами компонента и действием «Изменить на» — подробнее на странице прототипы.
- Привязки строк и логических значений к слоям: в панели к переменным привязываются цвета и числовые поля.
- Переноса переменных из Figma: Figma отдаёт их через API только на плане Enterprise, поэтому слои получают текущие значения, а коллекции с режимами собирают заново.