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

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

Как изменить цвет фона у отдельного элемента

Чтобы изменить цвет фона любого объекта — прямоугольника, кнопки, карточки или даже текстового блока — необходимо выбрать его на холсте. После выбора откройте панель свойств справа. В разделе «Fill» вы увидите цветовой кружок. По умолчанию он может быть прозрачным (белый с серой рамкой) или содержать текущий цвет заливки.

Нажмите на этот кружок — откроется цветовой селектор. Здесь вы можете:
— Выбрать цвет из предустановленной палитры;
— Ввести HEX-код вручную (например, #2563EB);
— Использовать RGB, HSL или CMYK-значения;
— Применить цвет из палитры проекта (если он настроен);
— Кликнуть по любой точке на холсте, чтобы захватить цвет с помощью пипетки.

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

Как изменить цвет фона холста (артиборда)

Фон холста — это фон всего артиборда, а не отдельного элемента. Он виден, когда вы удаляете все слои или когда ваш дизайн не занимает весь холст. Чтобы изменить его, перейдите в меню слева: выберите артиборд в дереве объектов, затем в панели свойств найдите раздел «Background Color» (цвет фона). Он находится под параметрами размера и сетки.

Кликните на цветовой кружок — и вы попадёте в тот же селектор, что и при редактировании Fill. Здесь вы можете задать любой цвет, включая прозрачный (если нужно, чтобы фон совпадал с фоном страницы браузера или приложения).

Разница между Fill и Background в Figma

Многие пользователи путают термины «Fill» и «Background». Это распространённая ошибка, которая приводит к неправильному пониманию структуры дизайна.

Fill

Это свойство любого объекта — прямоугольника, текста, группы. Fill — это заливка, которая может быть применена к любому слою. Вы можете иметь несколько Fill у одного объекта (например, градиент + текстура).

Background (артиборда)

Это глобальное свойство холста. Оно не является слоем и не экспортируется как отдельный элемент. Используется исключительно для визуального контекста в редакторе.

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

Работа с цветовыми системами и темами

Для профессиональных проектов важно использовать цветовые системы, а не случайные HEX-коды. Figma позволяет создавать цветовые переменные (Color Variables), которые можно применять ко всем элементам проекта.

Чтобы настроить цвет фона через систему:
1. Перейдите в таб «Design» → «Variables».
2. Создайте новую переменную типа «Color».
3. Назовите её, например, «Background/Primary».
4. Присвойте ей значение — например, #F9FAFB.
5. Теперь выберите артиборд или элемент, нажмите на цветовой кружок → «Variables» → выберите свою переменную.

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

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

Ошибки при изменении фона в Figma — одни из самых распространённых, особенно среди начинающих.

• Ошибка 1: Вы пытаетесь изменить фон артиборда, но не видите параметр «Background Color». Решение: Убедитесь, что выбран именно артиборд, а не группа или фрейм. В дереве объектов кликните по названию артиборда (например, «Home Screen»).
• Ошибка 2: Фон не меняется, потому что объект перекрыт другим слоем. Решение: Проверьте порядок слоёв — фон должен быть на самом нижнем уровне. Используйте Ctrl+[ (Cmd+[ на Mac), чтобы переместить слой вниз.
• Ошибка 3: Вы изменили цвет фона, но он не отображается при экспорте. Решение: Фон артиборда не экспортируется. Добавьте прямоугольник с нужным цветом, растяните его на весь артиборд и закрепите его как «Background» слой.
• Ошибка 4: Вы используете прозрачный фон, но не знаете, как его увидеть. Решение: Включите «Checkerboard» (шахматная доска) в настройках холста (в правом верхнем углу Figma — значок глаза → «Show checkerboard»).

Продвинутые советы: фон для всей страницы и компоненты

Если вы работаете над многопрофильным проектом (например, веб-сайтом с несколькими страницами), вы можете создать шаблон фона, который будет повторяться.

Создайте компонент:
1. Нарисуйте прямоугольник, заполните его нужным цветом.
2. Выделите его → нажмите «Create Component» (Ctrl+Alt+K).
3. Назовите его «Global Background».
4. Теперь вставляйте этот компонент на каждый артиборд.

Вы можете создать варианты компонента: «Light», «Dark», «Gradient». Это особенно полезно при работе с тёмной и светлой темами.

Также используйте «Auto Layout» внутри компонента, чтобы фон автоматически подстраивался под размер артиборда. Для этого включите Auto Layout и установите «Fill container» в свойствах компонента.

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

• Можно ли сделать фон артиборда градиентом?
  Нет, в Figma фон артиборда поддерживает только сплошной цвет. Для градиентного фона используйте прямоугольник с градиентной заливкой, растянутый на весь артиборд.
• Почему при экспорте в PNG фон исчезает?
  Потому что вы экспортируете только видимые слои. Если фон — это цвет артиборда, он не экспортируется. Добавьте прямоугольник с цветом на нижний уровень, чтобы он попал в экспортируемый результат.
• Как быстро скопировать цвет фона с одного артиборда на другой?
  Выберите артиборд с нужным фоном → нажмите Ctrl+C (копировать). Перейдите на другой артиборд → нажмите Ctrl+V (вставить). Figma автоматически применит цвет фона. Или используйте пипетку (I) для захвата цвета.
• Можно ли задать фон для всей страницы, а не только артиборда?
  В Figma нет понятия «страницы» как единого фона. Каждая страница содержит артиборды, и каждый артиборд имеет свой фон. Но вы можете использовать компоненты и переменные, чтобы синхронизировать их.

Заключение

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

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

• Фон элемента — это Fill, фон холста — отдельная настройка артиборда.
• Фон артиборда не экспортируется — добавляйте прямоугольник, если нужен цвет в PNG/PDF.
• Цветовые переменные экономят время и обеспечивают согласованность.
• Компоненты фона — идеальное решение для многопрофильных проектов.
• Всегда проверяйте цвет фона в контексте темы (светлая/тёмная) и доступности.