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

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

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

Основные типы заливок: Fill, Stroke и Background

В Figma цвет можно применять не только к основной области объекта, но и к его контуру, теням, фону и другим визуальным слоям. Понимание различий между типами заливок помогает точно контролировать внешний вид элементов.
Fill (заливка) — это основной цвет внутренней области объекта. Он доступен для всех фигур, текстов, компонентов и фреймов. При изменении Fill вы меняете цвет самого объекта. Если у элемента несколько слоёв заливки, Figma позволяет добавлять дополнительные Fill’ы, что полезно для создания многослойных эффектов, например, текстурированных кнопок или градиентных наложений.
Stroke (обводка) — цвет контура объекта. Работает с векторными фигурами, текстом и фреймами. Толщина обводки задаётся отдельно, а её положение можно регулировать: внутри, по центру или снаружи контура. Важно помнить, что если обводка слишком тонкая, она может теряться на экране, особенно при масштабировании.
Background — это не отдельный параметр, а результат применения Fill к фрейму. Фреймы в Figma могут иметь заливку, которая визуально работает как фон. Это особенно актуально при создании карточек, модальных окон или блоков контента. При наложении нескольких объектов важно следить за порядком слоёв, чтобы фон не перекрывал содержимое.

Типы заливок можно комбинировать. Например, кнопка может иметь сплошной Fill, двойную Stroke (внутренняя и внешняя) и тень. Такие комбинации позволяют создавать сложные визуальные эффекты без выхода из Figma.

Когда использовать каждый тип заливки

• Fill — для основного цвета объекта: кнопки, фона, иконки, текста.
• Stroke — для границ, рамок, акцентов, разделителей.
• Множественные Fill’ы — для наложения текстур, градиентов поверх основного цвета.
• Прозрачность (Opacity) — когда нужно сделать объект полупрозрачным, не меняя сам цвет.

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

Самый прямой способ — использовать правую панель свойств (Design panel). После выделения объекта здесь появляются все доступные параметры, включая заливку.
Шаг 1: Выделите объект на холсте с помощью инструмента Selection (V) или щелчком по нему.
Шаг 2: Перейдите в правую панель и найдите раздел «Fill». Он представлен квадратом с текущим цветом.
Шаг 3: Кликните по квадрату — откроется палитра выбора цвета.
Шаг 4: Выберите цвет: кликните по предустановленной палитре, переместите маркер в цветовом круге, введите HEX-, RGB- или HSL-код.
Шаг 5: Нажмите вне палитры, чтобы применить изменения.
Если у объекта несколько слоёв заливки, вы можете добавить новый Fill, нажав значок «+» рядом с разделом Fill. Это открывает возможность наложить, например, полупрозрачный чёрный слой поверх изображения.
Для обводки аналогичные действия выполняются в разделе «Stroke». Не забудьте активировать Stroke, если он отключён (иконка в виде квадрата с контуром). Также можно задать тип линии: сплошная, пунктирная, штрихпунктирная.

Цветовые форматы в Figma

Figma поддерживает несколько форматов ввода цвета:

• HEX — шестнадцатеричный код (например, #FF5733); наиболее распространён в вебе.
• RGB — сочетание красного, зелёного и синего; удобно при работе с CSS.
• HSL — оттенок, насыщенность, светлота; полезно для точной настройки оттенков.
• Opacity — прозрачность от 0% до 100%, работает независимо от цвета.

Вы можете переключаться между форматами прямо в палитре. Например, введя HEX-код, Figma автоматически преобразует его в RGB и HSL.

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

В больших проектах использование случайных цветов приводит к хаосу. Поэтому Figma предлагает систему переменных (Variables), позволяющую централизованно управлять цветами.
Цветовые переменные — это именованные значения, которые можно применять ко всем объектам. При изменении переменной цвет обновляется во всём документе. Это особенно важно при работе с дизайн-системами.
Чтобы создать переменную:

1. Откройте панель «Design» → вкладка «Local Variables».
2. Нажмите «+» рядом с «Colors».
3. Выберите тип — Color.
4. Задайте имя (например, «Primary / Blue») и значение цвета.
5. Сохраните.

Теперь эту переменную можно использовать в любом Fill или Stroke. Вместо выбора цвета из палитры — выберите его из списка переменных.

Если вы работаете в команде, переменные можно опубликовать в библиотеке, чтобы другие дизайнеры могли их использовать. Это обеспечивает единообразие цветов во всех файлах.

Инструменты для быстрого выбора цвета: Eyedropper и Color History

Figma включает два мощных инструмента для захвата цвета: пипетку (Eyedropper) и историю цветов (Color History).
Пипетка позволяет взять цвет с любого элемента на холсте, включая импортированные изображения, текст и даже внешние вкладки (если включена соответствующая настройка). Чтобы использовать её:

• Откройте палитру выбора цвета.
• Нажмите значок пипетки (или используйте горячую клавишу I).
• Кликните по нужному месту на холсте.
• Цвет будет автоматически применён.

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

Создание и использование сохранённых цветовых стилей

Помимо переменных, Figma поддерживает «сохранённые стили» (Style), которые можно применять к заливкам, обводкам и теням. Они существовали до появления Variables и до сих пор используются в старых проектах.
Чтобы создать стиль:

1. Примените нужный цвет к объекту.
2. В разделе Fill нажмите три точки рядом с цветом.
3. Выберите «Create color style».
4. Введите имя стиля и сохраните.

Теперь этот стиль можно применять к другим объектам: достаточно выбрать Fill и найти его в списке стилей.
Разница между стилями и переменными:

• Стили — статичны, не поддерживают условия (например, тема день/ночь).
• Переменные — динамичны, работают с режимами, поддерживают вложенность и логику.

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

Цвет в командной работе: библиотеки и дизайн-системы

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

• Откройте Settings → Libraries.
• Найдите нужный файл и включите галочку.
• Цветовые переменные станут доступны во всех разделах заливки.

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

Частые ошибки и как их избежать

• Использование разных оттенков одного цвета — например, #007BFF и #0077CC вместо единого «Primary Blue». Решение: используйте переменные.
• Забытый Stroke — дизайнер меняет Fill, но не замечает, что обводка остаётся прежней. Решение: всегда проверяйте наличие активных Stroke.
• Отсутствие контраста — цвет текста плохо читается на фоне. Решение: используйте плагины вроде Stark для проверки доступности.
• Ручное копирование HEX-кодов — медленно и подвержено ошибкам. Решение: используйте пипетку или переменные.

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

Профессиональные команды сегодня переходят на Variables не ради моды, а ради масштабируемости. Цвет становится частью логики дизайна: он может меняться в зависимости от темы, устройства или состояния компонента. Например, кнопка может использовать переменную «Button / Background», которая в светлой теме — синяя, а в тёмной — бирюзовая.
Также важно тестировать цвета на реальных устройствах. То, что хорошо смотрится на Retina-экране, может быть нечитаемым на бюджетном смартфоне.

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

Заключение

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

• Всегда выделяйте объект перед изменением цвета.
• Используйте переменные вместо ручного ввода HEX-кодов.
• Контролируйте наличие активных Stroke и множественных Fill’ов.
• Подключайте библиотеки для командной согласованности.
• Тестируйте цвета на контраст и читаемость.