Как поменять цвет фото в фигме

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

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

Дизайнеры редко работают с фото в исходном виде. Даже в стоковых изображениях часто требуется подогнать цветовую температуру под брендовые акценты, убрать нежелательные оттенки или создать монохромную версию для кнопок и иконок. Например, если ваш бренд использует глубокий синий (#0A2A5E), а фотография продукта имеет теплый желтоватый тон — это создаёт визуальный диссонанс. Вместо того чтобы возвращаться к Photoshop или Lightroom, Figma позволяет выполнить коррекцию в несколько кликов.

Также цветовая адаптация важна для создания вариантов макетов. При A/B-тестировании дизайна может потребоваться показать, как продукт будет выглядеть в тёмной и светлой темах. Или вы разрабатываете мобильное приложение с режимом «ночной режим» — и вам нужно быстро сгенерировать все изображения в холодном спектре. Figma не заменяет профессиональные редакторы, но для финальной настройки и прототипирования — идеальный инструмент.

Метод 1: Color Overlay — простой и надежный

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

Чтобы применить Color Overlay:

1. Выберите изображение на холсте.
2. Перейдите в панель свойств справа и найдите раздел «Effects».
3. Нажмите «+» и выберите «Color Overlay».
4. В открывшемся окне выберите нужный цвет с помощью палитры или введите HEX-код.
5. Настройте непрозрачность (Opacity): 30–70% — оптимальный диапазон для естественного эффекта.
6. Убедитесь, что режим наложения установлен на «Normal» — это сохранит детализацию изображения.

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

Метод 2: Hue/Saturation/Lightness — точная цветокоррекция

Если вам нужно не просто покрасить фото, а точно изменить оттенок, насыщенность и яркость — используйте эффект «Hue/Saturation/Lightness» (HSL). Он работает как аналог кривых цвета в Photoshop, но в Figma доступен как встроенный эффект.

Применение HSL:

1. Выберите фото.
2. В панели «Effects» нажмите «+» и выберите «Hue/Saturation/Lightness».
3. Настройте три параметра:
   • Hue — сдвигает цвет по спектру (например, +120° превратит красный в зелёный).
   • Saturation — усиливает или ослабляет насыщенность (от -100% до +100%).
   • Lightness — делает изображение светлее или темнее (от -50% до +50%).
4. Предварительно включите «Preview» — чтобы видеть изменения в реальном времени.

Этот метод особенно полезен, когда вы работаете с фотографиями, где нужно сохранить естественность, но изменить общую цветовую тему. Например, если у вас фото с закатом, и вы хотите сделать его более холодным — просто сдвиньте Hue на -40° и немного уменьшите Saturation.

Метод 3: Режимы наложения и маски

Для более тонкой и художественной работы используйте режимы наложения (Blend Modes) в сочетании с масками. Это не просто изменение цвета, а создание сложных цветовых взаимодействий. Например, вы можете наложить полупрозрачный градиент, чтобы придать фото кинематографичный эффект, или использовать режим «Color» для точного замещения оттенков без потери текстуры.

Шаги:

1. Создайте прямоугольник или градиентный слой поверх фото.
2. Заполните его нужным цветом или градиентом.
3. В свойствах слоя выберите режим наложения «Color».
4. Установите непрозрачность на 40–60%.
5. Если нужно ограничить эффект только на определённой части фото — выделите фото, нажмите правой кнопкой и выберите «Use as mask».

Режим «Color» работает по принципу замены оттенка, сохраняя яркость оригинального изображения. Это идеально для стилизации фото под монохромные или сепия-стили. Особенно полезно при работе с логотипами, вставленными в фотографии — вы можете сделать их цвет в точности совпадающим с брендом, не теряя деталей фона.

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

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

• Наложение сплошного цвета без маски — приводит к полной потере изображения. Всегда используйте Color Overlay или режим «Color» в Blend Modes, а не просто белый/чёрный слой.
• Игнорирование непрозрачности — 100% насыщенность делает фото «пластиковым». Лучше 30–60% для естественного результата.
• Использование «Hue» при низкой насыщенности — если фото слишком тусклое, сдвиг Hue не даст эффекта. Сначала увеличьте Saturation, потом корректируйте Hue.
• Отсутствие проверки на разных фонах — цвет фото может выглядеть по-разному на белом, сером и чёрном фоне. Всегда тестируйте в контексте.
• Не сохранение исходного слоя — не удаляйте оригинал. Создайте копию перед коррекцией и используйте группы (Groups) для организации.

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

Экспертное мнение: как работают профессионалы

Алексей Морозов, Creative Director с 12-летним опытом в digital-дизайне, работает с Figma ежедневно. Его подход к цветовой коррекции фото — системный и масштабируемый.