FREELessons: 19Length: 2.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 How to Export in Sketch

When designing in Sketch, at some point you’ll want to export certain elements or even code. That is super simple to do. Let’s have a detailed look at the process of exporting Sketch files.

5.1 How to Export in Sketch

When designing in Sketch, at some point you'll want to export certain elements or even code that is super simple to do. So let's check it out. There are a couple of different ways you can export elements from sketch. The first way is to create slices. To create a slice, you would go to Insert > Slice or press S on the keyboard. And then just, Create a slice just like you wouldn't maybe with a with a knife over the area that you want to export. You can give it a name. And you can see a separate layer created here, okay? With this icon, that is a slice. And you can also see a preview of it in the inspectors, the way it's gonna be exported. Here, you have the exporting options. You can specify the size, you can choose whether or not to add a prefix or a suffix, and you can choose the export format. For the formats, we have PNG, which exports with transparency. JPG, TIFF, WEBP, PDF, EPS, and SVG. Personally, I find myself using the SVG format in most situations for UI elements. But I also export in JPG or WEBP for images. It really depends on the project. So once that's all said and done you can hit Export Selected and that will export the image that you selected right here as a PNG file. Now, you can also add multiple export options by clicking this + sign. So here you can specify okay, I wanted 2 x size as well. You can have a prefix and let's say I want an SVG this time. Or let's say a JPEG. Maybe I want an SVG as well, I can do that. And I can remove the prefix. So when I hit Export Selected again, hit Export Override. You will see that now Sketch has exported my initial PNG, the SVG and also the 2 x JPEG image. Apart from that, on slices you also have the option to trim the transparent pixels. Or you can add a background color behind the element that you sliced here. Now, if you don't want to click Export Selected for each slice, let's say that maybe you have another slice. I don't know, I'll just draw something randomly here, right? So now I have two slices, and you wanna export them both. Well, you can click the big Export button here on the toolbar. And this will actually export everything. Slices, items marked for export, artboards, all of it. And from here you can select or deselect the items that you want to export and you hit the Export hole or the Export button. Now another way to export an item is to mark it for export. So, if for example I work to export this button, right? I have the button here. I will select this group. I will go in the inspector and say make exportable. Right, and I would select my options here. Let's say an SVG. And you can see a preview. You can also click this little icon, and it's gonna give you some presets options. So you can choose from the default presets, or you can choose from iOS, or you can choose Android. Or if you define your own, you can then go in here and you can say Create preset. You would give it a name. And that will now be available right here. So then you could hit export selected and Sketch will generate a bunch of folders with your correct assets. And as those seen previously, any items that are marked for export here will also appear in this big export Window that are shows up when you click the Export button. Now apart from exporting images like this, you can also export entire artboards. You can click on each individual artboard or you can select multiple artboards. Make sure they're exportable. And just like previously, you can select the format that you want. In addition to that, Sketch has an option that allows you to export all artboards as a PDF. You would go to File > Export Artboards to PDF. And that will generate a PDF file with all of your artboards. Just like that. Now Sketch is not just for exporting images. You can also export code with it, more specifically, CSS attributes and SVG code. So, if you take a look at this gradient here. You can Right-Click it and you can say copy CSS attributes. And let me move this up a little bit so you can see it, right, copy CSS attributes. So once those are copied, if you open up a Code Editor, and you would paste that in. You will see the CSS code that's generated a linear gradient. But you can also copy maybe text information, maybe this one copy CSS attributes. And it's gonna give you a lot of information like the font family size, color, letter spacing, and text line. How cool is that. Apart from that we can also copy SVG code. So let's take this icon for example, if you want to export this as an SVG and get it's code, you can export it here, normally. Let's do that right now. So we have this SVG file, where are you? Music, and it can then open that in the code editor. And you would be this as SVG code or you can go back into Sketch and, oops, let's move this away for now. We can Right-Click it, Copy SVG code. And then we can paste it in here in a code editor, and it's exactly the same thing. But this is the faster way. So this is a huge help for developers because apart from generating this SVG code quickly. They can go into for example this background, and say okay, well what colors are these? How can I replicate it in CSS? Well just Right-Click, copy CSS attributes, go back in, paste that in. And they already have the CSS codes written for them, along with all the color values they need. They don't have to, then sample each color, right this bit by hand. It's a huge, huge help. So that's how you can export images and code from Sketch. Now, probably the best feature for collaboration is Sketch Cloud and Sketch for Teams. And we'll have a quick look at those in the next lesson.

Back to the top