How to import optimized SVG files to Figma with one click using Convertify

Video Transcript

Today I’m going to be showing you how to import pre-optimized SVGs into your Figma files using the Convertify Figma plugin.

To get started, all we need to do is go up to the “Resources” tab in your Figma file and if you search for the word “Convertify”, under the “Plugins” tab you’ll see Convertify pop-up. If you click on that, you’ll be able to run the Figma plugin by either clicking on this “Run” button here or you can go to the “More options” icon, which I’d recommend, and click on the “Save to Figma plugins” item and that will just save it to your Figma plugins list for easy access later.

I’ve already gone ahead and done that, so I’m going to go to my canvas I’m just going to right-click anywhere, I’m going to go down to “Plugins”, and I’m going to click on the “Saved Plugins” item, then click on “Convertify”, and that’s going to run the Figma plugin that we just saved a second ago. You’ll notice here that the Figma plugin by default automatically sets itself to export Figma of Sketch, but if we open up this drop down, we’ll see some different options here, and today we’re going to be going down to the “Import to Figma” section and we’re going to click on the “Import Optimized SVG to Figma” option; this is going to change the Figma plugin’s context to accept SVG files.

Just to show you the difference between importing them normally and importing them through the Figma plugin, I’m just going to drop a couple of SVGs onto the Figma canvas. I’ve just got these two SVG files that I’ll drop into Figma, and if we zoom in here you can see that these two SVGs are basically vector based SVGs; one is this bear vector and one is just this sort of flat illustration; if we open up the layers you can see here that we’ve basically got a bunch of vector layers, a bunch of groups, you can expand these out, and that’s what the vectors and SVGs are made of. It’s the same thing for this bear SVG, if we open up the bear SVG, you can see that we’ve got a bunch of groups, we’ve got a bunch of vector layers, and inside of the groups are even more vector layers; quite a lot of layers in there, and you can just keep going and see what that looks like.

That’s just kind of a base reference of what we’re working with here, what we’re going to be doing now is importing these SVGs to Figma again, but we’re going to be doing it through the Convertify Figma plugin. All you need to do to import an optimized SVG via the Figma plugin is to drag and drop the SVG file into the Figma plugin here, and that will automatically add an optimized SVG to your Figma page and it’s going to add this little optimized flag at the end just so you can easily see the difference on your canvas. If we compare these two, you can see that this SVG is much simpler than the one that we imported a second ago; the first thing you’ll notice is there’s basically no grouping, so the groups have been removed and there are far less vector layers as well.

The vector layers have kind of been simplified to reduce the number of them and merge them together when they are appropriate to do that, and we can see this in an even more striking difference when we import the bear SVG. I’m just going to drag and drop that SVG into the Figma plugin and that’s going to import the optimized bear SVG as well. Visually, you can see these are identical, they look exactly the same, but if we open up the group here you can see that there’s quite a lot less vector layers than the previous version. If we open up the original one that we imported, there’s many more vector layers in here than we’ve got in our imported one here, and the reason for that is the Figma plugin is basically tidying up all of these vector paths, it’s merging them, so you can see this is all of the vector layers in this in this particular SVG, whereas if we go into the original one you can see that there’s many, many more vector layers, many more groups nested groups, nested layers, and in our other one for comparison, much more simplified much more optimized for Figma.

You can actually just work with these paths much more easily rather than having them all kind of split up into many, many more layers and nested groups; this is just a really easy way to pre-optimize your SVGs before they get added to Figma, this is going to help simplify the paths, it’s going to simplify the vector shapes, and again, it’s going to look the same but much more easy to work with when you’re actually drilling down into these vector layers and needing to modify things. I just want to keep that really quick for today, just to show you how to pre-optimize your SVGs easily if you want to be adding simplified SVGs into Figma; of course, you can do it natively, but now you also have the option of importing them via Convertify if you want to pre-optimize and simplify those SVG paths.

I’ll leave it there for today, and I hope that this Figma plugin is useful if you’ve been wondering how to import simplified optimized SVGs, feel free to give this a try with your team and I hope it helps with your workflow. That’s going to be all for today; thank you as always for watching, and we’ll be back soon with more Figma tutorials like this one very soon.