Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:38 minutes
Using figma for svg design 400x277
  • Overview
  • Transcript

2.4 SVG Exporting and Copying Options

When your vector graphics are ready to be output as SVGs, Figma gives you a few options to work with. In this lesson, we’ll check out Figma’s export options as well as its direct SVG code copying capabilities.

2.4 SVG Exporting and Copying Options

Hey, welcome back to Figma for SVG. In this lesson, we're gonna look at all the different ways that you can get SVG code out of Figma. You have two main ways that you can go about it. You can either export your SVG code straight to a file or you can copy SVG code from Figma so that you can paste it directly into your project. So first let's look at exporting. And once again things are a little different here to with other programs, you might think you could just go up to File and then Export. But if you do that, you'll get an alert here that you haven't selected anything to give it any exports settings. So instead, what you need to do is either select the frame that you're working with if you wanna export a whole range of different graphics. Or just select the shape or the graphic itself that you wanna export. And with something selected, on the right side by here, you're gonna see this little export panel. Just go ahead and hit that plus button, and now you're gonna get a bunch of different options that you can work with. So we want SVG, so we're gonna jump in here and change the format to SVG. And there's not a heap of different options here, but the relevant ones are if you hit this little three dot icon. You can choose to include the ID attributes for your shapes if you wish. And this is something that can be really helpful if you need to have IDs that you can target for things like animation or CSS styling. So if you're going to need to dig into the shape that's generated to apply other coat to it later, then you want to make sure that, that button is checked. Or if you're trying to keep your code as minimal as possible, leave it unchecked. So then you can just go ahead and hit Export, and then you'll be able to save out your graphic as an SVG. And if we open up the resulting SVG file that we exported, you can see here is all that code. So we've got our rectangle with different gradients that we applied in the previous lesson. So that is one way that you can get your SVG code out of Figma. Then once you've set up these export parameters down here, then, with that same shape selected, you can go up to File > Export. And now it will let you export anything that you have selected. And the other thing that you can do and this is one of my favorite things about Figma for SVG specifically, is you can just copy code so you can paste it wherever you need it to go. There's a couple of ways that the interface provides for you to do this. One is you have your shape selected, or whatever it is that you're trying to export. You go up to the menu and choose File > Copy As > SVG. Then if you go into whatever document you're working on and Paste, you get all of that same SVG code that you saw exported into the individual SVG file. You can also right-click on a selection, and choose Copy As SVG. And that does exactly the same thing. It gives you that same code. So that copying feature is something that's really handy, cuz a lot of the time you just wanna use SVG inline. Especially if you're just trying to create something like a simple SVG circle, or a really simple icon, and you just wanna be able to use it directly in an HTML document. All right, so now that you know how to get SVG code out of Figma and into your HTML or whatever other code you're working with. We can take a look at what elements of Figma design you actually should be trying to convert into SVG. Some things translate well, some things don't, and it's important to know which things you can and can't use when you're creating SVG using Figma. So we're gonna check out all of those do's and don'ts with demonstration, so you can see for yourself what works well in the next lesson. I'll see you then.

Back to the top