Фон в Figma¶
Фон в Figma — это базовый слой холста (артборда), определяющий цвет или изображение, на котором размещается содержимое макета. В редакторе фон задаётся на уровне документа, отдельного фрейма или отдельного объекта, и служит визуальной основой для интерфейсных макетов, презентаций и прототипов.
¶Уровни задания фона
В Figma фон может быть задан на трёх уровнях:
- Документ (страница) — общий фон всего файла, видимый за пределами фреймов.
- Фрейм (Frame) — фон конкретного артборда, например мобильного экрана или веб-страницы.
- Объект — заливка фигуры, текста, компонента или группы.
¶Фон документа и страницы
По умолчанию фон холста в Figma имеет светло-серый цвет (RGB 242, 242, 242). Изменить его можно в панели справа, в разделе «Page» (Страница), где отображается свойство «Background» (Фон). Доступные варианты:
- сплошной цвет;
- градиент (линейный, радиальный, угловой, диагональный);
- изображение (растровая заливка).
Фон страницы применяется ко всем фреймам документа, но не перекрывает собственные фоны фреймов.
¶Фон фрейма
Фреймы в Figma — основные контейнеры макетов. У каждого фрейма есть свойство «Fill» (Заливка), которое и определяет его фон. По умолчанию новый фрейм создаётся с белой заливкой. Чтобы изменить фон фрейма:
- Выбрать фрейм на холсте или в панели слоёв.
- В панели свойств справа найти раздел «Fill».
- Нажать на образец цвета и выбрать нужный оттенок, градиент или изображение.
Дополнительно к заливке фрейм может иметь обводку (Stroke), тень (Effect: Drop Shadow) и режим наложения (Blend Mode), что влияет на восприятие фона.
¶Типы заливок фона
| Тип заливки | Описание |
|---|---|
| Solid | Сплошной цвет из палитры или по HEX/RGB/HSB-коду |
| Linear gradient | Линейный градиент с настраиваемыми точками |
| Radial gradient | Радиальный градиент от центра к краям |
| Angular gradient | Угловой (конический) градиент |
| Image | Растровое изображение как заливка |
| Video | Видеозаливка (в тарифах с поддержкой видео) |
¶Параметры изображения в качестве фона
При использовании изображения в качестве заливки Figma предоставляет несколько режимов масштабирования:
- Fill — изображение заполняет фрейм с сохранением пропорций, лишние части обрезаются.
- Fit — изображение вписывается целиком, могут появиться пустые поля.
- Crop — ручная обрезка области изображения.
- Tile — изображение повторяется паттерном.
Дополнительно настраиваются прозрачность (Opacity), режим наложения и смещение (Transform).
¶Прозрачность и режимы наложения
Свойство Opacity позволяет сделать фон полупрозрачным — например, для модальных окон и оверлеев. Режимы наложения (Multiply, Screen, Overlay и др.) определяют, как фон взаимодействует с нижними слоями. Эти параметры доступны и для документа, и для фреймов, и для отдельных объектов.
¶Практическое применение
- Веб-дизайн — фон секций лендинга, часто с градиентами или фоновыми изображениями.
- Мобильные интерфейсы — белый или тёмный фон экранов, режим Dark Mode.
- Презентации — фреймы-слайды с фирменными фонами.
- Прототипирование — полупрозрачные фоны оверлеев и модальных окон.
¶Связь с библиотеками и дизайн-системами
В командной работе фоновые стили часто выносятся в библиотеки Figma. Цвета фона сохраняются как Color Styles и переиспользуются во всех макетах проекта, что обеспечивает единообразие интерфейса. Изменение стиля в библиотеке автоматически обновляет все связанные объекты.
¶История и особенности
Figma — облачный векторный редактор интерфейсов, запущенный в 2016 году. Возможность задавать фон на уровне документа появилась в ранних версиях, а градиентные и изображения-заливки развивались вместе с расширением функционала редактора. Режимы масштабирования изображений (Fill, Fit, Crop, Tile) были добавлены позже и стали стандартом для работы с фоновыми изображениями.