One of the most frequent questions that I get asked is how to deliver assets to the engineering team. As we're dealing with an increased number of devices and resolutions, there is a steep learning curve attached to exporting assets for various Artboard resolutions, pixel densities and file formats. In this guide, I’m hoping to shed some light in this workflow.
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.
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.
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.
There are 2 ways to export assets: Make Exportable and Slice Tool. Slices are represented by a knife icon.
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.
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.
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.
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 (firstname.lastname@example.org). For 3x scale, you need to add @3x (email@example.com). Xcode will automatically merge all the resolutions together as one single asset.
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 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.
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.
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.
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.
If you name your Layer or Group folder/asset, it’ll automatically export to the folder name before the forward slash.
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 is a handy feature, there is some pre-define presets as:
You can also share your layers via Airdrop, Twitter, Facebook, and many more there are many apps that have extensions for sharing.
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.