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

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

Основные методы затемнения изображения в Figma

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

Первый и самый распространённый способ — добавление поверх изображения фигуры (обычно прямоугольника) с цветом и пониженной непрозрачностью. Этот метод интуитивен, легко настраивается и идеально подходит для прототипов и презентаций. Второй — использование режимов наложения (Blend Modes), таких как Multiply или Color Burn, которые позволяют изменять восприятие цвета исходного изображения без лишних слоёв. Третий — применение масок с градиентной заливкой, когда затемнение плавно переходит от тёмного к прозрачному, например, для эффекта «вспышки» или акцента на центр объекта.

Каждый из этих методов имеет свои преимущества. Наложение слоя даёт полный контроль над цветом и степенью затемнения. Режимы наложения экономят количество объектов в слое и упрощают редактирование. Маскирование подходит для сложных композиций, где важно сохранить естественность переходов.

Когда использовать каждый метод?

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

Пошаговое затемнение через наложение слоя

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

1. Выберите изображение, которое нужно затемнить. Убедитесь, что оно находится на отдельном слое.
2. Создайте новый прямоугольник (Rectangle Tool, R) того же размера, что и изображение. Вы можете зажать Shift и перетащить углы, чтобы точно совместить размеры.
3. Заполните прямоугольник сплошным чёрным цветом (#000000).
4. В правой панели свойств найдите параметр Opacity (Непрозрачность) и установите значение от 40% до 70%, в зависимости от желаемой степени затемнения.
5. Убедитесь, что прямоугольник находится выше изображения в порядке слоёв (в панели Layers он должен быть выше).
6. При необходимости закрепите оба объекта вместе, сгруппировав их (Ctrl+G / Cmd+G).

Теперь изображение выглядит приглушённым. При этом вы можете в любой момент изменить степень затемнения, отрегулировав Opacity, или поменять цвет заливки на серый или тёмно-синий для более мягких тонов.

Советы по точности и удобству

• Для точного позиционирования используйте функцию Auto Layout — поместите изображение и затемняющий слой в фрейм с Auto Layout, выравнивание по центру.
• Если вы часто используете затемнение, создайте компонент: выделите пару «изображение + слой», нажмите «Create Component» и сохраняйте в библиотеке.
• Чтобы избежать случайного сдвига, заблокируйте положение одного из слоёв через контекстное меню (Lock).

Режимы наложения: как затемнить без дополнительных фигур

Figma поддерживает 16 режимов наложения (Blend Modes), аналогичных тем, что есть в Photoshop. Они позволяют влиять на взаимодействие цветов между слоями, не добавляя лишних объектов.

Чтобы затемнить изображение через Blend Mode:

• Выделите изображение.
• В правой панели найдите раздел Effects.
• Нажмите «+» и выберите «Blend Mode».
• Выберите один из тёмных режимов: Multiply, Darken или Color Burn.

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

Ограничения режимов наложения

• Нельзя регулировать степень затемнения так же точно, как через Opacity.
• Не поддерживается для всех типов объектов (например, текстовые слои могут вести себя иначе).
• На мобильных устройствах при просмотре через Figma Mirror эффект может отображаться некорректно.

Маскирование и градиентное затемнение

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

Шаги:

1. Создайте фрейм с изображением внутри.
2. Добавьте поверх изображения фигуру с радиальным или линейным градиентом: от чёрного к прозрачному.
3. Выделите оба объекта (изображение и градиент).
4. Щёлкните правой кнопкой → «Use as Mask» (или Ctrl+Alt+M).

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

Типы градиентов для затемнения

• Радиальный градиент — затемнение от краёв к центру, имитирует объектив камеры.
• Линейный градиент — затемнение сверху вниз, часто используется под текстовые блоки.
• Угловой градиент — редко, но может использоваться для стилизованных эффектов.

Как сохранить качество и производительность

Работая с множеством затемнённых изображений, легко замедлить Figma. Вот как избежать проблем:

• Не дублируйте изображения. Используйте один экземпляр и применяйте эффекты через слои или маски.
• Избегайте вложенности более 3–4 уровней. Глубокие группы замедляют отрисовку.
• Применяйте компоненты вместо копирования. Если вы используете одинаковое затемнение в нескольких местах, сделайте из него компонент.
• Отключайте Preview Effects при работе с тяжёлыми файлами (в настройках View → Preview Effects).

Типичные ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с непредвиденными результатами при затемнении.

Ошибка 1: Изображение не затемняется

• Проверьте порядок слоёв: затемняющий слой должен быть выше.
• Убедитесь, что Opacity не равен 0%.
• Если используется маска — проверьте, правильно ли применена функция «Use as Mask».

Ошибка 2: Чересчур сильное затемнение

• Снизьте Opacity до 30–60%. Часто достаточно 50%.
• Попробуйте цвет #1A1A1A вместо чёрного — он мягче и не создаёт контраста.
• Используйте режим Multiply с Opacity 30% — это даёт естественный эффект.

Ошибка 3: Проблемы при экспорте

• Если вы используете маски, убедитесь, что они не обрезают нужную часть изображения.
• При экспорте группируйте слои, чтобы избежать смещения.
• Для презентаций экспортируйте как PNG с прозрачностью, если нужно наложить на другой фон.

Экспорт затемнённого изображения

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

• Выделите фрейм с затемнённым изображением.
• В правой панели нажмите «Export».
• Выберите формат: PNG (для качества), JPG (для размера) или SVG (если используется вектор).
• Установите разрешение: 1x, 2x или 3x в зависимости от назначения.

Если вы используете маску, убедитесь, что она включена в экспорт. По умолчанию Figma экспортирует видимое содержимое, поэтому всё будет корректно. Однако при использовании Blend Mode результат также экспортируется визуально — то есть с эффектом.

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

Он также отмечает, что в 2025 году наблюдается тренд на «умное затемнение» — использование переменных (Variables в Figma) для динамического управления непрозрачностью. Это позволяет создавать адаптивные темы: например, тёмный режим с регулируемой интенсивностью затемнения.

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

Заключение

Затемнение изображения в Figma — это базовый, но мощный инструмент визуального дизайна. Он помогает управлять вниманием пользователя, создавать контраст и готовить макеты к презентации. Наиболее универсальный способ — наложение полупрозрачного слоя, но для продвинутых задач стоит освоить Blend Modes и маскирование с градиентами.

• Самый простой способ — наложить чёрный прямоугольник с Opacity 40–70%.
• Для естественного эффекта используйте Blend Mode Multiply.
• Градиентные маски идеальны для виньетирования и акцентов.
• Сохраняйте производительность: используйте компоненты и избегайте избыточной вложенности.
• При экспорте проверяйте видимость и порядок слоёв.