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

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

Основные методы изменения цвета

Изменение цвета в Figma начинается с выбора объекта: фигуры, текста, компонента или группы. После выделения в правой панели «Design» появляются параметры стилизации. Основные параметры, связанные с цветом, — это заливка (Fill), обводка (Stroke), тени (Effects) и размытие. Каждый из них может иметь собственный цвет.

Для заливки достаточно кликнуть по иконке квадрата с точкой внутри. Откроется палитра, где можно выбрать цвет из предложенных, использовать цветовой круг, ввести HEX, RGB, HSL или альфа-значение прозрачности. Аналогично работает обводка — выбираете толщину, тип (сплошная, пунктир) и цвет.

Текстовые элементы также управляются через ту же панель. Выделяете текст, переходите в раздел «Text», находите параметр «Color» и меняете значение. Здесь особенно важно соблюдать контрастность — Figma показывает уровень контраста в реальном времени, что полезно для доступности.

Пошаговое изменение цвета заливки

1. Выберите нужный объект (прямоугольник, круг, текст и т.д.).
2. В правой панели найдите раздел «Fill» (иконка квадрата).
3. Кликните по цветовому квадрату, чтобы открыть палитру.
4. Выберите цвет: щелчком по образцу, через цветовой круг, введите HEX-код.
5. Настройте прозрачность (Opacity), если нужно.

Figma поддерживает несколько форматов цвета: HEX (#FF5733), RGB (rgb(255, 87, 51)), HSL (hsl(9, 100%, 60%)) и RGBA с альфа-каналом. При вводе кода вручную система автоматически конвертирует его в текущий формат проекта, если задано глобальное правило.

Работа со стилями заливки и обводки

Если вы проектируете систему дизайна или работаете в команде, простое изменение цвета вручную — неэффективно. Лучше создавать стили заливки (Paint Styles). Это позволяет стандартизировать цвета и быстро применять их через единый источник правды.

Чтобы создать стиль заливки:

• Примените нужный цвет к объекту.
• В правой панели рядом с цветом нажмите на значок «+».
• Введите имя стиля, например, «Primary / Blue / 500».
• Стиль сохранится в библиотеке и будет доступен во всех файлах, где подключена библиотека.

Применить существующий стиль можно через выпадающий список в разделе Fill. Также стили можно переносить между файлами с помощью библиотек компонентов.

Преимущества использования стилей

• Единые цвета по всему проекту.
• Быстрое обновление: меняете один стиль — обновляются все объекты, где он используется.
• Упрощённая передача макетов разработчикам: они видят именованные стили, а не HEX-коды.
• Поддержка тем (светлая/тёмная) при использовании переменных.

Цветовые переменные в Figma

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

Переменная цвета создаётся в специальной вкладке «Variables» в левом сайдбаре. Выбираете тип «Color», задаёте имя (например, «Background / Primary») и значение. Затем эту переменную можно привязать к любому параметру: заливке, обводке, тени.

Когда вы связываете объект с переменной, он становится зависимым от неё. Если вы измените значение переменной в одном месте, все связанные элементы обновятся автоматически. Это особенно полезно при A/B-тестировании или переключении тем.

Как создать цветовую переменную

1. Откройте вкладку «Variables» в левом меню.
2. Нажмите «+ New variable set» или добавьте переменную в существующий набор.
3. Выберите тип «Color».
4. Присвойте имя и выберите цвет.
5. Примените переменную к объекту через панель свойств (вместо фиксированного цвета).

Создание и использование палитр

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

Чтобы создать палитру в Figma:

• Создайте артборд с названием «Color Palette».
• Добавьте прямоугольники, каждый — с одним цветом.
• Подпишите каждый цвет: название, HEX-код, назначение (например, «Error Red», #EF4444).
• Свяжите каждый цвет со стилем заливки или переменной.

Палитру можно сделать интерактивной: добавить компоненты с состояниями (default, hover, disabled), чтобы показывать, как цвета работают вместе.

Рекомендации по построению палитры

• Начните с 1–2 основных цветов, затем расширьте до 5–7 оттенков.
• Добавьте серую шкалу (от белого до чёрного) минимум из 9 ступеней.
• Учитывайте WCAG 2.1: контраст текста и фона должен быть не менее 4.5:1.
• Тестируйте палитру в разных условиях: при дневном свете, на смартфоне, в тёмной комнате.

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

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

Одна из главных ошибок — создание нескольких цветов с одинаковым HEX-кодом, но разными именами. Например, «Blue», «Main Blue» и «Primary Blue» с кодом #3B82F6. Это ломает целостность системы и усложняет поддержку.

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

Чек-лист перед запуском проекта

• Все цвета объявлены как стили или переменные?
• Проверена контрастность текста и фона?
• Есть документация по использованию цветов?
• Палитра доступна в библиотеке компонентов?
• Темы (светлая/тёмная) протестированы?

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

Представьте, что вы работаете над крупным банковским приложением. У вас 50 экранов, 3 темы и команда из 12 дизайнеров. Если каждый будет менять цвета по своему усмотрению, хаос неизбежен. Именно поэтому мы внедрили переменные цветов с первого дня проекта, — рассказывает Игорь Власов, ведущий UX-архитектор.

— Мы начали с создания семантических переменных: «bg-primary», «text-on-primary», «icon-disabled». Это позволило отделить смысл от визуала. Теперь, когда маркетологи просят сменить фирменный цвет с синего на зелёный, мы меняем одну переменную — и всё приложение обновляется за минуту.

Также важно тестировать цвета на пользователях. Мы провели исследование: 30% участников не видели кнопку «Оплатить», потому что она была слишком бледной. После повышения контраста конверсия выросла на 17%. Figma помогла быстро внести правки и протестировать новый вариант.

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

Заключение

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

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