Exporting Assets with Bounds in Sketch

A guide to exporting assets from Sketch while keeping the group mask intact

Quick Steps

Download the Sketch Export Assets Plugin (see Github). Select the bounds layer from the Layers List. Make Exportable and Create A Separate Slice Layer.

- A new slice layer will appear inside your Group the Layers List. This will be included in your export to ensure that your assets are all the same size. Select the Group that you want to export and, from the Plugins menu, find Sketch Export Assets to select the appropriate device for export.

Detailed Guide

Last week we released the 4.19.0 version of the Nudge Rewards app and, like Paul Bunyan, took an axe to split the Nudge Feed into two separate feeds; one showing you all of your Unread Nudges and one showing you all of your Completed Nudges. The only thing that came out a little weird was the height of the assets in the Nudge Feed state cards; we needed graphics that gave the user insight towards the current state of their Nudge Feed i.e Nudges waiting, all Nudges complete, and zero Nudges to show.

The thing here is, the Nudge Feed cards are sized automagically depending on the height/width of the image. For some reason, Sketch & Zeplin will only export the visible layers, and dismiss any invisible layers, even if they are a part of the same exportable group. We need to get the assets to export with the bounds; if the asset size is the same between illos’, the card will be the same size.

Notice the difference in height

So how do we do this? I never really had a need for exporting assets with bounds and that’s why I initially hit a roadblock. But if you are working on any illustrations or icons, you’ll run into this issue with your devs at some point. I tried to get smart with some workarounds, like turning the opacity to 0%, but Sketch is smarter than that.

How to do it

You might see a handful of plugins that export assets from Sketch for different devices. Any of these may reduce the steps involved in exporting, but it doesn’t solve the bounds problem that we are facing.

This plugin by Geert Wille allows you to export your assets while keeping the bounds intact.

Let’s begin

To begin, select your bounds layer from the Layers List.

Make Exportable and Create A Separate Slice Layer.

The slice will appear as a new layer inside your Group. This will be included in your export and ensure that your assets are all the same bounds.

When you’re ready to export them, navigate to the top menu bar, and under Plugins, you will find options for different devices. Simply select your device and a location to save your assets, and Sketch will do the rest.

And there you have it, folks. You should have a new folder, titled /assets located in the path you exported to. You can ZIP that folder up, and Slack it over to your teammates.

I’d like to thank the entire team for their efforts, you can read about our other endeavours at https://medium.com/hitech-nudge-rewards.