Стили: цвета, текст, эффекты

Стиль — это сохранённый набор свойств, который можно применить ко многим объектам и менять централизованно.

Покрасили 50 кнопок вручную, а бренд сменил синий? Перекрашивать каждую — кошмар. Со стилями вы меняете цвет в одном месте.

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

Создаём цветовой стиль

1. Выделите объект с нужной заливкой.
2. В секции Fill нажмите иконку из четырёх точек (Styles) справа.
3. Нажмите +, чтобы создать новый стиль.
4. Дайте осмысленное имя, например Primary/Blue — слэш создаёт группу.
5. Готово: теперь этот цвет в списке стилей и применяется одним кликом.

Текстовые стили и эффекты

Точно так же создаются текстовые стили (сохраняют шрифт, размер, line height) и стили эффектов (тени, размытие). Выделите текст с настроенной типографикой, откройте панель стилей текста и сохраните как, например, Heading/H1.

Иерархия стилей через слэш

  Primary/Blue        ->  группа Primary
  Primary/Blue Dark
  Text/Body
  Text/Caption
  Heading/H1          ->  группа Heading
  Heading/H2
  Effect/Card Shadow

Редактирование стиля

Когда нужно поменять оформление везде сразу:

1. Откройте панель стилей (вкладка справа или через любой объект).
2. Наведите на стиль, нажмите иконку настройки.
3. Измените цвет или шрифт — и все объекты с этим стилем обновятся автоматически.

Стили эффектов и сеток

Помимо цвета и текста, в стили можно сохранять эффекты (наборы теней и размытий) и сетки (layout grids). Стиль эффекта удобен для единой тени карточек: настроили красивую мягкую тень один раз, сохранили как Effect/Card — и применяете ко всем карточкам. Захотели сделать тени по всему продукту чуть глубже — меняете стиль, обновляется везде.

Стили сеток гарантируют, что все экраны используют одну и ту же колоночную сетку (например, 12 колонок с заданными отступами). Это держит вёрстку дисциплинированной на всех макетах сразу.

Стили против переменных: что когда

Частый вопрос новичка: стили или переменные? Короткий ответ — используйте оба. Стили хорошо подходят для составных, «упакованных» вещей: текстовый стиль несёт сразу шрифт, размер, межстрочный интервал; стиль эффекта — целый набор теней. Переменные (следующий раздел) лучше для атомарных значений, которые меняются по контексту: один цвет в светлой и тёмной теме, число отступа. На практике зрелые системы строят переменные как фундамент, а стили — как удобные «обёртки» поверх них.

Горячие клавиши

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

Частые ошибки

• Красят всё локально. Без стилей смена палитры превращается в ручную правку сотен объектов.
• Дают стилям бессмысленные имена. «Color 1» ничего не говорит. Используйте структуру Группа/Название.
• Путают стили и переменные. Стили — это готовые наборы свойств. Переменные (следующий раздел) — более гибкий механизм с режимами. Часто их используют вместе.

Совет профи: стили — это первая дисциплина системы

Переход от локальных заливок к стилям — поворотный момент в росте дизайнера. Как только вы начинаете называть и переиспользовать цвета и типографику, ваш файл превращается из набора картинок в управляемую систему. Не откладывайте этот шаг «на потом»: проще завести стили в начале проекта, чем потом переводить на них сотни объектов. Договоритесь об именовании через слэш (Группа/Название), держите имена осмысленными и техническими (роль, а не «красивое слово»), и регулярно чистите дубли. Стили — это мостик к переменным и полноценной дизайн-системе, которыми мы займёмся в следующих разделах. Освоив их, вы уже работаете на уровень выше тех, кто красит каждый объект вручную.

Чек-лист

• Создал цветовой стиль с именем через слэш.
• Сохранил текстовый стиль.
• Применил стиль к нескольким объектам.
• Отредактировал стиль и увидел обновление везде.

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