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

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

Зачем нужны градиенты на фото

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

Подготовка фото в Figma

Перед тем как наложить градиент, важно правильно разместить и подготовить изображение. Начните с импорта: перетащите файл в Figma или воспользуйтесь пунктом File → Place Image. Убедитесь, что фото занимает нужную область — рамку карточки, баннер или весь холст.
Figma автоматически создаёт объект типа Image. Вы можете изменять его размер с зажатым Shift (для сохранения пропорций) или использовать Auto Layout, если элемент входит в компонент. Важно, чтобы изображение не было растянуто — это снижает визуальное качество и может исказить смысл.
Если вы работаете с несколькими фотографиями, рекомендуется группировать каждое фото с его градиентом. Это упрощает управление слоями и последующие правки. Назовите группу осмысленно: например, «Hero Banner – Gradient Overlay».

1. Импортируйте изображение в Figma.
2. Отрегулируйте размер и положение.
3. При необходимости обрежьте с помощью маски (Frame).
4. Убедитесь, что фото находится в нужном слое (ниже будущего градиента).

Как создать градиент в Figma

Figma поддерживает три типа градиентов: линейный, радиальный и угловой. Каждый из них подходит под определённые задачи. Линейный — самый популярный для наложения на фото, так как позволяет равномерно затенить верх или низ. Радиальный идеален для акцентирования центра, например, при создании эффекта «светового пятна». Угловой используется реже — в основном для декоративных элементов.
Чтобы создать градиент, выберите инструмент Rectangle (R) и нарисуйте фигуру поверх изображения. Затем в правой панели свойств найдите раздел Fill. Нажмите на цвет заливки и выберите значок градиента. По умолчанию будет создан линейный градиент от чёрного к белому.
Теперь можно настроить точки останова (stops). Кликните по ползунку под шкалой, чтобы добавить новый цвет. Двигайте ползунки, чтобы изменить позицию перехода. Двойной клик по цвету открывает палитру, где можно задать HEX, RGB или использовать eyedropper для выбора цвета с фото.

Настройка направления и угла

Для линейного градиента важно указать угол. По умолчанию он 0° — слева направо. Но чаще всего используются значения 90° (сверху вниз) и -90° (снизу вверх). Изменить угол можно с помощью поля ввода или перетаскивая стрелку на холсте. Она появляется при активации градиента.

Наложение градиента на фото: пошаговая инструкция

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

1. Добавьте изображение на страницу и расположите его.
2. Создайте прямоугольник того же размера, что и фото, и поместите его сверху (через правую панель Layers).
3. Примените градиент: выберите линейный тип, установите начальный цвет (например, #000000) и конечный (также #000000), но измените прозрачность первой точки на 0%.
4. Настройте угол: установите 90°, чтобы градиент шёл сверху вниз.
5. Регулируйте непрозрачность всего слоя градиента в разделе Opacity (рекомендуется 40–60%).
6. Сгруппируйте слои: выделите фото и градиент, нажмите Ctrl+G (или Cmd+G).

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

Использование маски для точного контроля

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

Режимы наложения и эффекты

Помимо прозрачности, Figma предлагает режимы наложения (Blend Modes), которые кардинально меняют внешний вид градиента. Они находятся в правой панели, в разделе Layer → Blend. Самые полезные для фото:

• Multiply — затемняет изображение, идеально для тёплых градиентов на светлых фото.
• Overlay — усиливает контраст, хорошо работает с средне-тонированными снимками.
• Darken — выбирает самые тёмные пиксели между слоями, подходит для плотных градиентов.
• Color — сохраняет яркость и детали, но меняет цветовую гамму, полезно для стилизации.

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

Добавление размытия и других эффектов

Хотя градиент сам по себе — плоский элемент, его можно дополнить эффектами. Например, примените Blur к слою градиента, чтобы смягчить переход. Gaussian Blur на 2–5px делает наложение более органичным. Однако будьте осторожны: чрезмерное размытие теряет смысл и увеличивает нагрузку на рендеринг.

Ошибки и как их избежать

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

Градиент слишком яркий или контрастный

Частая проблема — градиент «перебивает» фото. Это происходит, когда используется 100% непрозрачный чёрный или слишком резкий переход. Решение: снизьте непрозрачность до 50%, добавьте плавный переход между цветами и проверьте результат на разных экранах.

Неправильный порядок слоёв

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

Игнорирование адаптивности

На мобильных устройствах тот же градиент может выглядеть иначе из-за меньшего размера. Тестируйте макет на разных брейкпоинтах. Используйте Constraints, чтобы градиент корректно растягивался вместе с фото.

Слишком много градиентов на одной странице

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

Экспорт результата

После завершения работы важно правильно экспортировать изображение. Выделите группу с фото и градиентом, перейдите в раздел Export справа. Выберите формат: PNG для прозрачности, JPEG — для меньшего размера.
Если градиент используется в прототипе, можно оставить всё как есть — Figma корректно отображает слои при презентации. Но для передачи разработчикам рекомендуется экспортировать в 1x, 2x и 3x, особенно если макет предназначен для мобильных устройств.

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

Градиент на фото должен служить функции, а не украшению. Перед добавлением задайте себе вопрос: «Помогает ли это пользователю лучше понять контент?» Если ответ «нет» — пересмотрите решение.
При выборе цветов градиента ориентируйтесь на палитру проекта. Используйте цвета из дизайн-системы, чтобы сохранить целостность. Избегайте слишком ярких или неестественных оттенков, если они не соответствуют стилю бренда.
Для динамических интерфейсов рассмотрите возможность анимации градиента. Хотя Figma не поддерживает анимацию градиентов напрямую, вы можете смоделировать переход между состояниями в прототипе, показав разницу до и после.

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

Заключение

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

• Градиент накладывается через отдельный слой поверх фото.
• Лучше всего подходят линейные и радиальные типы.
• Регулируйте прозрачность и режимы наложения для мягкого эффекта.
• Используйте маски для точного контроля области действия.
• Тестируйте результат на разных экранах и форматах.