Back home
January 26, 2021

Converting images into vector illustrations using Figma

It might be a UI design tool, but thanks to the introduction of Plugins in 2019, Figma can be surprisingly powerful for creating all kinds of graphics.

Thanks to Plugins, you can get from A to B in these examples in a matter of minutes.

I came across this technique whilst creating the drawings for this freelance project of mine, using the plugin Image Tracer by Dave Williames.

It was made for turning simple image files like logos into vectors, but I've found running photos through it can create some really interesting effects, especially when working with an isolated subject, as we'll go through in the steps below.

Remove image background using plugin

First we’ll make use out of the plugin to remove our background.

It’s as simple as selecting our image, right clicking and selecting the plugin. 

It is surprisingly effective but has it’s limits, so if your source material is more complex you might have to use Photoshop to get a clean mask instead.

For images with a clear subject like this, is very effective

Convert into vector using Image Tracer

Once you’ve got a nice clean isolated image layer, right click on it and select the Image Tracer plugin.

Click on Show Options, and then select Processed Image from the dropdown on the right hand side, ensuring none of the checkboxes beneath it are ticked too. This means you can see exactly what will be output and makes it easier to tweak the settings accordingly.

In my experiences, the majority of the controls don't have much of an affect, but the key one to get right is Threshold. This controls which parts of the image you'd like included in your vector. It's generally easiest to set it really low, then really high, and gradually adjust it until you've found a good middle ground, as shown in the image below.

Taking the time to find the best Threshold value is key to a good end result

That's it!

Hit done and the Vector will be added to your canvas.

Now that it’s a vector file, the fun part begins and you can start experimenting by adding a stroke, filling it with a gradient, adding a shadow, or anything else!

The full process

Note: If you’re trying to create a small SVG file, it’s worth spending some time editing the vector to decrease the amount of nodes used. Unsurprisingly the complexities of real photo can cause thousands of nodes to be created in order to replicate it in vector form, which can result in some pretty big SVG files.

Back home