Проект в Фигме →

Мы используем функцию Edit Color Style, когда нужно добиться единства в цветах по всему проекту. Они позволяют задавать основную палитру проекта и назначать именованные цвета, которые можно использовать для заливки, в обводках и тексте.

Впоследствии цвет в стиле можно заменять по всему проекту, редактируя стиль.

<aside> 💡 Задача: создадим простейшую палитру проекта и подвяжем стили к слоям.

</aside>

  1. Создаём круг, O. Он будет пробником, в котором будем подбирать цвет.
  2. Выбираем нужный цвет или оставляем серый. Он будет тем цветом, который мы пропишем в стиль.
  3. В блоке Fill находим иконку c четырьмя точками. Клик по ней раскрывает панель Color Styles.
  4. Нажимам кнопку +, Create Style.

  1. Заполняем имя цвета, желательно латиницей и без пробелов. Вместо них можно использовать - или camelCase. Это нужно, потому что впоследствии твои разработчики будут так называть переменные. Было бы круто, если бы стили цветов и названия переменных соответствовали друг другу.

  1. Стиль создан. Теперь круг залит серым цветом стиля grey.