7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.7 How to Export a Design From Sketch

Our design is complete, but you still need to code it. To do that, you might want to export a couple of images and use them as a reference. Happily, Sketch has you covered, as exporting images is one of its strengths. Let’s see how.

3.7 How to Export a Design From Sketch

Hi. Welcome back to Practical UI Design with Sketch. This project is complete but you still need to code it. To do that, you might need to export a couple of images and use those when coding. Or if you're not doing it yourself, then you might need to send those images to a developer. Well, Sketch has you covered because exporting images is really simple. So let's see how. First of all, there are two main methods of exporting. You can either export layers directly, or you can export slices. So let's talk about layers first. In the layer list, you can select any layer or any layer group, actually. And then, on the right side, on the bottom, actually you can see Make Exportable. So when you click that, you're gonna get a few options, the size, a suffix, and the file format. And you can choose from PNG, JPEG, TIF, PDF, EPS, and SVG. So select the file format you want and then, hit Export Quick Post. And this will actually open a dialogue asking you to give it a name and also the location of the file. So if I hit Save, and I open my finder window, I can see my QuickPost.png. So it exported the entire group. There's also a faster way. Let's say you want to get this logo, right? Well, you can simply select it here, and then bring up a finder window. And from the layers panel, you can simply drag and drop into a finder window, and it's gonna export it automatically into a PNG and using the name of the layer. Very cool. You can also export entire groups like this. Menu item three, for example. Yeah. And f you hold down the Option key or Alt while dragging, it's gonna export to a PDF. Oops, where is it? There we go. Okay so now this is a PDF. And notice, it's crystal clear because this is basically a vector application so it can export elements to any size you want. Now, let's say you want to export this logo at 1x and 2x maybe for a retina logo. Well, you can do that easily, simply make it exportable. And now you can see on the right side of the logo image here, there is a small knife icon. That means it is made exportable. So with that, you can add a new size here. So notice you have 1x, you have the 2x here with the suffix, and the suffix will be placed after the file name, and then the extension. So now when you export, you select the folder, Export. And now you have Logo.png, and Logo@2x.png, which is twice the size. So, already, you can see just how fast it is. Or a very cool option if you're building a logo in sketch, you can export it as an SVG. So if I want add another file format, I can simply choose the 1x size here and select SVG as the file format. Export it. And now, I also have the SVG file which I can use as a vector in a website. And no matter how big or how small it will scale, it will look just fine, provided of course, that it is being built in Sketch first, and it's not just an image you grabbed from the web or designed in a raster application like Photoshop. So you can take any layer or group and make it exportable, but you can do the same with dashboards. So if you select the dashboard, yeah, you can hit this Export button. It's gonna give you the size, suffix, file format, and then you can simply export just like you did with the layers. Now the other option for exporting is using slices. So for that you need the slice tool, and you can get it by going to Insert > Slice, or pressing the S key. And let's say you wanna export this whole area as an image, right? You can give it a name, like Logo Container. Of course this is just an arbitrary name. And now, you have the slice here on the right. You have the position, the size. You can alter these any way that you want and you can see a preview of what's gonna be exported right here. You have the option to trim transparent pixels. For example, if you have these elements here and a transparent background, then those transparent pixels will be removed and you will only be left with something like this, right? That's what the trim does. You can also set a background color if you want. And again you have the same options, the size, the suffix and the file format. And then you simply click Export Logo Container. And you can do the same using the finder window. So if you have a slice here, you can simply drag and drop and it's gonna create the slice. Now one cool thing you can do is actually group a slice with another group. So for example, if you would have this slice over the stats here, yeah? You would group these two together, and whatever you move that group, the slice will move along with the content. So, it's always gonna to be there if you need to export it. So, that's actually pretty cool. Now notice that this slice is displayed as a layer. But if you want to hide it, you can click this little button right here. Yeah, you can toggle its visibility. So, if you're building the slice now, so you won't forget later, but you don't need it quite yet, well, you can hide it really easy with that button. So, those are the two main ways to export an image. Now, if you're wondering which one to use, it depends. With slices, you will basically export everything you see inside the slice. If you just wanna export a single layer or single element, then you gotta use the layer export. So let's say you wanna export this publish button. Well, simply select it here, make it exportable or simply drag it into a finder window and you have your publish button. So it really depends on what you wanna do. And that's basically it for exporting. Next time on Practical UI Design with Sketch, you'll get a list of plugins and resources that you can use to take your Sketch experience to the next level. See you soon.

Back to the top