Как вынести цвета и отступы в переменные и перестать вписывать числа руками

Цвет, вписанный в слой кодом, придётся менять в каждом слое. Переменная меняется в одном месте.

В приложении «Лесной обжарки» синий стоит на кнопках, ссылках, выбранных чипах и в нижнем меню.

Если код цвета вписан в каждый слой, смена синего на зелёный — это десятки правок. И какую-то обязательно пропустят.

С отступами так же. Отступ 16 внутри карточки вписан в каждую карточку отдельно.

Попробуйте сами. Почти весь экран ниже привязан к переменным, но две вещи — нет.

Что даёт переменная

• Правка в одном месте. Новое значение ставят в переменную, и оно появляется везде, где она привязана.
• Одно значение вместо «почти такого же». На всех кнопках один синий, а не пять оттенков, подобранных на глаз.
• Общее имя с кодом. В режиме разработчика (Dev Mode, он есть на платных тарифах) Figma показывает в коде имя переменной рядом со значением. Разработчик берёт то же имя.

В коде такие именованные значения называют дизайн-токенами. В этом уроке переменная и токен значат одно и то же: имя и значение.

Переменная — это имя и значение. Слою дают имя, а значение хранится в одном месте.

Переменные лежат в коллекциях. Коллекция — это набор, например все цвета и отступы приложения.

Открываются они вкладкой Variables в левой панели Figma.

Типы переменных

• Цвет — сплошной цвет для заливки, обводки, текста и тени.
• Число — для отступов и промежутков автораскладки, радиуса углов, ширины и высоты, кегля и интерлиньяжа.
• Строка — для текста в слое и названия шрифта.
• Логическое — чтобы показать или скрыть слой.

Ещё два типа, timing и easing, нужны для анимации. На этой ступени хватит первых двух: цветов и чисел.

Как привязать

• Число. Щёлкните в поле свойства, например в отступ или радиус, и нажмите «=». Откроется список переменных.
• Цвет. Нажмите на образец заливки и откройте вкладку Libraries или нажмите значок Apply styles and variables в разделе Fill. Переменные там в квадратных образцах, стили — в круглых.

Теперь значение приходит из переменной. Поменяете переменную — поменяется и слой.

Отвязать переменную у цвета можно значком Detach variable, у числа — стерев значение в поле.

Одно исключение: если тянуть отступ или промежуток автораскладки ручками прямо на холсте, привязка слетает сама.

Стиль или переменная

У Figma есть и стили. Они не исчезли с появлением переменных.

• Переменная хранит одно значение: один цвет, одно число.
• Стиль хранит набор. Текстовый стиль — это сразу шрифт, кегль и интерлиньяж. Цветовой стиль может держать градиент или несколько заливок.

Поэтому стили текста остаются стилями. А кегль внутри стиля можно взять из числовой переменной.

Как собрать шкалу отступов, разобрано в уроке «Композиция и сетка», Junior. Шкалу кеглей — в уроке «Типографика», Junior. Здесь — как эти шкалы хранить.

Значение переменной меняется, имя остаётся. Поэтому имя говорит, зачем это значение, а не какое оно.

Сравните:

• «blue» → «color/accent»
• «gray-dark» → «color/text»
• «padding-16» → «space/m»
• «catalog-card-padding» → «space/m»

Посмотрите, что стало с именами после того, как магазин сменил синий на зелёный, а отступ в карточках — с 16 на 24.

Как называть

По назначению, а не по виду. Акцент, текст, фон, граница. Через год акцент может стать зелёным, а «blue» так и останется синим только по имени.

Не по месту. «catalog-card-padding» завтра понадобится в корзине, и имя начнёт путать.

Одними словами во всём файле. Если у одной переменной «text», у соседней не «font-color».

Латиницей, как в коде. Спросите разработчика, как такие значения называются у него. Чем ближе имена, тем меньше переводить туда и обратно.

В справке Figma вы встретите и имена по цвету: gray/400, brand/watermelon. Так называют палитру-основу, к которой слои напрямую не привязывают. Как устроены эти два слоя, разобрано на следующей ступени.

Номер ступени — тоже имя

Отступы в больших системах часто называют номером ступени шкалы.

Например:

У Atlassian space.100 — это 8 пикселей, а space.200 — 16.

Номер ступени — не число пикселей. Значение ступени можно поменять, а порядок останется прежним.

Как называть переменные по ролям, если у продукта две темы, разобрано на следующей ступени.

Переменная нужна тому, что повторяется. Разовое значение можно оставить числом.

Каждая переменная — ещё одна строка в наборе. Кто-то должен понимать, что она значит и где её можно брать.

Если в наборе есть «color/autumn-banner» для одного баннера, через полгода никто не вспомнит, можно ли взять её для кнопки.

Проверьте себя

Нужна ли переменная этим значениям из приложения «Лесной обжарки»?

Экран каталога, у каждого элемента — метка, откуда его значение. Четыре значения вписаны руками там, где нужна переменная.

Имя переменной в метке — значение взято из набора. Код цвета или число — повод присмотреться.

Нажимайте на элементы, которые, по-вашему, надо привязать к переменной. Нормальные элементы тоже можно нажать.

Как найти такие значения в своём макете

• Откройте Selection colors. Выделите экран: в правой панели Figma покажет его цвета, отдельно переменные, стили и обычные заливки. Обычная заливка в этом списке — цвет без переменной. Значок мишени рядом выделит все слои с этим цветом.
• Сравните со шкалой. Отступ 13 при шкале 4, 8, 12, 16 — опечатка, а не решение.
• Запустите Check designs, если у команды тариф Organization или Enterprise. Проверка находит вписанные цвета, радиусы и отступы и предлагает переменную на замену.

Возьмите свой макет, вынесите цвета и отступы в переменные и проверьте, что вписанных руками значений не осталось.

Часть 1 · Выписать, 15 минут

1. Выделите два-три экрана и откройте Selection colors. Выпишите все цвета. Если своего проекта нет, возьмите экран каталога из поиска выше.
2. Выпишите отступы и радиусы. Пройдитесь по автораскладкам: промежутки и отступы внутри.
3. Сведите почти одинаковые. 1D5FD1 и 1E60D0 — один цвет. 13 и 12 — одна ступень.
4. Отметьте разовое. Его оставите числом.

ПРОЕКТ: ______________________        Дата: __.__.____

ЦВЕТА
имя переменной      | значение | где стоит
color/accent        | #______  | ______________________
color/text          | #______  | ______________________
color/______        | #______  | ______________________

ОТСТУПЫ И РАДИУСЫ
space/s             | ____     | ______________________
space/m             | ____     | ______________________
radius/______       | ____     | ______________________

СВЕДЕНО (почти одинаковые → одно значение)
______ и ______ → ______

РАЗОВОЕ (оставляю числом)
______________________ — почему: ______________________

ПРОВЕРКА
акцент сменили в одном месте — поменялся везде: да / нет
вписанных руками значений осталось: ____

Часть 2 · Завести и привязать, 40 минут

1. Откройте вкладку Variables в левой панели, создайте коллекцию и заведите переменные из шаблона: цвета и числа.
2. Назовите по назначению: color/accent, space/m, radius/m.
3. Привяжите каждую заливку, обводку, отступ и радиус. Начните с главных компонентов: экземпляры получат привязку сами.

Часть 3 · Проверить, 15 минут

1. Смените значение color/accent на любой другой цвет и пройдите по экранам. Всё поменялось?
2. Снова откройте Selection colors. Остались коды цветов без переменной — привяжите или запишите в разовое.
3. Верните цвет и заполните строку «Проверка».

Что должно получиться

• Коллекция переменных с цветами, отступами и радиусами.
• Макет без вписанных значений, кроме разовых.
• Заполненный шаблон выше.

План работы: 15 минут выписать, 40 — завести и привязать, 15 — проверить. Около часа с небольшим.

Частые сложности

• «Почти одинаковых синих — восемь». Выберите тот, что стоит на главной кнопке, или спросите разработчика, какой синий в коде. Остальные привяжите к нему.
• «Переменных больше, чем цветов в макете». Проверьте, не завели ли вы переменные на разовые значения.
• «Компонент со своими числами внутри». Привязывайте в главном компоненте, а не в экземплярах. Как устроены компоненты, разобрано в уроке «Компоненты и варианты», Junior.
• «Отступ отвязался сам». Если тянуть отступ автораскладки ручками прямо на холсте, Figma отвязывает переменную. Меняйте значение в поле или в самой переменной.
• «Не знаю, как назвать». Ответьте, зачем это значение: фон, текст, акцент, отступ внутри. Ответ и есть имя.

Переменные работают, если

• Цвета, отступы и радиусы, которые повторяются, лежат в переменных
• В полях свойств имена переменных, а не числа и коды цветов
• Почти одинаковые значения сведены к одному
• Имена говорят о назначении: color/accent, а не blue
• Разовые значения остались числами, набор не засорён
• Смена акцента во всём макете — одна правка

Что мешает

• Код цвета в слое. Смена переменной до него не дойдёт.
• «Почти такой же» цвет. Глазом не отличить, а при смене палитры он останется старым.
• Имя по цвету. «blue», который стал зелёным.
• Имя по месту. «catalog-card-padding» в корзине.
• Переменная на один баннер. Строка в наборе, которую никто не понимает.

В этом уроке учимся выносить повторяющиеся значения в переменные. На следующих ступенях — называть токены по ролям и собирать темы, а потом держать токены одинаковыми в макете и в коде.

• Подробный разбор переменных Figma Variablesuxrdsgn.ru, Евгений Шевцов, 2025 · на русском · бесплатноРазбор по шагам на русском: коллекции, группы через косую черту, квадратные и круглые образцы, палитра с именами по назначению. Текст 2025 года: типов четыре, а не шесть, режимов на платном тарифе «до 4», панель переменных теперь открывается слева. Логическую переменную автор привязывает к экземпляру, к цветам это не относится.
• Overview of variables, collections, and modesFigma · справка на английском · бесплатноСправка Figma на английском: шесть типов переменных и к каким свойствам привязывается каждый, коллекции и группы, чем стиль отличается от переменной. На схеме палитра-основа названа по цвету (gray/400, watermelon), а слои берут цвет из токенов по назначению. Это тема следующей ступени.
• Create and manage variables and collectionsFigma · справка на английском · бесплатноСправка Figma на английском к заданию: где теперь открывается панель переменных (вкладка Variables слева), как завести коллекцию, переменную и группу, как ограничить свойства, к которым переменную можно привязать. В примерах токены названы по назначению (surface/primary) и по ступени (spacing/2).
• Apply variables to designsFigma · справка на английском · бесплатноСправка Figma на английском: как привязать переменную к заливке, отступу, радиусу, тексту и видимости слоя и как её отвязать. Пригодится к заданию. Там же заметка: если тянуть отступ автораскладки ручками на холсте, привязка слетает. Это та самая «сложность» из урока.
• Почему стили в Figma — прошлый векХабр, Игорь Бутков (Friflex), 2025 · на русском · бесплатноКак называть токены: кнопка button.purple, ставшая розовой, и шкала 100–200–300 против S–M–L. Автор разрешает имена по цвету и числу в «стабильном» проекте, урок так не советует: значение меняется и там. Заголовок про стили устарел, в стили теперь можно подставлять переменные.