Exporting Assets - Learn Sketch

Designing in 1x

When you're designing in Sketch, you need to be aware of the pixel density that you're designing in. Ever since the introduction of @3x screens (iPhone 8 Plus), most designers are going back to designing in 1x. That way, exporting assets for all 3 pixel densities is easier and far more accurate. For each asset, you need to create @1x, @2x and @3x files, so that they work on all iPhones and iPad devices.

If you’re unsure with what Artboard to start with, go with the iPhone 8 at 375 x 667. That will effectively target most iPhone users today. Assets-Designing1x

Points and Pixels

Developers work with point values, so it is important to understand the difference with pixels. When the iPhone was first introduced, the two units were the same: 1pt equals 1px. Then, when retina screens came along, 1pt became 2px. So think of points as the values in the original iPhone, and pixels as the real values depending on the pixel density (iPhone 4, 5, 6, 7, 8 = @2x, iPhone 8 Plus, iPhone X = @3x). To better understand the different between points and pixels, I highly recommend watching this video.

What To Export?

Let’s begin the topic with what should be an asset and what should be programmatically built in the code editor. As a rule of thumb, any vector that is more complex than a square should be rendered as an asset: icons, buttons and logos. Your goal should be to export as little as possible to allow maximum flexibility. Text, backgrounds, Navigation Bar, Tab Bar and even dialogs/cards shouldn’t be exported since they can be easily coded. Drop shadows, blurred effects can be rebuilt in code as well. Pictures and Avatars are part of the content, which just like text, are loaded from a set of data.

Slices

There are 2 ways to export assets: Make Exportable and Slice Tool. Slices are represented by a knife icon.

Make Exportable

This is the primary way to generate assets for implementation. It will create layer-specific assets that are transparent so that they can fit any background. To create an embedded slice, simply select any layer and click on Make Exportable on the bottom right of the Sketch UI. Make Exportable can also work on Artboards, exporting the entire screen with all its layers merged. An image preview will appear giving you the ability to drag the image out.

Slice Tool

The Slice Tool (S) will allow you to draw a zone from which you can generate an image exactly as you see it. In other words, it’ll Flatten every layer in that zone and create an image out of that. There two useful options attached to Slice layers: Trim and Background Color. Trim will remove all transparent pixels surrounding the object. You can set a Background color to replace the transparent pixels.

Scaling The Assets

Once you click Make Exportable for your asset, Sketch will automatically create a 1x scaled asset, which will work for 1x screens. So far, only old iPhones will use that. We’ll need to create assets for the newer iPhones as well, which has @2x and @3x screens. So, you need to create 2 more assets by clicking on the + button, scaling the asset to 2x and 3x.

Filenames

For Xcode to understand your assets’s pixel densities, you need to name the image files correctly. For 1x scale, it's just the name itself (asset.png). For 2x scale, you need to add a suffix of @2x (asset@2x.png). For 3x scale, you need to add @3x (asset@3x.png). Xcode will automatically merge all the resolutions together as one single asset.

PNG Format

Typically, you'll use PNG files for most of your assets in iOS. They're versatile, sharp and accept transparency. They do come at a cost: they’ll have a much bigger file size when a lot of colors are involved. That’s why they’re the perfect format for user interface assets.

JPG Format

JPG on the other hand are made for photos that don’t need transparency. Avatar, photography images and fully merged screens will be better off rendered as JPG because of its smaller file size. The bigger the resolution, the larger the file size, especially for PNG.

Vector Format in PDF for iOS

Since Xcode 6, you can use vector files in PDF format, which makes things a lot easier to manage. For one, you don't have to worry about managing multiple pixel densities. You’d only need a single file for each asset: @1x. From your scalable PDF asset, Xcode will automatically generate a version of @1x, @2x and @3x for you at build time.

PDF has weaknesses, although minor ones. You may have troubles with blurred shapes, effects and masking. However, from my experience, 90% of all user interface assets won’t encounter any issue since they’re mostly flat vectors. Still, it’s good to be aware of the issues for each image format.

SVG Format for Web

SVG is a format that is widely used for vectors, both for Web and Desktop. Most design tools accept that format and modern icons and logos always come in SVG. When you export in SVG, you have the flexibility to edit the code and animate in CSS or Javascript.

Export All

When you’re done slicing your document, you can decide to Export (Cmd Shift E) everything at once. This also gives you a full picture of all the slices you’ve create so far, across all Artboards and Pages.

Export Tricks

If you drag out any Layer or Group out of the Sketch window, it’ll automatically create a 1x PNG asset without the need to slice anything. If you want the slice to be in 2x or 3x, or another file format, just use Make Exportable before.

Export to Folder

If you name your Layer or Group folder/asset, it’ll automatically export to the folder name before the forward slash.

Max Width or Height

When you use Make Exportable, you can set a Max number for width or height. For example, 800w will export the asset to a maximum of 800 px wide.

Export Presets

Export Presets is a handy feature, there is some pre-define presets as:

Default option, exports at 1x
iOS, exports at 1x, 2x and 3x
Android to export for 1x, 1.5x, 2x, 3x and 4x. Or you can customize one. For example if you want to add 1.5x to your existing iOS presets, click on the presets icon, a window will pop-up, there you can add 1.5x.

Share your layer

You can also share your layers via Airdrop, Twitter, Facebook, and many more there are many apps that have extensions for sharing.

Export Icons

There are some different ways to export icons and we will show you a few. But first remember that the icon you will export has to have a square shape and not rounded corners, iOS automatically adds the rounded corners to the background of the icon. To export your icon you can either design the icon for all the different sizes that the different devices requires, it will take you more time yet you will end with pixel perfect results, there is a template in Sketch where you can find the different sizes for the App Icon.

You can also resize the icon when exporting, it will be fast but some of the icons could be little bit blurry.

You can also use apps like Prepo, you just drag and drop your icon into Prepo, and it will take care of the rest, exporting your icons in all the different sizes that Xcode requires, this is not a pixel perfect solution but is really handy if you are looking for a fast solution. Prepo has a iOS companion App which gives you a quick preview of your icon in you iOS device.

BACK TO

Working with Vector

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

ePub

Assets

Subtitles

Learn Sketch

Introduction to Sketch Basic Tools