Use layered blending modes and fills to create more versatile image filters across your component instances. When dealing with multiple instances of components, applying image filters across children can be difficult. The Image Filter tool works well but lacks batch editing and changing image files can reset the filter controls.
Changing the image filters of the parent component after creating instances does not apply changes to already existing instances.
Image filter controls on the parent component have no effect on already existing children.
2. Filters Before Creating Instances
Changing the image filters of the parent component before creating instances applies filters to duplicated instances but later changes can't be done in batch.
Image filter controls on the parent component will apply to instances created afterwards.
Recommended
Stacking Layers
The most efficient and scalable way of applying filters across instances is to layer effects with blending modes. That way, effects done to the parent component apply to all, while still retaining individual control on each child instance later on. Filters can also be stacked in the Fill panel on the same layer but I will demonstrate this by using different layers.
Stacking effects on separate layers keeps things clean and easy to apply across all instances.
A wide variety of effects can be achieved using layers and blending modes, but I'll cover the most common ones.
1. Black And White
Create a rectangle over the image (I usually duplicate the Image layer to use as the shape).
Set a greyscale fill.
Set the blending mode to Saturation.
Black and white effect created with a greyscale fill layer set in Saturation blending mode.
2. Color Overlay
Create a rectangle over the image.
Create a colored gradient or solid color fill.
Set the blending mode to either Multiply or Overlay.
Setting a colored fill layer in Overlay blending mode creates stylized effects.
3. Contrast
Create a rectangle over the image.
Create a greyscale gradient or solid color fill.
Set the blending mode to Soft Light.
Additional contrast can be adjusted with a gradient layer set in Soft Light blending mode.
Full Control
By having effects on different layers, it offers you full control over them in the parent component, while retaining their individual control in child instances if needed. It also allows you to keep images isolated on their own layer and in their original form, which makes replacing the image source easy and without the hassle of having the filter controls reset.
Here's a list of Figma's blending modes:
Normal
Normal: The default mode performs no additional change to how layer contents interact.
Darken
Darken: Pixels lighter than blend are replaced; darker ones are not.
Multiply: Is similar to drawing strokes on the image with markers. The colors of the top layer are blended with the image.
Color Burn: Evaluates each channel; darkens base by increasing contrast.
Lighten
Lighten: Evaluates each channel; it then uses base or blend color (whichever is lighter).
Screen: Uses a lighter color. It is useful for “knocking” black out of a layer.
Color Dodge: Opposite of color burn. Evaluates each channel; brightens base by increasing contrast.
Contrast
Overlay: Overlays existing pixels while preserving highlights and shadows of base.
Soft Light: The effect is similar to shining a diffused spotlight on the image.
Hard Light: Effect is similar to shining a harsh spotlight on the image.
Comparative
Difference: Evaluates each channel and subtracts or inverts depending on brightness.
Exclusion: Looks at the color in each channel and subtracts the blend from the base.
Color
Hue: Uses luminance and saturation of the base and the hue of the blend.
Saturation: Preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer
Color: Preserves gray levels. It’s very useful for coloring and tinting.
Luminosity: Is the inverse effect from the Color mode.
