{"id":2997,"date":"2016-06-23T13:08:44","date_gmt":"2016-06-23T13:08:44","guid":{"rendered":"http:\/\/www.ckl.io\/?p=2997"},"modified":"2022-07-01T17:56:17","modified_gmt":"2022-07-01T17:56:17","slug":"exporting-ui-assets-with-sketch","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/exporting-ui-assets-with-sketch\/","title":{"rendered":"Exporting UI assets with Sketch: simplifying your workflow"},"content":{"rendered":"

If you’re either a UI designer or a developer, you’ve probably heard of Sketch in the past years \u2013 or maybe you’re even using it. Sketch has become a very popular software and broadly used by UI designers. In this article, I’ll show some steps of my workflow when creating and exporting assets to mobile or web applications.<\/p>\n

I hope that this article will be useful for designers starting to use Sketch or developers who need to export assets from a Sketch file. If you’re already experienced with Sketch, you’ll probably be familiar with most of the things I’ll be presenting, but you can still get some good insights from this article.<\/p>\n

<\/p>\n

 <\/p>\n

What is Sketch and why it got so popular<\/h2>\n

For a long time, UI Designers have been struggling with different tools to create mockups. Photoshop, the most popular software for building interfaces so far, is a photo edition software. It was not created to handle all the specificities of building a user interface. To use it as a tool to develop digital interfaces, you’ll need to re-configure it (eg.: you don’t want to measure your interface with inches), and you’ll be constantly doing some workarounds\/using a few of its hundreds of features to build your interfaces. Adobe even tried<\/a> adding some UI design features to Photoshop, but it is still a huge and memory-consuming software focused on photo edition. Adobe Illustrator has a similar problem: it’s a software focused on vector graphics and printed media.<\/p>\n

Meanwhile, Sketch was designed to build user interfaces, and only that. Want to edit a picture? Well, you’ll have some very basic tools here. On the other hand, you’ll be able to design for multiple screen sizes and densities in a very easy way. You’ll also be able to use symbols and text styles, helping in the consistency of the designed interfaces.<\/p>\n

Some Basic Tips<\/h2>\n

Before starting, I’ll list some basic tips and shortcuts for people who need to get some quick information from elements inside a Sketch file.<\/p>\n

Direct select an element<\/h3>\n

Hold command (\u2318) and click an element. This will directly select an element and avoid the need to go inside each folder with a double click (or to find it in the layer list).<\/p>\n

\"direct-select\"
Hold command (\u2318) to direct select an element.<\/figcaption><\/figure>\n

Getting element sizes and font styles<\/h3>\n

Select an element and its properties will show up.<\/p>\n

\"specs\"
Select an element and its properties will show up in the inspector.<\/figcaption><\/figure>\n

Getting distances between elements<\/h3>\n

Select the base element to get distances from, then hold option (\u2325) and hover your mouse over other elements or the artboard to get the distances between them.<\/p>\n

\"measure\"
Checking distances between elements.<\/figcaption><\/figure>\n

You can find a complete list of Sketch shortcuts here<\/a>.<\/p>\n

Creating, Configuring and Exporting Assets<\/h2>\n

From now on, I’ll be using the icon bar below as an example for the assets exporting. We’ll export these four icons, making sure the assets will have a square aspect ratio, transparent background and each icon will have three pixel densities (1x, 2x<\/em> and 3x<\/em>).<\/p>\n

If you want to follow the next steps, you can download the sample file here<\/a>.<\/p>\n

\"Exportable
Icons Designed by Freepik and distributed by Flaticon.<\/figcaption><\/figure>\n

Creating Exportable Assets<\/h3>\n

On Sketch, you can create assets in two distinct ways: by transforming an element into an exportable element<\/strong> or by using slices<\/strong>. Both have the same interface when defining size, name and format, but they have a couple of differences: exportable elements<\/strong> will be added to the layer itself (shape, text, folder, etc.) and will be identified with a knife icon in the layer list; slices<\/strong>, however,  will create a separate layer and be shown as a dashed outline square with a knife icon.<\/p>\n

\"layers-list\"
How to identify a slice and an exportable element in the layer list.<\/figcaption><\/figure>\n

To define an exportable element<\/strong>, click on a layer or folder to select it, and then click the “+” icon aside of “Make exportable” at the bottom right of the screen.<\/p>\n

\"create-exportable\"
Creating an exportable element from a folder.<\/figcaption><\/figure>\n

To define a slice<\/strong>, use the slice tool (Insert > Slice<\/em> or the shortcut “S<\/em>” key). Then drag and drop to draw the slice area.<\/p>\n

\"slice\"
Creating a slice is as simple as selecting the slice tool and dragging the slice area.<\/figcaption><\/figure>\n

To transform an exportable element<\/strong> into a slice<\/strong>, just click the slice icon in the export interface.<\/p>\n

\"create_slice\"<\/p>\n

Exportable elements<\/strong> and slices<\/strong> have a few characteristics that make them different from each other. I’ll list some of them below.<\/p>\n

Main attributes of an exportable<\/strong> element<\/strong>:<\/p>\n