Рецепт: Тёмная тема с помощью переменных в Фигме

Как сделать тёмную тему с помощью переменных в Фигме: рецепт Анны Князевой

Рецепты — это пошаговые инструкции, как сделать анимацию, трёхмерный объект, реалистичную текстуру и другие красивые штуки. Рецепты выходят раз в две недели по средам.

На бесплатном тарифном плане Starter в Фигме можно создать только один режим переменных. В Рецепте используется два режима, светлая и тёмная тема. Повторить процесс полностью получится на тарифе Professional и выше. Также можно использовать версию Education.

1. Откройте Фигму. Нажмите New Design File.

2. Чтобы создать фрейм, зажмите F, левой кнопкой мыши кликните по рабочей области и, не отпуская, потяните в сторону.

3. Создайте таблицу для разных состояний кнопок.

4. В правой панели выберите Local variables.
Нажмите Create variables. Кликните на плюсик и добавьте еще три переменных Color.
Кликните правой кнопкой мыши по переменной и выберите New group with selection. Перетащите переменные в группу.
Двойным кликом по названию группы переименуйте ее в «Control». Внутри группы еще раз сгруппируйте все переменные. Правой кнопкой нажмите на группу и выберите Duplicate group. Повторите последнее действие еще раз.
Переименуйте группы внутри Control в «Primary», «Secondary» и «Disabled». Дважды нажав на плюсик справа в верхней строке таблицы, добавьте две колонки. Назовите их «Light» и «Dark».
В группе Primary назовите переменные «BG», «BG‑hover», «Typo» и «Typo‑hover».
В группе Secondary назовите переменные «Border», «Border‑hover», «Typo» и «Typo‑hover».
В группе Disabled назовите переменные «BG» и «Typo», оставшиеся удалите.
Задайте переменным цвет.
Кликните в левой панели по группе Control. Нажмите внизу на Create variables и добавьте переменную. Назовите ее «BG» и задайте ей цвета в колонках Light и Dark.

5. Выделите в левой панели фрейм. В правой панели в блоке Fill нажмите на кнопку Libraries. Выберите в списке переменную BG в группе Control.
Нажмите F и создайте небольшой фрейм. В правой панели установите ему высоту «56».
В правой панели в блоке Fill нажмите на кнопку Libraries. Выберите в списке переменную BG в группе Control/Primary.
Создайте кнопку L.
В правой панели в блоке Selection colors наведите курсор на строку с цветом и нажмите на иконку с четырьмя точками. Выберите в списке переменную Typo в группе Control/Primary.
Создайте кнопки M и S.
Скопируйте кнопки. В правой панели в блоке Fill кликните по компоненту и выберите BG‑hover в группе Control/Primary.
В правой панели в блоке Selection colors кликните по белому компоненту и выберите Typo‑hover в группе Control/Primary.
Создайте кнопки в Secondary.
Выделите кнопки Hover и назначьте для нее соответствующие переменные.
Аналогично настройте кнопки Disabled.
Выделите все кнопки. В правой панели в блоке Frame установите скругление «4».

6. Выделите кнопку. Нажмите Ctrl/Command + Alt + K. Повторите с каждой кнопкой.

7. Выделите все кнопки. В правой панели в блоке Components нажмите Combine as variants.
Кликните по свойству и переименуйте его в «View».
Выделите кнопки в группе Primary. В правой панели в блоке Current variant переименуйте значение view в «Primary».
Аналогично переименуйте значение view у кнопок Secondary и Disabled, соответственно, в «Secondary» и «Disabled».

8. Выделите компонент с кнопками. В правой панели в блоке Properties нажмите плюс и выберите Variant.
Переименуйте значение Name в «Size» и Value в «L». Нажмите Create property. Аналогично для остальных кнопок.

9. Выделите компонент с кнопками. В правой панели в блоке Properties нажмите плюс и выберите Variant.
Переименуйте значение Name в «Hover» и Value в «False». Нажмите Create property.
Выделите все кнопки Hover. В правой панели в блоке Current variants переименуйте значение Hover в «True».

10. Выделите компонент с кнопками. В правой панели в блоке Properties нажмите плюс и выберите Variant.
Переименуйте значение Name в «Disabled» и Value в «False». Нажмите Create property.
Выделите все кнопки Hover. В правой панели в блоке Current variants переименуйте значение Disabled в «True».

11. Выделите фрейм и дважды кликните по его названию в левом верхнем углу. Переименуйте в «Light». Компонент переименуйте в «Buttons».
Скопируйте фрейм. Выделите новый фрейм и в правой панели в блоке Layer нажмите на иконку справа. Выберите Collection 1 и переключите на Dark.
Выделите подписи и измените их цвет на белый в правой панели в блоке Fill.

12. Выделите кнопку. В правой панели выберите вкладку Prototype.
Потяните стрелочку левой кнопкой мыши от кнопки Default к кнопке Hover. Вверху всплывающего окна раскройте список и выберите While hovering.
Значение Instant измените на Dissolve.
Повторите со всеми кнопками.

Готово!
Выделив кнопку, вы можете менять ее состояние, тип и размер, переключая их на правой панели в блоке Buttons.
При перетаскивании кнопки во фрейм с режимом Dark она автоматически изменит свои свойства.

[bytepixelmelody]

Вопрос от разработчика. У нас есть темная тема с помощью переменных. Мне доступен DEV-режим. Как сделать экспорт иконки для светлой темы, потом для темной?

[alinadanilyan]

Господи, уже весь ютуб перерыла, как сделать в фигме темный фон? Как у вас, белый фрейм на темном фоне 😩😩