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

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

Зачем нужно затемнять изображения в дизайне

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

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

Способ 1: Наложение чёрного прямоугольника

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

1. Импортируйте изображение в Figma — перетащите его в рабочую область.
2. Выделите изображение и нажмите R, чтобы создать прямоугольник точно поверх него.
3. Убедитесь, что прямоугольник находится выше изображения в панели Layers.
4. В панели Properties установите цвет фона в чёрный (#000000).
5. Уменьшите прозрачность (Opacity) до 30–50% — идеальный диапазон для большинства случаев.
6. При необходимости выровняйте прямоугольник по краям изображения с помощью Ctrl/Cmd + Shift + A.

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

Способ 2: Использование режимов наложения

Figma предлагает 12 режимов наложения (Blend Modes), и для затемнения чаще всего используется Multiply. Этот режим умножает цвета пикселей верхнего слоя на нижний, что приводит к потемнению без потери деталей.

1. Создайте прямоугольник поверх изображения, как в предыдущем способе.
2. В панели Properties найдите поле Blend Mode.
3. Выберите Multiply.
4. Установите цвет прямоугольника в чёрный (#000000).
5. Оставьте прозрачность на 100% — режим Multiply сам снизит яркость.

Преимущество этого метода: вы не тратите прозрачность. Это особенно полезно, если вы планируете анимировать слой или применять другие эффекты (тени, градиенты). Режим Multiply работает «умно» — он не затухает цвета, а углубляет их, сохраняя текстуры и детали.

Сравните результаты в таблице:

Способ 3: Градиентное затемнение

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

1. Создайте прямоугольник поверх изображения.
2. В Properties замените сплошной цвет на градиент (Linear).
3. Выберите чёрный цвет в начале градиента и прозрачный — в конце.
4. Установите направление градиента (например, сверху вниз).
5. Настройте положение градиентных остановок: для мягкого затемнения оставьте 20–30% от края.

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

Способ 4: Маскирование с прозрачностью

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

1. Разместите изображение и создайте фигуру (круг, прямоугольник, произвольный путь), которая будет определять зону затемнения.
2. Выделите оба слоя: изображение и фигуру.
3. Щёлкните правой кнопкой → Mask.
4. Создайте новый прямоугольник поверх маскированной области.
5. Закрасьте его чёрным и установите прозрачность 40%.

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

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

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

• Слишком высокая прозрачность — слой становится почти незаметным. Решение: начните с 40%, затем корректируйте визуально.
• Использование белого цвета вместо чёрного — белый слой с прозрачностью осветляет, а не затемняет. Всегда используйте чёрный (#000000).
• Разные размеры слоёв — если прямоугольник меньше изображения, края остаются яркими. Используйте Ctrl/Cmd + Shift + A для выравнивания.
• Применение режима «Screen» вместо «Multiply» — Screen осветляет. Это обратный эффект.
• Игнорирование контраста текста — даже после затемнения текст может быть нечитаем. Проверяйте контраст через плагин Contrast или встроенную функцию Figma: выделите текст → Properties → Contrast Ratio.

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

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

«Я работал над проектами для Apple и Google, и в обоих случаях дизайнеры использовали Multiply для фоновых изображений. Почему? Потому что это не «эффект», а интеграция. Когда вы добавляете чёрный слой с Multiply, он не выглядит как накладка — он становится частью изображения. Это особенно важно для брендов с высокими стандартами визуальной целостности. Не бойтесь экспериментировать с градиентами, но начинайте с базового Multiply — он работает в 90% случаев.»

— Дмитрий Белов, Principal Designer, Figma Certified Expert, более 8 лет в UX-дизайне

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

Заключение

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

• Используйте чёрный прямоугольник с режимом Multiply — это самый эффективный способ.
• Никогда не меняйте прозрачность выше 50% без проверки контраста текста.
• Градиенты и маски применяйте только при необходимости — они усложняют поддержку.
• Всегда оборачивайте изображение и затемнение в один компонент для масштабируемости.
• Проверяйте контраст с помощью встроенных инструментов Figma или плагина Contrast.