Exporting assets from your designs is a common task. You start by creating and preparing your graphics, then you choose the export format, set its properties and you’re done. The export tools in Sketch 3 are among its best features. In fact, Sketch 3 helps us export content in so many different ways that I’m convinced you’re going to improve your workflow by reading this article.
We’re going to use some basic examples to fully understand the different export options available in Sketch 3 and I’ll help you decide which methods are best for you, depending on what you’re working on.
By the way, if you want to learn Sketch from the ground up, try my free Sketch tutorial, which includes a video on how to export in Sketch, plus a lot more!
And if you use Sketch for a lot of your design work, you can save time by using some of the Sketch templates on Envato Market. You can download Sketch files with pre-made, customisable versions of the most commonly-used UI elements, so that you can quickly adapt them to your own needs, rather than starting from scratch every time.
1. Export Basics
Step 1
Open Sketch. We need one object on our canvas so let’s create a vector shape. Go to Insert > Shape and select one the available tools. For this example I’m going to create a 300x300px square using Insert > Shape > Rectangle (R).
Remember you can draw a random rectangle and adjust its properties through the Inspector panel.
Step 2
Now go to the File menu. You should see that the Export option has been made active. In the toolbar you can click the Export icon too, so go ahead and click it. You’ll notice some changes on the canvas, in the layer list and the inspector panel. What has happened?
In the layer panel, Sketch has automatically created a new slice with the same dimensions and position of the object we have on the canvas. Slices are special layers that allow us to export areas on the canvas to files. All content within a defined area by a slice, will be included in that file. You can have as many slices as you want using the Insert > Slice (S) option. Each slice will export to a different file.
When present, the knife icon and dashed outline indicate that the layer in question is a slice. You can change its position, width and height like any other object in Sketch. You can move or scale them directly on the canvas, or by using the inspector to change their properties.
The Inspector Panel
Talking about the inspector, take a look at it while keeping the slice selected. As I’ve already said we can change slice position, width and height. But we can also see some new options:
- Trim Transparent Pixels. Turn this option on if you need your exported files to have transparent pixels trimmed away from its edges. For example, say you have a 32x32px icon inside a 80x80px slice. Checking this option will automatically export a 32x32px file without resizing your slice. Sketch will trim away the transparent pixels.
- Export Group Contents Only. This is pretty useful when creating complex designs with overlapped content. We can’t turn it on right now, so we’ll leave it for the next example.
- The Background Color option lets us pick a background color for the selected slice, filling in any transparent pixels within the exported area.
Next to the Export label we find different dropdown and input fields:
- Size lets us add a multiplying factor if we need to resize the content that will be exported for this slice. Sketch 3 comes with some predefined options and variables for this.
- Enter something into the Suffix input if you want to add something to the filename to make it descriptive. For example you can add the
@2xsuffix for double-sized images. - Select the file format using the Format dropdown. Sketch’s supported export formats are
.png,.jpg, .tiff,.pdf,.epsand.svg.
By default the Sketch export options are set to Size=1x (100% original size), no suffixes and .png format. Leave these options with default values or play with them if you want.
Tip: Sketch supports exporting to arbitrary sizes, so don't worry if you need things like 100x export or 1.75x export. Also you can type the value of pixels followed by w for width and h for height to export assets at any size. For example, type 60w in the export tool and Sketch will export your asset at 60px wide and scale the height accordingly. Equally, if you type 60 followed by h Sketch will export your asset with 60px height and scale the width proportionally.
Step 3
Now, remembering to keep your slice selected, take a look at the bottom area of the inspector panel. You'll see a large button and a smaller one next to it. The first one will show you the final export step. The other one gives you some extra options to directly attach your file to different applications. Feel free to click the buttons to see what happens when you finish the export process.
Tip: rename the slice layer to automatically assign a filename to your exported content. One nice trick is to include a slash / within the name, instructing Sketch to create subfolders for you. The following images illustrates the point more clearly:
2. Specifying What You Want to Export
Step 1
Open the export_what_you_want file I've provided as an attachment to this tutorial.
Note: you’ll need Sketch 3 to open it, but if you use an older version don’t worry. It shouldn’t be too difficult to replicate the content yourself, but remember some of the options we cover may not be available for you. See the following image for reference:
You'll see some grouped objects, an artboard and other elements placed directly on the canvas, outside the artboard.
Step 2
Go to File > Export. Alternatively you can click the Export icon in the toolbar.
When you click on Export for the first time, Sketch will assume you want to export your artboards and will make them exportable automatically, discarding all objects outside the artboards. You’ll also notice there’s no slice layer available in the layer list.
Artboards in Sketch 3 can directly be exported with no need to add extra slices. If you add new artboards to your document, just add an export size to these artboards by clicking the + icon next to the export label in the inspector panel, while keeping the artboards selected. Next time you click the Export icon, Sketch will include those artboards as well.
Step 3
Let’s get back to our file. Now we’re going to export one single layer. Select the blue square directly, or through the layer list. Take a look at the bottom of the inspector panel: you'll see a new option Make exportable. Click it.
The inspector will update to show you that you will be exporting one image at 1x (original size) with no suffix and, by default, in .png format.
Look at the layer list and note that the icon in the list for the blue square layer has been given a little knife icon. This is to indicate that the layer is exportable. Next time you go to File > Export or click Export from the toolbar, this new exportable layer will show up there as well, amongst your regular slice layers.
Step 4
Focus your attention on the purple square. We’re not going to use the Make exportable option this time, we’re going to automatically create a slice.
Go to Insert > Slice. Notice how the cursor changes when you’re moving above the objects on the canvas. Remember that knife icon? Click the purple square. A new slice will appear with the same position, width and height!
Tip: following the same method you can create slices for entire groups too. And for individual slices inside a group, hit the Command key when hovering over the object you want to be sliced.
Step 5
Ok, we’ve used slices and the Make exportable option. We’ve already seen what happens when we have artboards... but we haven’t seen what happens with the Export Group Contents Only option yet!
Go to Insert > Slice and move the cursor above the orange and green squares, the ones which are already grouped. Click them. You have just created a new slice for the group.
Step 6
Move the slice layer into the group orange + green.
If you take a look at the inspector when the slice is selected you’ll see that the Export Group Contents Only option can be selected now. But don’t check it yet!
At this point in the proceedings it’s pretty useful to check the image preview to see which content will be included in our file.
Step 7
Check the Export Group Contents Only option.
See the difference? The red ellipse has been removed from the preview.
When Export Group Contents Only is checked, the slice will only export the layers inside its own group, discarding any content outside it. Layers behind the group will be discarded too. This is a very useful option on large designs with lots of overlapping objects!
Tip: if you have lots of slices in your layer list and don’t want to be bothered by them, you can temporarily turn them off using the little knife button at the bottom of the layer list.
As we’ve demonstrated, we can export content in so many ways. Which one should you choose? Well, it depends on what you need. For example the Make exportable option is very useful for exporting icons or single layers. I’d recommend you create slices or artboards when exporting your entire document (but that’s just a suggestion).
3. Multiple Exports at Once
One great feature to consider when using Sketch 3 is that you can export multiple images at once. I don’t mean you can export different images from different slices or artboards (though that is possible). What I mean is that you can export different versions simultaneously from a single layer or slice.
Step 1
Add a slice from the turquoise square, or make it exportable through the inspector panel. Whatever you do, it should end up having new export settings with default values in the inspector panel.
Step 2
Click the + icon just above the format dropdown. You’ve effectively just told Sketch that you want two different export files, from one single layer! Click the icon as many times as you want to get every size or format you need.
Now, you might think we’ve covered all there is to know about Sketch’s export options, but there’s more! Here are some extra tips:
5. Direct Export
Dragging any layer out of the list on to the desktop, or into any other app, will automatically export it for you in .png format. Hold down the option (⌥) key to change to PDF format when dragging out.
6. Sketch Generator & Sketch Commands
We’ve talked about native features within Sketch, but there’s a very ative community out there developing plugins all the time. Sketch Generator, for example, is a completely new way of exporting content using Sketch. You should take a look at this plugin particularly if you have previously tried the Adobe Generator feature from Photoshop CC.
Sketch Commands are a collection of script commands. Some of them are related to export tasks, so this is another extension I’d recommend you take a look at.
Conclusion
All the things I've covered during this tutorial will have armed you with the skills to fully understand how to export content in Sketch 3. If you have any questions about exporting, or Sketch in general, just leave a comment below. I'll be glad to help!
