How to Make Image Black and White in Figma

If you need to learn how to make image black and white in Figma, the most reliable method is to select the image fill and reduce saturation all the way down. Figma is especially useful when the image belongs inside a UI mockup, landing page design, social graphic, presentation frame, or product concept.

This guide walks through a practical Figma workflow, explains how to protect the original image, covers export settings, and shows when a dedicated black and white image maker is a faster option.

---

Understand How Images Work in Figma

In Figma, an image is usually a fill applied to a layer. That layer may be a rectangle, frame, ellipse, component, or other shape. Because the image is treated as a fill, the controls you need are usually in the right sidebar after you select the layer.

The exact interface can vary as Figma updates its editor, but the core idea remains stable: select the layer that contains the image, open the image fill or image adjustment controls, then reduce saturation to remove color.

Method 1: Reduce Saturation in Figma

Use this method when you want a normal grayscale image inside a Figma design.

1. Open your Figma file.
2. Select the layer that contains the image.
3. In the right sidebar, find the Fill section.
4. Click the image fill thumbnail or image settings area.
5. Look for image adjustment controls such as exposure, contrast, temperature, tint, or saturation.
6. Reduce saturation completely to remove the visible color.
7. Adjust contrast if the image becomes too flat.

This is the best default workflow for UI mockups, hero images, profile photos, cards, case studies, and design systems where the same image may need both color and grayscale variants.

Method 2: Duplicate the Image Before Editing

Before changing saturation, duplicate the image layer or frame. This gives you a color version and a black and white version in the same file.

1. Select the image layer.
2. Duplicate it with your normal copy and paste shortcut.
3. Rename one layer Color and the other Black and white if the design is complex.
4. Apply the saturation change only to the duplicate.
5. Compare both versions in the design context.

This is helpful when you are presenting options to a client, testing a landing page style, or keeping a component variant for later.

Method 3: Use a Black and White Version as the Fill

For production assets, it may be better to convert the image outside Figma and then use the finished grayscale image as the fill.

1. Convert the photo with Make Photo Black and White or Make an Image Black and White.
2. Download the converted image.
3. Return to Figma.
4. Select the layer with the image fill.
5. Replace the fill image with the converted black and white file.

This workflow is useful when developers, marketers, or teammates need the actual exported asset to already be black and white. It also avoids surprises if an image adjustment is not reproduced outside the Figma file.

Method 4: Improve the Grayscale Design

After you make image black and white in Figma, judge it inside the layout. A photo that looks good by itself may not work behind text, buttons, or cards.

Check these details:

• Does the subject still stand out?
• Is text readable over the image?
• Does the image compete with UI controls?
• Are important product details still visible?
• Does the black and white style match the surrounding brand colors?

If the image sits behind text, add an overlay layer or choose a simpler crop. If it is part of a card grid, make sure all images have similar contrast so the layout feels consistent.

Exporting Black and White Images from Figma

Once the image looks right, export the layer or frame.

1. Select the image layer, group, component, or frame you want to export.
2. In the Export section, choose PNG, JPG, SVG, or PDF depending on the use case.
3. Use PNG for transparent or UI assets.
4. Use JPG for normal photos.
5. Export at a higher scale if the image will be displayed large.

If the image is going to a website, remember that large exports can slow the page down. Use the right dimensions for the design instead of exporting a much larger file than needed.

Figma vs an Online Black and White Tool

Figma is a design tool. It is excellent when the black and white image is part of a larger interface or brand system. A dedicated converter is better when the task is only image conversion.

Use Figma for design decisions. Use a converter for finished image files.

Common Figma Mistakes to Avoid

Do not edit the only copy of your image if you may need the color version later. Duplicate the layer first.

Do not rely on color differences after converting to grayscale. Two colors that looked distinct may become the same gray value. Add contrast, spacing, labels, or borders if the design depends on separation.

Do not export a whole frame when you only need one image asset. Select the correct layer so the exported file contains exactly what you need.

Do not place small light text on a busy black and white photo. Grayscale can make texture more noticeable, so readability still needs to be checked.

Related Tutorials

If your workflow moves between design apps, these tutorials may help:

• How to Make an Image Black and White in Photoshop
• How to Make an Image Black and White in Illustrator
• How to Convert an Image to Black and White

FAQ

Can Figma make an image black and white?

Yes. Select the layer with the image fill, open the image fill or adjustment controls, and reduce saturation completely to create a black and white result.

Is Figma good for black and white photo editing?

Figma is good for design-context adjustments. For detailed photo editing or a final standalone grayscale file, a dedicated image editor or online converter may be better.

How do I keep the original color image in Figma?

Duplicate the image layer or frame before adjusting saturation. Keep one copy in color and one copy in black and white.

Can I export the black and white image from Figma?

Yes. Select the adjusted layer or frame and use Figma's Export section. Choose JPG for typical photos or PNG for UI assets and transparency needs.

Conclusion

The cleanest answer to how to make image black and white in Figma is to select the image fill and reduce saturation until the color is gone. Figma is ideal when you need to judge the result inside a real design. For quick standalone conversion, use MakeImageBlackAndWhite.com or one of the dedicated grayscale tools before placing the asset into your Figma file.