Sketch Tips Volume 1 — State Sprites
— Edit: As of November 8th, this workflow is moot. Sketch implemented nested symbol overrides in version 41. I, for one, am thrilled.
I think it’s always helpful to share processes with others, and although the following may not be earth-shattering or blow your mind, I’ve found them helpful and thought I’d share. This is volume 1, because maybe I’ll post more as time goes on. It’ll also be helpful for me if my ideas are bad, so that people out there can tell me the error of my ways and I can change my workflow. If I’m right, you can improve. If I’m wrong, then I can. We all win.
What is a Sprite?
Sprites have been around since the first days of computer graphics, were (and still are) heavily used in video games like Super Mario (or pretty much every SNES game) and are still used by companies like Google & Microsoft. They’re basically just a single image that contains all of the states of a character, logo, or icon set. Why? Because even though images can be compressed, combining all assets into a single image gives you smaller files sizes, and in the case of Google and Bing, fewer http requests, which results in faster load times.
Many web designers still use them today, but their implementation is most efficient when sizes are uniform (in my opinion), and updates are infrequent. I have used them a few times in web projects, but most of the time the added work is not worth the small benefit of load time, and they have to be involved early in the process in order to achieve the best return on time spent. Modern web and mobile development tools don’t make them as easy as just having a single asset, so I don’t know if they’re even used at all in mobile development, as the assets of an app are loaded on install, not on reload as on the web. I’ve never seen it, but maybe some of you have.
But what does this have to do with Sketch?
Sketch sucks at component and icon states.
That’s right, I said it.
It sucks.
Please, people at Bohemian coding, don’t come after me. I love your program, but honestly, you’ve got some gaps to fill when it comes to making dynamic content.
Nested icons are powerful but cumbersome. As of this writing, you can’t use the overrides panel to replace nested symbols, colors, fonts, or anything but images and text values. It’s better than it once was, yes, but still a huge pain in the ass when you’re dealing with huge files.
F0r example, let’s say you’re trying to create something as simple as the default bottom tab bar in iOS. How do you make it? Is it one symbol? 3? None? 15?!?!? For a common implementation of 3 tabs, you have to make 3 icon symbols, with an active and inactive state, and use those in another symbol for the overall bottom bar. Here’s what that looks like:
That’s 5 symbols (since all of them are the same in this example) for one component. If the icons were all different as they would be in a real app, then you’d be dealing with 9 symbols for 3 tabs, 12 for 4 tabs, 15 for 5 tabs… etc. This method is just asking for symbol bloat.
Here’s where I use state sprites in my sketch workflow:
Instead of creating 2 symbols for each state of an icon, I create 1 symbol for all of the icons in my bottom tab, and put them in a uniform grid of bounding boxes. This means that even if I have 200 bottom tab items (not recommended), it will always be only 1 symbol. Always.
Then, I create the 2 states of my bottom tab, ‘selected’ and ‘deselected’. I could merge these into 1 symbol, like I did above, but making it 2 symbols makes the text overrides easier to handle.
Finally, I create 2 instances of those symbols, and align them over each other, selected on top (keeping it sans-background color is preferable). After you align the 2 symbols, mask the selected state, group them together, and you’re done.
Instead of 9+ symbols, you’ll always have no more than 3. You don’t have to worry about overriding symbols, all you have to do is move the mask when you need to show a different state of the element.
You can use this technique for anything like switches, text fields, hovers, loading, etc. I wouldn’t say that you should put all of you icons into a single sprite, but you could if you wanted to.
Anyways, that’s how I handle states. How do you guys do it? Let me know in the comments below. I’d love to find a better way if there is one. Thanks for reading!
