Sketch app has some pretty awesome things for UI designer work flow improvement, and the export tools are no exception.

By designing the app from the ground up to take into account the needs of UI designers, Sketch app has refined the process and make life so much easier for us designers.

The basics

If you are new to Sketch, basically you can export your whole artboard or create a slice to export a group or single layer.

To export your art board, select the name of it from the layer list in the left panel, or click the name at the top left of the art board itself. Tap Make Exportable (bottom right corner of Sketch window) and you will get some options.

make ui assets exportable

Sketch app export tool

Note: Remember to add in a background if you need it, otherwise it will be transparent by default.

Sketch app background app ui setting

To create a slice, simply select the group or object and hit Make Exportable. No options for background are available here though.

Pretty simple huh!

That’s not even the best bit about it.

Different sizes

You can export your art work at any size you like. Just change the 1x to 2x, 3x or what ever size you need.

Export icons and ui assets at different sizes

Or you can simply enter the width you wish to export at (example: 1024w or 1024h). Remember the ‘w’ or it will not export anything. This will scale up the other dimension so the object doesn’t warp or stretch.

export app ui assets and designs at different sizes with sketch

Multiple assets

By pressing the small plus (top right of Export panel), you can export multiple icons at different sizes. This is awesome for exporting assets for apps and websites.

export multiple app ui assets and designs at once with sketch app

Presets

It also includes a preset for iOS (@2x and @3x) and for Android (1x, 1.5x, 2x, 3x, and 4x).

ios and android assets can be exported at multiple sizes from your ui designs.

You can also create your own presets with what ever sizes you like.

Different file types.
Sketch offers a few different file types for export.
PNG, JPEG, TIFF, WEBP for bitmaps and PDF, EPS and SVG for vector graphics.

Share

Sketch offers a few different ways to share your assets directly from the app as well. It’s your standard fair sharing options but great if you want to short your designs off quick to someone else.

Sharing design assets is super easy with sketch

Path names

One good trick to note, when naming your files, you can include folder names directly into the art board name (e.g. foldername/filename). This allows you can always save your files in the base directory of your project and it will get sorted into the right folders automatically.

Create path names to save your app ui design assets into folders easier

The conclusion

Sketch has really focused on what’s really important for designers working in tech environments and removed a lot of the noise from the process.

It’s pretty awesome.

Thanks for reading

Alex Knight

UX / UI Designer – Tokyo, Japan.

www.agkdesigns.net