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

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

Простое тонирование или наложение цвета

Это самый быстрый и простой способ изменить цвет монохромной или однотонной PNG (например, иконки). Он не требует создания дополнительных фигур или использования плагинов - всего несколько кликов в панели свойств. Этот метод сохраняет исходное изображение нетронутым, просто накладывая поверх него цветовой фильтр.

1. Поместите PNG на холст.
2. Выделите изображение.
3. На панели справа, в разделе «Design», найдите секцию «Fill» (Заливка).
4. Включите заливку (нажмите на плюсик слева от надписи "Fill").
5. Выберите желаемый цвет. Первоначальный цвет изображения, скорее всего, не изменится.
6. Ключевой шаг: Измените режим наложения заливки (по умолчанию стоит «Normal»). Лучше всего подходят:

• Color (Цвет) - отлично подходит для тонирования.
• Multiply (Умножение) - для темных цветов.
• Screen (Осветление) - для светлых цветов.

 

Результат: Исходное изображение осталось нетронутым, но поверх него наложен цвет с выбранным эффектом. Идеально для иконок.

 

Использование масок и заливок

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

1. Создайте фигуру (например, прямоугольник или эллипс) нужного вам цвета.
2. Поместите эту фигуру поверх вашего PNG-изображения.
3. Выделите оба объекта (фигуру и PNG).
4. Кликните правой кнопкой мыши и выберите "Use as Mask" (Использовать как маску) или нажмите сочетание клавиш Ctrl+Alt+M (Win) / Cmd+Opt+M (Mac).
5. Теперь ваше PNG видно только в пределах цветной фигуры. Вы можете двигать PNG внутри маски, чтобы выбрать нужную часть.

 

Результат: PNG обрезано по форме фигуры и залито ее цветом.

 

Окрашивание с помощью эффектов

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

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

1. Выделите ваше PNG-изображение.
2. На панели справа, в разделе Effects (Эффекты), добавьте новый эффект (плюсик).
3. Выберите "Background Blur" (это костыль, но он работает).
4. Установите значение Blur на 0.
5. Теперь под ползунком Blur появится параметр Color. Нажмите на него и выберите нужный цвет.
6. Поэкспериментируйте с непрозрачностью (Opacity) этого эффекта, чтобы контролировать интенсивность цвета.

 

Результат: На всё изображение равномерно накладывается выбранный цветовой оттенок.

 

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

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

Затем используйте его экземпляры, применяя к каждому из них заливку с разным цветом и режимом наложения. Это позволит вам централизованно управлять графикой и мгновенно создавать ее вариации в разных цветах.

1. Подготовьте свою PNG-иконку (например, черную на прозрачном фоне).
2. Сделайте ее Компонентом (Ctrl+Alt+K).
3. Создайте Экземпляр этого компонента на холсте.
4. Теперь, выделив экземпляр, вы можете использовать первый метод (Fill с режимом наложения), и у вас будет легко переиспользуемая иконка с возможностью быстрой смены цвета.

Расширение Image Tracer

Если ваш PNG имеет сложные цвета и фон, который нужно убрать, лучше всего сначала его векторизовать:

1. Установите плагин Image Tracer (через меню Plugins - Browse plugins in Community).
2. Выделите ваше PNG.
3. Запустите плагин через Plugins - Image Tracer (или другой похожий плагин для трассировки).
4. Плагин преобразует ваше растровое PNG в векторные контуры.
5. После этого вы можете разгруппировать результат (Shift+Ctrl+G) и менять цвет каждой векторной детали по отдельности, как обычных фигур.

В таблице ниже показано, какой способ выбрать в зависимости от задачи. Это поможет вам эффективно работать с цветами в Figma:

Ваша задача	Лучший способ
Быстро тонировать иконку	Метод 1: Fill + режим наложения
Сделать иконку в форме круга/квадрата	Метод 2: Маска с цветной фигурой
Создать переиспользуемую цветную иконку	Метод 4: Компонент + Fill
Полностью перекрасить сложное лого	Метод 5: Плагин для векторизации

 

Вывод

В Figma нельзя напрямую изменить цвет пикселей PNG, но для тонирования однотонных изображений идеально подходит метод наложения заливки с режимом смешивания, таким как "Color". Для сложной перекраски рекомендуется сначала векторизовать изображение через плагин, чтобы работать с ним как с набором векторных фигур.