Как заменить цвет в фигме

В Figma замена цвета — это базовый, но критически важный навык для дизайнеров интерфейсов. Будь то корректировка брендинга, адаптация под темную тему или быстрое прототипирование, умение быстро и точно менять цветовые значения в векторах, тексте, фигурах и компонентах экономит часы работы. К счастью, Figma предлагает множество инструментов: от ручного выбора в палитре до автоматизированной замены через стили и переменные.

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

Сегодня мы детально разберём все способы замены цвета в Figma: от простых действий с одним слоем до продвинутых методов с использованием переменных, стилей и автоматизации. Вы узнаете, когда использовать каждый подход, какие ошибки чаще всего допускают новички, и как избежать хаоса в дизайн-системе.

Базовая замена цвета: как изменить заливку в один клик

Самый простой способ заменить цвет — выделить объект (фигуру, текст, иконку) и изменить его заливку в правой панели свойств. В разделе Fill вы найдёте значок квадрата с точкой внутри. Нажав на него, откройте цветовую палитру. Здесь можно выбрать цвет вручную: через HEX, RGB, HSL, или с помощью цветового круга.

Если у вас уже есть нужный цвет в проекте, вы можете воспользоваться eyedropper-инструментом (пипеткой). Нажмите на значок пипетки рядом с полем цвета или используйте горячую клавишу I, затем кликните по любому элементу на холсте. Цвет скопируется и применится к выделенному объекту.

Для текстовых блоков важно помнить, что цвет задаётся не в Fill, а в секции Text. Однако логика та же: вы можете выбрать цвет вручную или использовать пипетку. Также доступны градиенты и прозрачность (opacity), которые регулируются в том же окне.

1. Выделите объект на холсте.
2. Перейдите в правую панель и найдите раздел Fill.
3. Нажмите на цветовую ячейку.
4. Выберите новый цвет: введите HEX-код, выберите из палитры или используйте пипетку.
5. Закройте палитру — изменения применятся мгновенно.

Когда использовать базовую замену

Этот метод идеален для единичных изменений: например, вы создаете прототип и хотите быстро поменять фон кнопки. Но если цвет используется в десятках мест — ручная замена станет утомительной и чреватой ошибками. Именно поэтому Figma предлагает более мощные инструменты.

Использование цветовых стилей для единообразия

Цветовые стили (Color Styles) — это способ сохранить часто используемые цвета как глобальные переменные. Вместо того чтобы каждый раз вводить #FF5733, вы создаёте стиль с названием «Accent Orange» и применяете его повсеместно.

Чтобы создать цветовой стиль:

• Откройте панель свойств.
• В разделе Fill нажмите на значок квадрата со стрелкой («Create color style»).
• Присвойте стильному имя: например, «Primary / Blue / 500».
• Нажмите «Create style».

После этого этот стиль появится во всех проектах вашей команды (если вы работаете в организации) и будет доступен через выпадающий список в разделе Fill. При этом, если вы позже решите изменить сам цвет — достаточно отредактировать стиль один раз, и все объекты, использующие его, автоматически обновятся.

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

Если вы решили отказаться от старого цвета, перейдите в панель «Design» → «Local styles». Здесь вы увидите все цветовые стили. Кликните правой кнопкой: можно переименовать, удалить или найти, где используется стиль (функция «Find in file»).

Обратите внимание: удаление стиля не удалит цвет с объектов — он просто станет «локальным», то есть потеряет связь с глобальным стилем. Это может привести к рассинхрону, поэтому перед удалением убедитесь, что стиль больше нигде не нужен.

Переменные в Figma: будущее управления цветом

С выходом Variables API в 2023 году Figma совершила прорыв в управлении цветами. Теперь вместо статичных стилей можно создавать динамические переменные, которые поддерживают условия, например: «если тема — dark, то Primary = #FFFFFF, иначе #000000».

Переменные особенно полезны для дизайн-систем, где требуется поддержка нескольких тем, брендов или режимов. Чтобы начать с ними работать:

• Перейдите в панель «Design».
• Нажмите на иконку «+» рядом с Variables.
• Создайте новую переменную типа Color.
• Присвойте ей имя, например, «Color / Primary».
• Установите значение по умолчанию.
• При необходимости добавьте override для других сценариев (например, dark mode).

После этого переменную можно применять к любым элементам через ту же панель Fill — она появится в списке доступных значений.

Пример использования переменных

Представьте, что вы проектируете приложение с поддержкой светлой и тёмной темы. У вас есть кнопка, которая должна быть синей в светлом режиме и белой — в тёмном. Создайте переменную:

• Имя: Color / Button / Primary
• Default: #1976D2 (светлая тема)
• Override (mode: dark): #FFFFFF

Теперь, когда вы переключаете режим в Figma, цвет кнопки меняется автоматически. Это невозможно с обычными стилями.

Find and Replace: массовая замена цветов

Figma предлагает встроенную функцию «Find and Replace», которая позволяет находить и заменять не только текст, но и цвета. Это особенно полезно при ребрендинге или исправлении ошибок.

Чтобы заменить цвет:

• Нажмите Ctrl/Cmd + F.
• Выберите вкладку «Colors».
• В поле «Find» выберите старый цвет (например, через пипетку).
• В поле «Replace with» укажите новый цвет.
• Нажмите «Replace all» или выберите элементы вручную.

Функция ищет все объекты с указанным цветом в заливке, обводке, тени и тексте. Вы можете фильтровать по типу слоя (текст, фигура и т.д.) и странице.

Ограничения Find and Replace

• Не работает с цветовыми стилями или переменными напрямую — заменяет только конкретные значения.
• Не видит цвета внутри компонентов, если они не распакованы.
• Не поддерживает условные замены (например, только в определённых фреймах).

Для таких случаев лучше использовать сторонние плагины, такие как «Batch Styler» или «Recolor».

Цвета в компонентах и инстансах: как всё связано

Компоненты — основа масштабируемого дизайна. Когда вы меняете цвет в мастер-компоненте, все инстансы обновляются. Но есть нюанс: если вы переопределили цвет в инстансе, он перестанет синхронизироваться.

Например, у вас есть кнопка с цветом из стиля «Primary Blue». Если вы вручную поменяете её на красный в одном инстансе — этот инстанс теперь «переопределён». Чтобы вернуть связь, нужно сбросить переопределение: кликнуть на значок крестика рядом с цветом в панели свойств.

Если вы используете переменные, ситуация становится гибче. Вы можете создать вариант компонента (Variant), где цвет задаётся через переменную, и переключать его через dropdown в правой панели. Это позволяет иметь одну кнопку с несколькими цветовыми состояниями без дублирования компонентов.

Распространённые ошибки при замене цветов

• Использование HEX-кодов вместо стилей. Это ведёт к дублированию и потере контроля. Решение: всегда создавайте стили или переменные для повторяющихся цветов.
• Несемантические названия. «Red 1», «Blue New» — такие имена не говорят о назначении цвета. Лучше: «Error / Base», «Brand / Accent».
• Изменение цвета в инстансе без уведомления команды. Это ломает консистентность. Решение: используйте Variants или централизованные переменные.
• Игнорирование контрастности. Новый цвет может не соответствовать требованиям доступности. Проверяйте контраст через встроенный инструмент Figma (раздел «Accessibility» в плагинах).

Как проверить контрастность

Figma не имеет встроенного чекера контрастности, но вы можете установить плагины:

• Contrast Checker — показывает соотношение WCAG.
• Stark — проверяет доступность, включая слепоту к цветам.

После замены цвета обязательно проверяйте, соответствует ли текстовый контент стандартам WCAG 2.1 (минимум AA для обычного текста).

Экспертное мнение

Вопросы и ответы

Заключение

Замена цвета в Figma — это не просто клик по палитре. Это системный процесс, требующий понимания иерархии стилей, компонентов и переменных. От выбора метода зависит, насколько быстро и безопасно вы сможете масштабировать дизайн, адаптировать его под новые требования и избежать ошибок в реализации.

• Для единичных изменений используйте панель Fill и пипетку.
• Для консистентности применяйте цветовые стили или переменные.
• Массовую замену делайте через Find and Replace или обновление стиля.
• Всегда проверяйте влияние изменений на компоненты и доступность.
• Документируйте решения — особенно при работе в команде.