Стили в Figma: что хранит стиль, чего в нём нет и как его публиковать
Стиль — это сохранённый набор свойств, который применяется к объекту одним кликом. Поменяли стиль — обновились все объекты с ним.
Но у стиля есть границы: часть свойств в него не входит. И это регулярно приводит к «почему цвет не применился».
Пять типов стилей
Документация перечисляет:
- Colors — заливка, обводка, изображение, градиент, паттерн, shader-заливка;
- Text — семейство шрифта, размер, межстрочное расстояние, трекинг;
- Effects — тень, внутренняя тень, размытие слоя, размытие фона, текстура, шум;
- Layout guides — строки, колонки, сетка;
- Animations — позиция, масштаб, поворот, размер, прозрачность, путь.
Последний тип относится к прототипам и анимациям.
Что стиль выражает одновременно
Ключевая формулировка из документации: стиль хранит комбинацию значений, которые выражаются все сразу.
Пример: текстовый стиль может содержать семейство, размер и насыщенность. Применили — применились все три свойства.
Это отличается от переменной, которая хранит одно значение, но может иметь несколько вариантов под режимы.
Текстовые стили: что входит
Документация по текстовым стилям даёт точный список.
Поддерживаются:
- семейство, насыщенность и размер шрифта;
- межстрочное расстояние;
- межбуквенное расстояние;
- отступы между абзацами и отступы абзаца;
- оформление (подчёркивание и т. п.);
- регистр;
- списки;
- OpenType-функции.
Не поддерживаются:
- горизонтальное и вертикальное выравнивание;
- цвет и заливка;
- поведение при изменении размера фрейма.
Отсюда практическое следствие: цвет текста задаётся отдельным цветовым стилем, а выравнивание — вручную для каждого блока.
Как создать стиль
Два пути.
Из объекта. Выделите объект с нужными свойствами, в правой панели нажмите Apply styles or variables рядом с нужным разделом, затем New style or variable. Задайте имя и описание, настройте свойства, нажмите Create style.
Из Local styles. Кликните плюс рядом с Local styles в правой панели (когда ничего не выделено), выберите тип, задайте имя и значения.
Описание стиля показывается при наведении в списке — это удобно для команды.
Как применить
- Выделите объект.
- В правой панели нажмите иконку Apply styles рядом с нужным свойством.
- Выберите стиль из списка.
В списке видны и локальные стили файла, и стили из подключённых библиотек.
Порядок сортировки: по имени команды, затем по имени файла, затем по порядку создания.
Редактирование
Локальный стиль правится в модальном окне Edit style: имя, описание, значения.
Опубликованный стиль правится в файле-библиотеке. Если у вас нет прав на этот файл, изменить стиль нельзя — можно только применить.
В стиль-пикере есть команда Go to style definition, которая ведёт к источнику.
Публикация в библиотеку
- Откройте панель Assets и нажмите иконку Library, либо
Alt/Option + 3. - В разделе This file нажмите Publish.
- Добавьте описание изменений — оно попадёт в историю версий файла.
- Нажмите Publish.
После публикации стили доступны в других файлах команды, к которым подключена библиотека.
Важное ограничение из документации: если изменить опубликованный стиль, изменения применятся к объектам в текущем файле, но в библиотеку попадут только после повторной публикации.
Стиль против переменной
Правило, которое экономит время:
- стиль — когда свойства должны меняться вместе (типографика, тени, градиенты);
- переменная — когда одно значение меняется по контексту (цвет темы, отступ, радиус).
Документация отдельно отмечает: стили поддерживают градиенты и составные значения вроде нескольких заливок и теней, а переменные — нет.
Практика: типографическая шкала
- Определите 5–7 размеров: H1, H2, H3, body, caption.
- Создайте текстовые стили с полным набором свойств.
- Создайте цветовые стили для текста: primary, secondary, disabled.
- Применяйте текст и цвет отдельно.
Так система остаётся гибкой: цвет меняется независимо от размера.
Практика: тени
Стиль эффектов хранит параметры тени целиком. Это удобно для карточек: одна правка стиля обновляет все карточки.
Но если в макете тени «на глаз» разные, стиль не поможет — сначала нужно привести их к одному виду.
Производительность
Стили почти не влияют на скорость. Файл тормозит от количества слоёв и эффектов, а не от числа стилей.
На ноутбуке с 16 ГБ ОЗУ большие файлы с сотнями эффектов остаются основной причиной замедления.
Стили и компоненты
Стиль и компонент решают разные задачи.
Компонент описывает структуру: какие слои, как они расположены, какие варианты есть.
Стиль описывает оформление: цвет, шрифт, тень.
Практика: компонент кнопки использует стили для цвета и текста. Тогда смена фирменного цвета обновляет все кнопки без правки компонента.
Если стиль «вшит» в компонент значениями, система быстро расходится.
Как навести порядок в стилях
Три правила, которые работают.
Именуйте по смыслу, а не по цвету. text/primary, а не grey-900: оттенок может измениться, смысл — нет.
Группируйте. Figma поддерживает группы стилей; они сворачиваются и упрощают поиск.
Удаляйте дубли. Если два стиля отличаются одним значением и используются в одном месте, скорее всего, это ошибка.
Перед ревизией опубликуйте библиотеку: история версий позволит откатиться.
И последнее: стили живут в файле, поэтому при копировании макета между файлами без библиотеки оформление приедет «жёсткими» значениями, а связь со стилем потеряется.
Частые ошибки
Ждать, что текстовый стиль задаст цвет. Цвет не входит в стиль.
Искать выравнивание в стиле. Его там нет.
Править опубликованный стиль в своём файле. Изменение не уйдёт в библиотеку.
Создавать стиль на каждый оттенок. Система превращается в палитру.
Путать стиль и переменную. Дубли и рассинхрон.
FAQ
Сколько типов стилей в Figma?
Пять: цвет, текст, эффекты, направляющие макета и анимации.
Входит ли цвет в текстовый стиль?
Нет, цвет задаётся отдельным стилем.
Как опубликовать стили?
Через панель Assets → Library → Publish.
Где править стиль из библиотеки?
В файле-библиотеке, при наличии прав редактирования.
Чем стиль отличается от переменной?
Стиль хранит набор свойств сразу, переменная — одно значение с вариантами.