Как залить фигуру в фигме

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

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

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

1. Создайте или выделите существующую фигуру с помощью инструментов Rectangle, Ellipse, Polygon или Pen.
2. Перейдите в правую панель свойств (Inspector).
3. Найдите секцию Fill — она обозначена значком квадрата с точкой внутри.
4. Нажмите на значок заливки, чтобы открыть палитру выбора цвета.
5. Выберите нужный цвет: можно использовать предустановленные swatches, выбрать цвет из цветового круга, ввести HEX-, RGB- или HSL-значение вручную.

Если у фигуры несколько заливок, они отображаются как стек. По умолчанию активна первая (верхняя) заливка. Чтобы добавить ещё одну, нажмите кнопку + рядом с блоком Fill.

Цвет можно задать не только через HEX-код, но и через переменные — особенно удобно в командной работе. Если вы используете дизайн-систему, цвета хранятся в библиотеке, и изменения применяются глобально.

Работа с прозрачностью

Непрозрачность (Opacity) влияет на всю заливку. Однако если нужно изменить прозрачность только цвета, а не всей фигуры, используйте альфа-канал в формате HEX (например, #FF573380 — 50% прозрачности).

• В палитре цвета переместите ползунок Alpha или введите значение в процентах.
• Альтернатива: в поле HEX введите 8 символов (последние два — альфа-канал).
• Для группировки объектов с разной прозрачностью используйте фреймы с режимом наложения (Blend Mode).

Продвинутые методы заливки: градиенты и изображения

Кроме сплошных цветов, Figma поддерживает градиентные и изображения в качестве заливки. Это расширяет возможности дизайна: от тонких акцентов до сложных фоновых решений.

Градиентная заливка

Чтобы применить градиент:

1. Выделите фигуру.
2. В разделе Fill нажмите на значок цвета.
3. Выберите тип градиента: Linear (линейный), Radial (радиальный), Angular (угловый) или Diamond (ромбовидный).
4. Настройте направление: потяните линию градиента на холсте или задайте угол в градусах.
5. Добавьте или отредактируйте цветовые стопы: кликните по ползунку под линией градиента.

Вы можете добавить до 100 цветовых стопов, хотя на практике достаточно 2–4. Каждый стоп можно настроить по цвету, положению и прозрачности.

Заливка изображением

Изображение в качестве заливки — отличное решение для фонов, аватаров, карточек товаров.

1. Выделите фигуру.
2. В разделе Fill нажмите значок цвета.
3. Выберите тип заливки Image.
4. Перетащите изображение с компьютера или вставьте ссылку (URL).
5. Настройте масштабирование: Fill, Fit, Stretch, Tile.

• Fill — изображение растягивается, чтобы заполнить фигуру, может обрезаться.
• Fit — всё изображение видно, могут быть поля.
• Stretch — без сохранения пропорций.
• Tile — повторение изображения, как текстура.

Распространённые ошибки и как их исправить

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

Фигура не заливается

Если после выбора цвета фигура остаётся прозрачной:

• Проверьте, не отключена ли заливка: значок глаза рядом с Fill должен быть открыт.
• Убедитесь, что фигура замкнута. Разомкнутый контур (например, от Pen Tool) не может иметь заливку.
• Попробуйте преобразовать путь в фигуру: выделите, нажмите Cmd+J (Mac) или Ctrl+J (Windows).

Градиент не отображается правильно

• Проверьте порядок заливок: градиент может быть скрыт под сплошным цветом. Переместите его выше в стеке.
• Убедитесь, что выбран правильный тип градиента. Например, угловой градиент требует точного расположения центра.
• Иногда градиент «теряется» из-за нулевой длины. Потяните линию градиента на холсте, чтобы задать направление.

Изображение не загружается

• Проверьте формат: Figma поддерживает JPG, PNG, SVG, GIF (без анимации), WEBP.
• Убедитесь, что файл не повреждён. Попробуйте открыть его вне Figma.
• Если используете URL, проверьте доступность изображения (не закрыто ли авторизацией).

Экспертные советы по эффективной работе с заливками

Профессионалы используют заливки не просто для раскрашивания, а как инструмент коммуникации, акцента и структурирования интерфейса.

Используйте переменные цветов

Цветовые переменные (Color Styles) позволяют централизованно управлять палитрой. Создайте переменную для каждого основного цвета бренда.

• Перейдите в Local Styles (иконка квадрата в правом верхнем углу Inspector).
• Нажмите + Color.
• Задайте имя (например, «Primary / Blue») и цвет.
• Применяйте эту переменную ко всем фигурам.

Комбинируйте заливки для сложных эффектов

Несколько заливок позволяют имитировать текстуры, тени, глитч-эффекты.

• Нижняя заливка — основной цвет.
• Средняя — градиент для объёма.
• Верхняя — полупрозрачная текстура (например, noise в режиме Multiply).

Режим наложения (Blend Mode) каждой заливки можно задать отдельно: Multiply, Overlay, Screen и другие.

Автоматизация с помощью плагинов

Плагины расширяют возможности Figma:

• Gradient Map — быстрое применение градиентов к группам.
• Color Palette — экспорт и анализ палитры проекта.
• Auto Layout Background — заливка фона в Auto Layout без дополнительных фигур.

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

Заключение

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

• Заливка настраивается в правой панели через раздел Fill.
• Поддерживаются сплошные цвета, градиенты и изображения.
• Используйте переменные цветов для единообразия и масштабируемости.
• Комбинируйте несколько заливок для сложных визуальных эффектов.
• Регулярно проверяйте стек заливок и режимы наложения.