Где заливка в фигме

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

Где найти панель заливки в Figma

Панель свойств, где находится заливка, всегда отображается справа в интерфейсе Figma. Если она не видна — проверьте, не скрыта ли она горячей клавишей `Cmd + Option + 4` (Mac) или `Ctrl + Alt + 4` (Windows). Панель активируется автоматически при выборе любого объекта: прямоугольника, эллипса, текстового поля, группы или компонента.

В верхней части панели вы увидите разделы: «Name» (имя), «Constraints», «Position», «Size», затем — «Fill» (Заливка). Именно здесь и происходит управление цветовыми слоями. По умолчанию заливка отключена — вы увидите пустое поле с кнопкой «+». Это не ошибка, а стандартное поведение: Figma не накладывает цвет автоматически, чтобы не мешать дизайнеру в выборе.

Представьте, что вы создаёте кнопку. Без заливки она будет прозрачной — как будто её вообще нет. Только после добавления заливки объект обретает визуальную форму. Именно поэтому первым шагом в дизайне интерфейса всегда становится настройка заливки, а не обводки или теней.

Как добавить заливку: пошаговая инструкция

Добавить заливку можно всего за три действия. Вот точный алгоритм:

1. Выберите объект — кликните по фигуре, тексту, группе или компоненту на холсте. Убедитесь, что он выделен синей рамкой.
2. Найдите раздел «Fill» в правой панели свойств. Он расположен под «Size» и выше «Stroke».
3. Нажмите «+» рядом с надписью «Fill». Появится цветовой пикер, список недавних цветов и опции для градиента или изображения.

После этого вы можете:
— Выбрать цвет из палитры (включая цвета из вашей дизайн-системы);
— Ввести HEX-код вручную;
— Использовать eyedropper (пипетку), кликнув по любому элементу на холсте;
— Применить градиент — линейный или радиальный;
— Загрузить текстуру в виде изображения.

Если вы хотите добавить несколько слоёв заливки — например, основной цвет и полупрозрачный акцент — просто нажмите «+» ещё раз. Figma позволяет накладывать до 10 разных заливок на один объект. Это особенно полезно при создании сложных эффектов, таких как имитация металла, стекла или свечения.

Типы заливки: цвет, градиент, изображение

Figma поддерживает четыре типа заливки — каждый из них решает разные задачи.

• Цвет (Solid) — самый простой и часто используемый. Подходит для фонов, кнопок, иконок. Можно сохранить цвет в библиотеке стилей для единого использования.
• Линейный градиент (Linear Gradient) — идеален для современных кнопок, баннеров, заголовков. Направление задаётся углом — от 0° (слева направо) до 360°. Можно добавить до 10 цветовых остановок.
• Радиальный градиент (Radial Gradient) — создаёт эффект свечения или объёма. Часто используется для иконок, аватаров, элементов с эффектом «вспышки».
• Изображение (Image) — позволяет наложить текстуру: дерево, бетон, ткань, шум. Особенно полезно для фона в макетах реальных продуктов.

Для градиентов и изображений доступны дополнительные настройки: прозрачность, режим наложения (Blend Mode), масштаб и позиционирование. Например, при использовании изображения как заливки можно выбрать «Fill» (растянуть), «Fit» (поместить по размеру) или «Tile» (повторить).

Заливка vs Обводка: в чём разница

Многие начинающие дизайнеры путают заливку и обводку. Это фундаментальная ошибка, которая приводит к неверной визуализации интерфейсов.

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

Частые ошибки при применении заливки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки. Вот пять самых распространённых:

• Заливка не применяется к тексту — если вы выбрали текстовый блок, заливка работает только как цвет фона текста (через «Fill»), а не как цвет букв. Для цвета букв используйте «Text Color» в разделе «Text».
• Заливка исчезает после копирования — это происходит, если объект был скопирован из компонента с переопределенными стилями. Всегда проверяйте, не находится ли объект в режиме «Instance».
• Не виден эффект градиента — если градиент выглядит как однотонный цвет, проверьте направление и позицию остановок. Часто остановки находятся слишком близко или угол выставлен на 0°.
• Заливка не сохраняется в стиле — если вы хотите создать стиль заливки, нажмите «Create Style» только после того, как все параметры (цвет, тип, прозрачность) установлены. Если вы забыли что-то — стиль будет неполным.
• Заливка перекрывает обводку — если обводка кажется «внутри» фигуры, а не снаружи — это значит, что вы установили «Stroke Position» в «Center» или «Inside». Для стандартных кнопок используйте «Outside».

Заливка в компонентах и стилях

Компоненты — это основа масштабируемого дизайна в Figma. Когда вы создаете компонент (например, кнопку), заливка становится частью его основного стиля. Но здесь возникает важный нюанс: если вы делаете экземпляр (instance) компонента, вы можете переопределить заливку — например, сделать «Оформить» зелёной, а «Отменить» серой.

Чтобы сделать заливку переопределяемой:
1. Создайте компонент с заливкой.
2. Перейдите в экземпляр.
3. В панели свойств найдите раздел «Fill».
4. Нажмите на значок «Override» (переопределение) — появится пикер.
5. Выберите новый цвет.

Таким образом, вы создаёте единый шаблон, но с гибкостью для разных состояний: активный, неактивный, загрузка, ошибка. Это экономит часы работы и гарантирует согласованность.

Продвинутые советы: заливка с масками, прозрачностью и переменными

Для профессионалов заливка — это не просто цвет. Это инструмент для создания сложных визуальных эффектов.

• Заливка с маской — вы можете наложить изображение как заливку на фигуру, а затем использовать эту фигуру как маску. Например, круг с заливкой-фото станет аватаром. Для этого: выделите фото и фигуру → правый клик → «Use as Mask».
• Прозрачность и режимы наложения — изменяя прозрачность заливки до 30–50%, вы создаёте эффекты полупрозрачности без сложных слоёв. Режимы наложения (Overlay, Multiply, Screen) позволяют добиться реалистичных теней и световых эффектов.
• Цветовые переменные — в Figma 2024+ цветовые переменные (Color Variables) стали стандартом. Вы создаёте переменную `primary-fill`, привязываете её к заливке, и при смене темы (светлая/тёмная) весь интерфейс автоматически переключается.

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

Экспертное мнение: как дизайнеры используют заливку для повышения эффективности

Он добавляет: «Самый мощный приём — использовать заливку не только как цвет, а как индикатор состояния. Заливка с анимацией (в Figma через Auto-Animate) может показывать, что элемент активен, загружается или требует внимания. Это делает интерфейс не просто красивым, а живым.»

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

Заключение

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

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

• Заливка находится в правой панели свойств — раздел «Fill».
• Используйте цветовые переменные, а не фиксированные HEX-коды.
• Заливка ≠ цвет текста — для текста используйте «Text Color».
• В компонентах заливку можно переопределять, но не редактировать в экземплярах.
• Градиенты и маски превращают заливку из простого цвета в мощный визуальный инструмент.