tutorialfigmaduotone

How to Make a Duotone Image in Figma (Building One From Blend Modes)

Figma has no duotone effect. You assemble one from a desaturated image and two blended rectangles — here is the layer stack, the order that matters, and an honest account of what it costs to maintain.

Figma has no duotone effect, no gradient map, and no filter that maps tone onto two colours. What it has are blend modes and an image saturation slider, and out of those you can build something that reads as a duotone.

"Build" is the operative word. This is a three-layer construction with a required order, a clipping frame, and a desaturation step that is easy to skip and produces a colour cast rather than a duotone when you do. It works, it looks good, and it is worth knowing exactly what you are signing up for: the result lives inside one frame, cannot be saved as a reusable effect, and has to be reassembled for the next photo.

The layer stack used to fake a duotone effect in FigmaA layers list inside a clipping frame, top to bottom: a rectangle named highlight set to Screen blend mode, a rectangle named shadow set to Color blend mode, and the photo itself with saturation reduced to zero. Each row shows its blend mode and colour.LAYERS — top to bottomduotone-framehighlightshadowphoto.jpgScreenColorSaturation 0Frame → “Clip content” on, or the rectangles spill.RESULTShadows take the dark stop, highlights the light.Desaturate first — skip this and you get a colour cast, not a duotoneThree layers to maintain, and none of it is reusable on the next photo.
Illustration of the three-layer stack that fakes a duotone in Figma. Figma has no duotone effect, so the result is assembled: desaturate the photo, tint the shadows with a Color-blended rectangle, then lift the highlights with a Screen-blended one.

The stack, top to bottom

Order is not a preference here — the modes composite downward, so getting it wrong produces a completely different result.

  1. highlight — a rectangle in your light colour, blend mode Screen
  2. shadow — a rectangle in your dark colour, blend mode Color
  3. photo — the image, with Saturation at 0

All three inside one frame with Clip content enabled.

Building it

  1. Place the image and wrap it in a frame

    Drop the photo in, select it, and press ⌘⌥G / Ctrl+Alt+G. In the frame's properties, tick Clip content — without it the rectangles you are about to draw will spill past the image edges.

  2. Desaturate the image

    Select the image layer, click the image fill thumbnail to open its settings, and drag Saturation to -100.

    This is the step people skip, and skipping it is the difference between a duotone and a tint. With the original colours still present, the blend modes composite on top of them and you get the photo's colours shifted toward yours rather than replaced by them. Reds stay red-ish. It looks like a filter, not a treatment.

  3. Draw the shadow rectangle

    Press R, cover the image, fill it with your dark colour. Set its blend mode to Color in the Layer section at the top of the right panel. It must sit above the image, inside the frame.

    Color takes the hue and saturation from the rectangle and the luminance from what is beneath, so the photo's light and shade survive while its colour is replaced.

  4. Draw the highlight rectangle

    Duplicate the shadow rectangle with ⌘D / Ctrl+D, change its fill to your light colour, and set its blend mode to Screen. Make sure it is the topmost of the three.

    Screen lightens, so this lifts the highlights toward your light colour without touching the shadows much.

  5. Tune with opacity

    Drop the highlight rectangle's opacity to control how strongly the light colour lands — usually somewhere between 40% and 80%. This is your only tuning control; there is no intensity slider.

Choosing the two colours

Wide lightness gap. Two mid-tones produce a flat result, and here more than elsewhere, because Screen and Color are both weaker than a real tonal map. Genuinely dark shadow, genuinely light highlight.

Sample from your own palette. Extracting a palette from the image gives you two values that already belong to the scene, and monochromatic ramps are the safest family.

Check the mid-tones on skin. The Color/Screen combination is less controllable than Photoshop's gradient ramp, and unfortunate mid-tones show up on faces first.

What this construction cannot do

Worth listing plainly, because each of these is a real limit rather than a technique you have not learned yet.

It is not a file. The duotone exists as three layers interacting. Copy the image layer out and it is a desaturated photo. Only exporting the frame bakes it in.

It is not reusable as an effect. No saved preset, no copyable adjustment. A component with a swappable image fill is the workaround, and it carries the whole stack with it.

There is no intensity control. Photoshop drops the adjustment layer's opacity; Canva has a slider. Here you adjust the highlight rectangle's opacity, which is not the same thing — it changes the highlight strength, not the blend between duotone and original.

It cannot be masked to part of the image. Well — it can, by masking the rectangles, but that is another two layers.

It does not batch. Six photos is six stacks.

Exporting

Figma's Export panel with its four available formatsAn Export section showing a scale dropdown set to 2x and a format dropdown set to PNG. The open format list beneath offers exactly four entries: PNG, JPG, SVG and PDF. A note points out that WebP is absent.Export2xPNGPreviewPNGJPGSVGPDFFour formats. No WebP,no AVIF, no quality sliderSVG export only stays a real vector if the layer was a vector to begin with.Export a placed PNG as SVG and you get the same bitmap wrapped in an SVG tag.
Illustration of Figma's Export section. The format list is the whole story: PNG, JPG, SVG and PDF. There is no WebP option, and no quality slider on JPG.

Export the frame, not the image layer. Selecting the image exports the desaturated photo without the treatment. The frame is what carries the composite.

PNG at 2x. And note there is no WebP in Figma's export list — a duotone hero image destined for a web page will need converting afterwards, and duotones compress well in WebP precisely because they contain so few distinct colours.

Check the frame has no background fill if you need transparency around the edges.

What goes wrong

When Figma is the wrong tool for this

If the duotone is one image in a Figma layout, building the stack once and making it a component is a perfectly reasonable thing to do. It stays live, art direction can tweak the colours in place, and nobody has to leave the file. Figma is also the only one of the three tools where the result can be part of a design system rather than a one-off export.

But this is assembly, not a feature. Every other tool here has a control that does this directly, and each of them offers something the construction cannot: Photoshop gives you a third stop and per-channel luminance weighting, Canva gives you an intensity slider and two hex fields. Figma gives you three layers, an order to remember, and a desaturation step that silently ruins the result if you forget it.

The ICC Images web editor with an image on the canvas and the editing panel open
Duotone in ICC Images: two colours, applied to the file. No layer stack, no clipping frame, and the same settings apply to the next image.

ICC Images has it as a single operation. Upload the image, apply a duotone, set both stops by hex, and download — no stack to maintain and no order to get wrong. Editing and previewing are free and need no account; a full-resolution download needs a free sign-in and spends credits.

Read next