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.
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.
Note: Remember to add in a background if you need it, otherwise it will be transparent by default.
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.
You can export your art work at any size you like. Just change the 1x to 2x, 3x or what ever size you need.
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.
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.
It also includes a preset for iOS (@2x and @3x) and for Android (1x, 1.5x, 2x, 3x, and 4x).
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.
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.
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.
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
UX / UI Designer – Tokyo, Japan.