Versatile Image Filters for Figma Components

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.

Not Recommended

Using Built-In Image Filter Options

1. Filters After Creating Instances

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

  1. Create a rectangle over the image (I usually duplicate the Image layer to use as the shape).
  2. Set a greyscale fill.
  3. Set the blending mode to Saturation.
Black and white effect created with a greyscale fill layer set in Saturation blending mode.

2. Color Overlay

  1. Create a rectangle over the image.
  2. Create a colored gradient or solid color fill.
  3. Set the blending mode to either Multiply or Overlay.
Setting a colored fill layer in Overlay blending mode creates stylized effects.

3. Contrast

  1. Create a rectangle over the image.
  2. Create a greyscale gradient or solid color fill.
  3. 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.