Как сделать белый фон в фигме

Сделать белый фон в Figma проще простого: достаточно выбрать нужный слой, фигуру или фрейм и установить цвет заливки на белый (#FFFFFF) через панель свойств справа. Главное — убедиться, что нет полупрозрачных слоёв сверху и отключена опция просмотра подложки.

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

Как задать белый фон объекту в Figma

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

Нажмите на значок заливки, выберите цвет и введите код #FFFFFF в поле HEX. Это стандартный чисто белый цвет. Также можно использовать RGB(255, 255, 255) или HSL(0, 0%, 100%). После этого объект будет иметь сплошную белую заливку.

Если вы работаете с текстом, иконками или другими элементами внутри фрейма, убедитесь, что сам фрейм тоже имеет белую заливку, если это необходимо. Иногда дизайнеры забывают задать фон контейнеру, ожидая, что внутренние элементы будут «плавать» на белом, но по факту холст остаётся серым.

Для повторного использования создайте цветовой стиль:

1. Выделите объект с белой заливкой.
2. В разделе «Fill» нажмите на значок «+» рядом с цветом.
3. Назовите стиль, например, «White» или «Background / White».
4. Теперь этот цвет можно применять к другим объектам через выпадающий список стилей.

Шаги для быстрого применения белого фона

• Выделите объект (фрейм, фигуру, группу).
• В правой панели перейдите в «Design» → «Fill».
• Удалите текущую заливку (если есть) и добавьте новую.
• Выберите цвет и введите #FFFFFF.
• При необходимости сохраните как цветовой стиль.

Как сделать белый фон холста в Figma

Многие путают фон объекта и фон холста (canvas). По умолчанию холст в Figma имеет светло-серый градиент, имитирующий бумагу. Это сделано, чтобы легче было видеть границы объектов. Но если вы хотите, чтобы весь макет отображался на белом фоне, нужно изменить внешний вид холста.

К сожалению, в Figma нельзя изменить цвет самого холста глобально — он всегда остаётся серым. Однако есть два рабочих решения:

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

Второе — использовать плагины, например, «Canvas Background» или «Solid Canvas», которые позволяют временно менять цвет холста в режиме просмотра. Это не влияет на экспорт, но помогает при работе.

Как создать фоновый белый слой

1. Создайте новый фрейм (F) размером с артборд или больше.
2. Задайте ему заливку #FFFFFF.
3. Отправьте на задний план (Ctrl/Cmd + [ ).
4. Заблокируйте слой (через правую панель или клик по замку в слоях).
5. Пометьте как “Background” или “BG” для ясности.

Такой подход особенно полезен при презентации макетов клиентам или при экспорте скриншотов.

Распространённые ошибки и почему белый фон кажется серым

Одна из самых частых жалоб: «Я поставил белый фон, но он выглядит серым!» Причин несколько:

Первая — визуальный контраст. На сером холсте Figma даже чистый белый (#FFFFFF) может казаться тёплым или сероватым из-за окружающей среды. Это нормальное явление восприятия цвета. Чтобы проверить истинный цвет, увеличьте масштаб и сравните с палитрой.

Вторая причина — прозрачность. Если у объекта установлен режим заливки с прозрачностью (например, 99% или ниже), даже при #FFFFFF он будет полупрозрачным и «подтянет» серый цвет холста. Проверьте параметр «Opacity» в разделе «Fill» — он должен быть 100%.

Третья — наложение эффектов. Тени, размытие или внутренние свечения могут визуально затемнять границы объекта, создавая ложное ощущение серого фона.

Как проверить, действительно ли фон белый

• Используйте инструмент пипетки (I) и кликните по объекту — в панели должен отобразиться #FFFFFF.
• Увеличьте масштаб до 400%, чтобы исключить влияние антисглаживания.
• Сравните с другим объектом, заведомо белым.
• Временно скройте все слои, кроме проверяемого.

Белый фон в дизайн-системах и компонентах

В профессиональных проектах белый фон редко задаётся «на глаз». Он встраивается в дизайн-систему как часть цветовой палитры. Например, создаётся переменная «color/background/white» со значением #FFFFFF. Это позволяет единообразно применять цвет по всему проекту.

Если вы работаете в команде, важно стандартизировать использование белого. Возможные варианты:

• Base White: #FFFFFF — чистый белый, для фонов и карточек.
• Off-White: #FCFCFC — чуть тёплый, чтобы не резал глаз при длительном просмотре.
• White with tint: #F8F9FA — используется в админках и дашбордах.

Хотя #FFFFFF технически белый, в реальных интерфейсах его часто заменяют на off-white, чтобы снизить контраст и улучшить читаемость.

Создание цветовой переменной в Figma

1. Откройте панель «Design» → «Local Styles» → «Colors».
2. Нажмите «+» и выберите «Create color style».
3. Назовите, например, «Background / White».
4. Установите значение #FFFFFF.
5. Применяйте к любым объектам через панель заливки.

Экспорт с белым фоном: PNG, SVG, PDF

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

Для формата PNG:

• Выберите фрейм или объект для экспорта.
• В правом нижнем углу найдите секцию «Export».
• Нажмите «+» и выберите формат PNG.
• Убедитесь, что в настройках экспорта не стоит галочка «Transparent background».
• Если она активна — отключите. Иначе фон будет прозрачным, даже если в макете он белый.

Для PDF и JPG:

• JPG всегда экспортируется с белым фоном (прозрачность не поддерживается).
• PDF может сохранять прозрачность, если включена опция «Preserve transparency» — её лучше отключить, если нужен белый фон.
• Лучше всего экспортировать не отдельные элементы, а целые фреймы с белой подложкой.

Чек-лист перед экспортом

• Фоновый слой с #FFFFFF присутствует и находится под всеми элементами.
• Opacity всех заливок — 100%.
• В настройках экспорта отключена прозрачность (кроме случаев, когда она нужна).
• Фрейм для экспорта включает всю необходимую область.
• Проверено отображение в увеличенном масштабе.

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

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

Также Дмитрий отмечает, что использование компонентов с предустановленным белым фоном (например, «Card / White») значительно повышает скорость работы и консистентность.

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

Заключение

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

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

• Белый фон задаётся через заливку (Fill) с цветом #FFFFFF.
• Холст Figma нельзя сделать белым — используйте фоновый фрейм или плагины.
• Проверяйте прозрачность (Opacity) и отключайте «Transparent background» при экспорте.
• Создавайте цветовые стили и компоненты для единообразия.
• В дизайн-системах часто используют off-white вместо чистого белого.