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

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

Зачем затемнять фон в Figma

Темный фон — не просто эстетическое решение, а стратегический инструмент повышения читаемости. Исследования UX-дизайна показывают, что контраст между текстом и фоном напрямую влияет на скорость восприятия информации: при правильном затемнении читаемость возрастает на 20–35%, особенно в условиях слабого освещения. В Figma, где дизайнеры работают с множеством состояний — мобильные, десктопные, тёмные режимы — важно сохранять гибкость. Если вы просто меняете цвет фона на чёрный, вы теряете возможность быстро переключаться между светлой и тёмной темами без пересоздания слоёв. Правильное затемнение позволяет сохранить единую структуру макета, а адаптация под разные режимы становится вопросом изменения прозрачности или замены одного слоя.

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

Метод 1: Наложение черного прямоугольника

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

1. Создайте прямоугольник, который полностью покрывает область фона (например, весь холст или область контейнера).
2. Установите цвет #000000 (чёрный) или #121212 (темно-серый) — второй вариант лучше для плавного восприятия.
3. В панели свойств уменьшите прозрачность (Opacity) до 10–25%. Для светлого фона — 15–20%, для изображений — 10–15%.
4. Поместите этот прямоугольник ниже всех других элементов, но выше исходного фона (например, градиента или изображения).
5. Закрепите слой (Lock) и назовите его «Overlay — Darken» — это упростит поиск в сложных файлах.

Такой подход не требует изменения структуры компонентов, не влияет на текст и легко адаптируется под тёмный режим: достаточно изменить цвет на #1E1E1E или добавить второй вариант в компоненте.

Метод 2: Прозрачный слой поверх изображения

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

1. Импортируйте изображение или создайте градиентный фон.
2. Нарисуйте прямоугольник точно по размеру изображения.
3. Установите цвет #000000 и прозрачность 15–25%.
4. Выделите прямоугольник и изображение, щёлкните правой кнопкой → «Blend Mode» → выберите «Multiply».
5. Теперь чёрный слой будет «затемнять» пиксели изображения, сохраняя детали и цветовую насыщенность.

Режим «Multiply» особенно полезен при работе с фото на фоне: он не «заливает» цвет, а усиливает тени, создавая естественное затемнение. Это идеально для баннеров, карточек с изображениями или промо-блоков.

Метод 3: Градиентный затухающий фон

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

1. Создайте прямоугольник, охватывающий всю область.
2. В свойствах заливки выберите «Gradient».
3. Установите два цветовых останова: #000000 (0%) и rgba(0,0,0,0) (100%).
4. Выберите направление — вертикальное (сверху вниз) или радиальное (для централизованного акцента).
5. Настройте положение остановов: для сильного акцента — 0% и 70%, для мягкого — 0% и 90%.

Такой подход часто применяется в интерфейсах с геро-секциями: текст в центре выделяется, а края остаются светлее, создавая ощущение глубины. Особенно эффективно в сочетании с размытием (Blur) — это усиливает фокус на контенте.

Метод 4: Использование Auto Layout для динамического фона

Если вы работаете с адаптивными компонентами — карточками, модалками, списками — статический фон не подходит. В таких случаях используйте Auto Layout с встроенным фоном.

1. Создайте компонент с Auto Layout (например, для карточки).
2. Добавьте внутрь него прямоугольник как первый элемент.
3. Установите его как фон: растягивайте по ширине и высоте, включите «Fill container».
4. Примените цвет #000000 и прозрачность 20%.
5. Теперь, когда вы изменяете содержимое карточки — размеры, текст, изображения — фон автоматически подстраивается.

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

Метод 5: Компоненты с вариантами темного фона

Самый профессиональный подход — создать один компонент с несколькими вариантами (variants): светлый и тёмный фон.

1. Создайте компонент (например, «Card»).
2. В панели «Variants» добавьте два варианта: «Light» и «Dark».
3. Внутри каждого варианта создайте слой с фоном: для Light — #FFFFFF, для Dark — #000000 с прозрачностью 25%.
4. Убедитесь, что текст и другие элементы остаются неизменными — они наследуются из основного компонента.
5. Теперь вы можете переключаться между вариантами в инспекторе, не меняя структуру.

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

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

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

• Изменение цвета холста — это не влияет на экспорт, и разработчики не смогут использовать его как основу. Всегда используйте слои.
• Слишком высокая прозрачность — 5–10% не дают заметного эффекта. Оптимальный диапазон — 15–30%.
• Использование белого фона с затемнённым текстом — нарушает контрастность. Всегда затемняйте фон, а не делайте текст тёмнее.
• Отсутствие именования слоёв — в сложных файлах с десятками слоёв «Rectangle 1» мешает работе. Называйте: «Overlay — Dark Background».
• Применение затемнения только к одному элементу — если вы делаете тёмный фон для одной карточки, а другие остаются светлыми — интерфейс выглядит несогласованным. Применяйте единый стиль по всей системе.

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

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

Заключение

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

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

• Используйте черный или темно-серый слой с прозрачностью 15–25% — это оптимально для большинства случаев.
• Избегайте изменения цвета холста — всегда применяйте затемнение через слои.
• Применяйте режим «Multiply» для изображений, чтобы сохранить детали.
• Создавайте компоненты с вариантами — это стандарт для профессиональных команд.
• Тестируйте контраст и именуйте слои — это экономит время и снижает ошибки.