How to convert a color image to grayscale in Figma
I’ve been experimenting with Figma for a while, and I think it’s a great Sketch alternative. A major selling point for me is that you can design something offline (Figma is a web app but also a desktop app) and share online without having to do the Export → Save → Send to Slack/Hangouts/Jira/etc routine.
Anyhow, a few days ago I was working (in Figma) on a design for which I wanted the colors to only be black, white, and shades of grey. I found a nice image to use, but it was in color and not knowing how to convert it to grayscale, I turned to the internet — and found a big fat nothing. I did see results for Photoshop though, but they were unhelpful. I tried Picmonkey (requires you to sign up and I don’t like signing up for things), and Pixlr Express (which worked but somehow refused to save the converted image to my computer).
I got back in Figma and tried one more thing that worked, which I’m going to describe below.
Step 1. Place the image somewhere in your workspace.
Step 2. Click on the image to select it
Step 3. Saturate (Updated 16.01.2018)
[Figma has made some interface changes so everything works a bit differently now, and what used to be a 5-step process is now a 3-step process, yay! I kept the rest of the original post below this, in case anyone needs it. Sorry I couldn’t find the original image in the right size to illustrate this updated version.]
Click the thumbnail beside ‘Image’.
When this pops up, drag the ‘Saturation’ slider all the way left.
And there you have it! The end!
End of updated post
Original post
[What follows below is the rest of the original post, which might be useful if you want a way to play around with saturation + other colors, e.g. you could fill with yellow instead of grey and see what happens.]
Step 3. Add a fill.
- Click on the ‘+’ button
- The default effect on your image will be a white linear fill (see image below)
Step 4. Edit the fill (Updated 05.11.2017)
[Figma has made some interface changes so Step 4 works a bit differently now. Sorry I couldn’t find the original image in the right size to illustrate this updated version.]
Click any part of the ‘Linear’ box.
… and you should see this:
What you need to do is move the highlighted square under ‘Linear’ alllll the way to the right, to align with the other square. Like so:
As you drag, you’ll notice the image gets overlaid with white, like so:
Be sure to drag the square all the way to the end so the image is completely overlaid.
[End of update. The rest of the interface as described below is pretty much the same as before, and again sorry about the image change]
Step 5: Choose a shade of grey, and saturate
Select a shade of grey from the top layer of colors (or enter your own if you like). I’m selecting the second shade from the right, and now it looks like this:
Next, you’ll want to close this panel (click the ‘X’ on the header)
After that, click the teardrop icon beside your new grey fill…
…And scroll down the list till you see ‘Saturation’.
You’re going to click on saturation, and you’ll get this:
The end! You can tweak the shades of grey and the amount of saturation (100% = full grey; 0% = full color), but that’s basically how to convert a color image to a grayscale one.
I hope this was helpful.
