How to import Adobe Illustrator files to Figma with one click using Convertify

Video Transcript

Today I’m going to be showing you how to automatically import Adobe Illustrator (.ai) files directly into Figma using the Convertify Figma plugin.

The first thing to do to get started is if you go to the “Resources” icon at the top of your Figma file, click on that, and then search for “Convertify”, and under the Figma “Plugins” tab, you’ll see Convertify pop-up. To run it, all you need to do is either click on this “Run” button here, or I’d recommend clicking on this little “More options” icon and clicking on the “Save Figma plugin” item to automatically save that to your Figma plugins list for later.

I’ve already gone ahead and done that, so I’m going to right click on my Figma canvas, I’m going to go down to “Plugins” then I’m going to go down to “Saved Plugins”, I’m just going to click on the “Convertify” item and that’s just going to run the Figma plugin that we just saved a second ago. Once the Figma plugin runs, you’ll notice that there’s a little drop down box here, and by default it’s set to “Export Figma to Sketch”, but we’re going to change that today; if we click on that and then scroll down to the “Import to Figma” group and then go ahead and click on the “Import Adobe Illustrator to Figma” item and that’s going to change the context to automatically import Adobe Illustrator (.ai) files into Figma by dropping an .ai file into this little drop zone.

The first thing I’m going to show you is just with this setting turned off, which is actually the default; this setting is to import Adobe Illustrator artboards as vector layers. I’ll show you what this looks like in a moment, but to get started I just wanted to show you what it looks like first by importing them as JPG layers or bitmap layers. I’m going to go to my folder on my desktop over here, I’ve just got a handful of Adobe Illustrator designs, so we’re going to try and import each of these into Figma automatically and see what it looks like using the Figma plugin. The first one we can try out is just this little bear illustration, if I drag and drop this Adobe Illustrator (.ai) file into the Figma plugin, I’m just going to drop it into this little drop zone and that’s basically going to automatically import that in for me as an image.

Remember, because we’ve got this little toggle turned off at the moment, this is actually getting imported as a bitmap. You can see here if I zoom in, we’ve got a bunch of pixels here; it’s importing the Adobe Illustrator (.ai) file and it’s doing it as a bitmap, but as we know Adobe Illustrator (.ai) files are vector, we lose some of that sharpness by having it as a bitmap. That’s okay, what we can do is we can enable this BETA option which, is currently in BETA, but we can turn it on anyway and use it; we’re going to check the “Import artboards as vector layers” option and we’re going to drop that .ai file in one more time. I’m going to drop in the bear.ai file again, and if we drop it into the Figma plugin, this time you can see it’s done it a bit differently; we’ve got instead of an image, we’ve actually got this group here. If we open up that group, we can see that these are actually vectors, so if I zoom in now, you’ll notice there’s a very big difference between the JPG and the SVG version.

If we go back to the other page and zoom in, you can see that the detail around the face is obviously much more pixelated, whereas the one that we just imported as a vector is much sharper. We’ve got vector layers, which means we can actually edit these, so that means we can do things like change colors; if we wanted to change the color of this particular bear to be purple for some reason, we can do that, so we can do change him to a different color and this is all editable. We can actually edit the content inside of Figma now, we can remove this background if we want, I’ll just find where that layer is that’s the frame; we’ll just hide the frame background and you can see there that we’ve basically got our vector from Adobe Illustrator.

I’ll show you a few more files, we’ve got a couple of other ones to go through; there’s another one which is just this flyer, again, if we show what that looks like just as a bitmap, drop that .ai file in and that’s going to add it as a bitmap, then we can do it again as a vector to see what the difference is. I’m just going to drop that .ai file in, and once this finishes importing the vector; import will take a little bit longer than the the other one, that’s just something to be mindful of, but it should import as well. If we zoom in, you can see that this is quite sharp, the only downside to importing vectors that contain text is that the text actually gets imported as vector shapes as well.

Unfortunately, these aren’t actually editable text blocks, these are basically individual vector items. You can see here every letter is basically its own vector shape, so if you did want to make this editable, you’d probably have to just go in and remove these layers and then add your own text layer on top of it. That’s just something to flag if you’re wondering why the text isn’t actually a Figma text layer, the whole thing’s just basically individual vectors, and because this feature is still in BETA, this is a bit unoptimized at the moment. I think in a future version it’ll have less of these groups and things like, that but for now that’s what it looks like.

We’ll keep going through, we’ve got another one which is just this travel template, which is a bunch of templates for some sort of travel campaign. We can drop that in see what that looks like, and you can see here this is the vector version; it’s quite sharp, and again, we can see what that looks like just as a JPG as well, drop that .ai file in, and that’s just the JPG version as well.

Finally, we’ve got this other animals illustration, so we can see what that looks like by dropping that .ai file in; again, it’s just a JPG and we’ll enable the vector option, and drop that .ai file in one more time, and there we go; let’s zoom in, and it’s much sharper as you can see. These are obviously editable as well, so this is mostly going to be better for things that don’t require text, just because text is going to be broken down into those individual vector layers, but for things like illustrations or things where you’ve got mostly just paths rather than text layers or things like that, this option is going to be a lot better to use the vector import for.

That’s basically what it looks like; as I said, this feature to convert Illustrator files into vector layers is still in BETA, but that should improve over time. As you can see, the quality of the import is actually quite good, and you can edit these shapes, edit all of these vector layers as you would expect, as if you were editing them in Adobe Illustrator. I just wanted to keep this Figma tutorial really quick for today, we don’t have to go into too much more detail, and I think those four examples are enough to give you the idea of what the Figma plugin can do for importing Adobe Illustrator (.ai) files into your Figma file.

We’ll leave it there for today, and I hope that’s been helpful if you’ve been wondering how to get your Adobe Illustrator (.ai) files or vectors from Adobe Illustrator into Figma automatically this is probably going to be the quickest way to do it I know that you can also copy paste layers from Adobe Illustrator into Figma but that may have different results; yeah feel free to give this a try and hopefully it works with your Adobe Illustrator to Figma workflow; thank you as always for watching and we’ll be back soon with more Figma tutorials like this one very soon.