Как поменять цвет в фигме

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

Основные инструменты для работы с цветом

Figma предлагает несколько способов задания и изменения цвета. Все они доступны через панель свойств (Inspector Panel) справа от рабочего холста. Основные параметры — заливка (Fill), обводка (Stroke), тени (Effects) и прозрачность (Opacity). Каждый из них может содержать один или несколько цветов.

Цвет можно задать несколькими способами: через цветовой круг, палитру HEX/RGB/HSL, выбор из сохранённых цветов или загрузку из внешних источников. Интерфейс позволяет одновременно работать с несколькими типами заливки — сплошной, градиентной, изображением. Это особенно полезно при создании сложных макетов.

Для быстрого доступа Figma поддерживает горячие клавиши. Например, G объединяет выделенные объекты в группу, а I активирует инструмент заливки. Эти комбинации экономят время при частой смене цветов.

Типы заливки

• Сплошная заливка (Solid) — самый распространённый тип. Подходит для фона, кнопок, текста.
• Градиент (Gradient) — линейный, радиальный, угловой или дифракционный. Позволяет создавать современные эффекты.
• Изображение (Image) — текстуры, фото или паттерны как фон.
• Video / GIF — экспериментальная функция, доступна в некоторых версиях.

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

Как изменить цвет объекта: пошагово

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

1. Выделите нужный объект с помощью инструмента Selection (V).
2. Найдите блок Fill в правой панели. Если заливка отключена, нажмите значок квадрата рядом с надписью Fill.
3. Кликните по цветовому квадрату, чтобы открыть палитру.
4. Выберите цвет: вручную (через HEX, RGB), с помощью цветового круга или из библиотеки сохранённых цветов.
5. При необходимости настройте прозрачность с помощью ползунка Opacity.

Если объект имеет несколько слоёв заливки, добавьте их через кнопку + рядом с Fill. Это полезно, например, для создания текстур поверх основного цвета.

Изменение цвета обводки

Обводка (Stroke) настраивается аналогично заливке. Разница в том, что она может быть внутренней, центральной или внешней. Тип расположения выбирается в выпадающем меню рядом с параметром Stroke.

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

• Убедитесь, что включён параметр Stroke.
• Кликните по цветовому квадрату и выберите нужный оттенок.
• Настройте толщину линии в поле Width.

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

Работа с цветами в Figma через стили и переменные

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

Стили позволяют сохранить цвет как шаблон. После этого его можно применять к любым объектам. При изменении стиля все связанные элементы обновляются автоматически. Это идеально подходит для брендовых цветов.

Переменные — более продвинутая система, представленная в Figma с 2023 года. Они поддерживают не только цвета, но и числовые значения, размеры текста, булевы условия. Переменные можно группировать, создавать темы (например, светлая/тёмная) и переключать их одним кликом.

Создание цветового стиля

1. Откройте панель Design в правой части интерфейса.
2. Перейдите в раздел Local Styles (или Document Styles).
3. Нажмите + рядом с Fill, Stroke или Effect.
4. Задайте имя стиля (например, «Primary / Blue») и выберите цвет.
5. Нажмите Save.

Теперь этот стиль будет доступен во всех объектах через выпадающий список Fill.

Создание переменной цвета

1. Перейдите на вкладку Design → Variables.
2. Нажмите Create Variable.
3. Выберите тип — Color.
4. Назовите переменную (например, «color-primary»).
5. Установите значение цвета.
6. Создайте набор (Mode), например, «Light» и «Dark».
7. Назначьте разные цвета для каждого режима.

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

Создание и редактирование глобальных цветовых сеток

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

Для создания сетки рекомендуется:

• Определить брендовые цвета (1–3 основных).
• Добавить 4–6 оттенков серого для текста и границ.
• Создать семейство цветов с вариациями (light, default, dark).
• Выделить функциональные цвета: error (#EF4444), success (#22C55E), warning (#F59E0B).

В Figma такую сетку удобно организовать через компоненты или фреймы с аннотациями. Каждый цвет должен иметь понятное имя и соответствующий HEX-код.

Интеграция с внешними инструментами

Для автоматизации можно использовать плагины:

• Colors — анализирует изображения и извлекает палитру.
• Stark — проверяет контрастность по стандартам WCAG.
• Token Studio — синхронизирует дизайн-токены с кодом.

Эти инструменты экономят часы ручной работы и повышают точность.

Ошибки и как их избежать

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

Ошибка 1: Изменение цвета без использования стилей

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

Ошибка 2: Несогласованная палитра

Использование случайных оттенков разрушает целостность дизайна. Всегда работайте с утверждённой цветовой сеткой.

Ошибка 3: Игнорирование контрастности

Недостаточный контраст между текстом и фоном делает интерфейс недоступным. Особенно критично для пользователей с нарушением зрения.

Экспорт и совместимость цветов

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

Для разработчиков Figma генерирует код в формате CSS, Swift, Android XML. Цвета выводятся в HEX или RGBA. При использовании переменных — как CSS-переменные (например, var(--color-primary)).

Чтобы избежать искажений:

• Убедитесь, что все участники команды используют калиброванные мониторы.
• Указывайте в документации точные HEX-значения.
• Тестируйте макеты на реальных устройствах.

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

По её словам, главное — начать с малого: создайте три переменные (primary, secondary, background) и протестируйте их в одном экране. Постепенно расширяйте систему.

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

Заключение

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

• Всегда начинайте с создания цветовой сетки.
• Используйте стили и переменные вместо ручного ввода цветов.
• Проверяйте контрастность для доступности.
• Синхронизируйте цвета между файлами через библиотеки.
• Тестируйте цвета на разных устройствах перед финальной сдачей.