Figma добавила управление прозрачностью через токены: как это упрощает дизайн-системы

3 сентября Figma выпустила обновление Control opacity at scale. Теперь прозрачность можно менять массово в окне Variables: цвет остаётся привязан к библиотеке, а его opacity можно задать отдельной числовой переменной.

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

Что именно появилось

• можно сохранить alias на цвет из библиотеки и отдельно назначить ему прозрачность;
• opacity цветовой переменной можно связать с number variable и ограничить её областью применения для цветовых переменных;
• одно изменение переменной применяется к зависимым состояниям — например, disabled, overlay и scrim.

В документации Figma поясняет, что number variables уже могут управлять opacity у color variables и слоёв. Значения ниже 0 приводятся к 0%, а выше 100 — к 100%.

Почему это важно для продуктовой команды

Обычно нейтральный цвет и его прозрачные версии начинают жить отдельными локальными значениями: один серый для текста, другой — для disabled, третий — для scrim. При смене базового цвета или темы такие копии легко расходятся.

Теперь схему можно выразить явно: color/neutral/900 + opacity/disabled → цвет disabled-состояния. Если библиотека обновляет базовый цвет, связь не разрывается; если меняется правило прозрачности, его можно исправить в одном токене.

Чего обновление не делает

Это не автоматическая гарантия доступности и не синхронизация с production CSS. Полупрозрачный цвет по-разному выглядит на разных фонах, а контраст зависит от итогового слоя, а не от названия токена. После миграции всё равно нужны проверки ключевых экранов и контраста, а в кодовой дизайн-системе — соответствующая связка с CSS-токенами.

Как внедрить без хаоса

1. Собрать повторяющиеся opacity-значения из компонентов: disabled, hover, pressed, overlay, scrim.
2. Выделить семантические токены вроде opacity/disabled и opacity/scrim, а не размножать black-32, black-48 и подобные визуальные копии.
3. Привязать их к цветовым переменным сначала в одной библиотеке или feature-команде.
4. Проверить светлую и тёмную темы, состояния на реальном фоне и соответствие токенам в коде.

Практический вывод: обновление не меняет визуальный язык само по себе, зато убирает один частый источник дрейфа между компонентами. Для команд с большой библиотекой это хороший повод пересмотреть непрозрачные «магические проценты» и превратить их в договорённые правила.

Источники

• Figma Release Notes — Control opacity at scale, 3 сентября 2026
• Figma Help Center — Variables, collections, and modes