Video transcript
10-minute video ·
Today, I’m going to be showing you a quick tutorial on how to convert images to vectors in Figma using the Convertify Figma plugin.
To get started, all we need to do is go to our Figma file, click on the “Resources” icon at the top here, and search for “Convertify” under the “Plugins” tab. If you click on the Convertify item, you can run the Figma plugin by either clicking on this “Run” button here, or I’d recommend clicking on this little “Save” icon here. That’s going to let us run the Figma plugin from our saved Figma plugins list. I’ve already done that, so I’m going to right-click anywhere on my canvas, go down to “Plugins,” go down to “Saved plugins,” then click on Convertify. That’s just going to run the Figma plugin we saved a second ago.
By default, you can see that it’s currently set to export Figma to sketch files because the Figma plugin can export Figma to different formats but also import different file formats into Figma. Today, we’re just going to be focusing on this import to Figma category down here. If you scroll down, the one we want to select is “Import image as traced SVG to Figma.” Go ahead and click on that option, and that’s going to change the little context window here to allow us to drag and drop a JPG, PNG, or WebP image file from our computer.
I’m just going to go to my desktop. I’ve got a few different bitmap images saved. You can see here I’ve got one that’s an anime one, I’ve got a couple of vectors and some logos, and a couple of other icon layers too. I’m going to go through these really quickly and show you how these work. To do a really quick example, we’re just going to import this Pikachu.JPG image. We’re going to drag and drop that file directly from our desktop into this little drop zone area in the plugin here. If we let go of that file, you can see here that it’s now tracing the JPG image and generating the SVG paths, which it’s now done. Once that finishes, you can go ahead and click on the “Insert SVG to Figma” button here, and that’s going to import your SVG into the Figma file.
You can see that these are editable layers. We can click on those, select them, and change the color if we wanted to. You can see here the color changer is going to allow us to do that. This is a vector file converted from the bitmap image. If we were to import this image normally, just dragging and dropping that JPG file into Figma, you can see here that when I zoom in, the pixels are going to be pretty obvious. You can see the pixelation occurring around the eyes and the cheeks here. If we scroll over to the version that we just imported, you can see that these are vector layers.
That’s a really quick example of what the import function does. It allows you to convert bitmap images into vector layers and have those imported into Figma. You’ve also got the option to download the SVG file, so if you wanted to download that file to your computer instead of inserting it into Figma, you can do that as well. I’m just going to run through a few more examples of what this looks like.
Another one we’ve got here is an anime character. Again, this is a bitmap image. Just going to drag and drop that PNG file into the Figma plugin, and that’s going to convert this image into an SVG as well. You can see it’s generating the SVG path. You can see that happening in real-time over here. Once that’s ready to insert, again, we just click on the “Insert SVG to Figma,” and you can see that’s also imported our vector. Again, these are editable vector layers, and that’s going to be imported directly from the image and converted from that PNG into a vector layer.
A couple more that I wanted to show you. The next thing I want to show you is the difference between upscaling an image first. If I show you this original image here, we’ve got this kind of poster with a dog and some text on it. I’m just going to import that into the Figma plugin, drag and drop it, and you can see once it imports this path, we’ve got the SVG ready to go. We’re just going to insert that. This is kind of the initial example. If you see here, the text is okay. It’s kind of imported it fairly well, but there’s still a little bit of jaggedness around the edges there. The image isn’t too bad either, but we can actually improve this by upscaling the image first. If you go to a website like Upscale Media, there’s some other ones like ILoveImage.com, and you can upscale it through there as well. What you want to do is actually upscale the image beforehand. In this case, I’ve upscaled at 4X using this AI upscale feature. You can see here the text is quite a lot sharper. The vector is quite a lot sharper as well. Now, I’m going to run a comparison by dragging and dropping that 4X upscaled image into the Figma plugin as well. I’m going to drag and drop that JPG, and that’s going to convert this JPG image with the upscaling to a vector SVG that we can import as well.
You’ll notice that the time it takes to convert larger images or more complex images takes a bit longer than the smaller images or simpler images. That’s just something to call out if you notice a speed difference there. Now that it’s converted the larger upscaled image, we can insert that one to compare it. I’m going to click on the “Insert SVG to Figma,” and you can see here this is four times the size, but you’ll notice that the text is sharper. The text is looking a little bit sharper than the original one. The image down here, you can see that there’s a little bit more detail around the mouth as well. You can see here with the mouth, it’s missing some of those smaller features down here. When we scroll over to the upscaled one, you can see that it’s carried those over. You get a little more detail with that image because it’s upscaled. That’s just something I wanted to call out. If you’ve got a lower quality image, you can use a service like this to upscale it beforehand. If you do that before importing the image to convert to vector in Figma, that’s going to allow you to get a sharper result.
I’ll show you another example of that here. I’ve got the Nike logo that I’m just going to drop in. This is the original one. It’s a bit more of a lower resolution one, so that won’t take quite as long as the next one we’re going to do, but you can see it’s generating the paths for this logo. Once it’s finished, I’m going to show you a comparison between this one and the larger one. I’ve got a four-scale, four times upscaled one over here, so we’ll import that in a second. You can see this one is a little bit blurrier around the edges. I’m going to show you what that looks like. If we insert that SVG into Figma, you can see here, as I just mentioned, because the original image has a bit of blurriness and compression artifact around it, you can see here all these little artifacts around the logo. That’s because of the JPG compression that’s getting included, and that basically follows through in the converted vector as well. You can see those artifacts are getting translated into these little paths here. What we want to do is really clean up that original image, and one way of doing that is upscaling it. I did upscale this one as well, and you can see the lines are a little bit sharper there. We’ll drag and drop that one in as well, and then we can compare the two in Figma and see what the conversion between the original JPG image was to the vector layer here with this upscaled one, which will also get converted to the vector layer in a minute.
As I said, this is going to take slightly longer because it is upscaled. The larger the image and the more complex the image is, the biggest thing those two factors are going to determine how long the generation of the SVG takes. We’re almost done. We’re just up to 95%, and once that adds the last bit, as it’s just done, we can now insert that SVG to Figma to compare it. I’m just going to click “Insert to SVG,” and you can see here this one’s upscaled. This one’s actually just a 2X upscale, so it’s not like the 4X one we did before. Immediately, you can see that the paths are much sharper. We’ve got fewer artifacts around these letters. If we zoom in here, you can see that there are some of these artifacts showing up in the original one, but just doing a 2X upscale, you can see that it’s actually much sharper, and there are many fewer artifacts than the other one had. That’s just a quick example of what that looks like, and I would recommend using an upscale feature to do that. Ideally, you want to start off with the sharpest possible input image.
This works really well with things with clean lines or flat style colors. 2D colors work really well. I’ll just do a couple more to show you that. We’ve got a JPG here of this little logo, so we can import that into Figma, just converting that JPG file. This is just a flat JPG of the Microsoft Word icon, but again, this is a very sharp-looking, upscaled original image, which is in bitmap, and that’s really what you want to do as your input. You want to have the sharpest possible input. Even though it’s not a vector, it’s a very high-resolution, sharp, clear image that we can then import into Figma and convert to a vector.
That’s ready to go, so I’m going to insert that SVG, and you can see here it’s extremely sharp. The lines are extremely clean because the input was so good. We’ve now got this vector that we can use inside of Figma however we want, and that’s going to stay very sharp. Of course, you can also edit the colors of this. I’ll just do one more example, and then we’ll finish up the tutorial.
I’m just going to import this puppy JPG as well. You can see this one’s got quite a few different shades of colors in it. It’s more of a detailed vector, whereas this one’s much more of a flat vector. I’m just going to drag and drop that puppy JPG file into the Figma plugin and convert that into a vector as well. Once that’s done, you can see here it’s ready to go. I’m going to click on “Insert SVG to Figma,” and that’s going to allow us to import that.
The important thing I wanted to show there is that it will try and match up all of the input colors. You can see that the original one had quite a few bits of input of detailed colors, and this is carrying that over fairly well. I just wanted to show you an example of that. Again, it’s not going to be 100% perfect. Vectors are much different and much more complicated to get right than the original bitmap because bitmaps are using pixels, whereas SVGs and vectors use paths. It’s quite a different way of rendering imagery, but this plugin and this feature, where it allows you to import images as trace SVGs into Figma, will hopefully allow you to save some time instead of having to manually trace all of these things with the pen tool or converting them to vector using some other manual method.
I hope that’s given you a good overview of what the plugin can do. This is a new feature that’s just been added as an option. You want to go to the “Import to Figma” section, click on “Import images traced SVG”, and that’s going to allow you to convert images from your computer and convert them into vector layers that will be usable in your Figma file automatically. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle