A Better Way to Make Buttons in Sketch
Buttons like you’ve never seen them before! Probably.
Download this demo file to follow along, or check out UX Power Tools to get the entire UI kit, constructed with all kinds of smart symbols just like this one.
Sketch symbols are great because they provide one central place to manage components. Buttons are some of the easiest components to create, but like text fields, they have a lot of different states, colors, and styles. So it usually means creating a bunch of different symbols.
The Old Way
Here’s what my button symbols looked like about three months ago:
Nice and clean! I used this approach for about 12 months and never had any issues. It’s a fine way to manage button symbols, and they cover all of the states I’ll need in my designs:
Primary, Secondary, White
Default, Hover, Pressed, Disabled
Strictly speaking this isn’t bad. But this is going to be a bit of a headache down the road:
- If I want to add a green button, I’ll need three new symbols…one to cover each button state.
- If I want a white button with blue text, I’ll need three new symbols.
- If I want to get rid of the border on all of my buttons, I’ll need to update it on every button symbol I’ve created.
- Ten symbols for just one component?…really?…is that necessary?
A New Way
I’ll save the theatrics and just show you what we’re creating first. My UI kit no longer has 10+ button symbols.
Full disclosure: This one symbol is a bit misleading because it does require we build other symbols that we’ll use as pieces to construct our button. But these symbol pieces are used in tons of other components throughout my UI kit, so it ends up being a positive tradeoff.
When we’re finished, you can create a rainbow of buttons in all kinds of states…all from a single button symbol. Check it out:
There are three nested symbols in this button symbol:
- The Button Text (important): We use this to change what the button says.
- The Button Icon (not as important): We can turn this on if the button is in a “loading” state.
- The Button Container (the most important): This gives us the shape, color, and state.
The Button Text
I’ve written about this a little bit before in the article below, but I’ll recap things again for posterity:
Warning: More GIFs than the peanut butter aisle.medium.com
“Why is the text a symbol?” she asked, emphatically.
So you don’t have to use symbols for your text, but in doing so, you’re adding immense flexibility to your button.
As a quick reminder, Sketch allows you to swap nested symbols in and out to protect you from the dreaded Detach from Symbol action. The simplest (and most common) use case is for icons: Swap an empty checkbox symbol for one that is checked. Easy-peasy.
I’m effectively doing the exact same thing, but with text. I created 10 text styles in Sketch, then used those text styles to create a unique symbol for each one.
The Golden Rule of Symbol Swapping
Sketch only allows you to swap symbols with other symbols that are the exact same size. That is, if your symbol artboards are even 1px bigger or smaller than each other, they will NOT appear in your symbol override dropdown (see below). So I had to ensure that all of my text symbol artboards above were exactly the same height and width.
Because the text of my button is a nested symbol, I just choose one of my other text symbols from the dropdown of my symbol instance if I ever want my text to be a different color. HOW EASY IS THAT?!
Admittedly, I went a little bit overboard with my text symbols by having all kinds of different colors. But at minimum, you’ll probably want a light text symbol and a dark text symbol, which probably amounts to white text and primary brand color text.
The Button Icon
This is probably the least important symbol — feel free to leave it out if you want — but I’ve found it useful in a few projects. It’s the notion of illustrating a response after a button is clicked.
The basic idea around “master symbols” like this button is that you’re effectively stacking all of the potential component states into a single symbol, then turning the nested symbols inside of it on or off depending on the state that you’re trying to show off.
The icon symbol layer in our master button symbol is the “placeholder” that represents our button loading state (see above).
Frankly, there’s not much to this layer. I just have an icon symbol with that little loading shape, then I floated it in the center of the button. Not sure what “floating” means? Read this brilliant article by Peter Nowell. He doesn’t know this, but he taught me everything I know:
Watch how easy it is:
If your mouth is agape wondering how I have the option to change my icon color, check out this fantastic article by Francesco Bertocci:
I always wanted to create a single version of an icon and apply different colors to, or tint it, to indicate its state…medium.com
I ruthlessly stole the technique right out of his fingers. Thanks, man!
The Button Container
The button container is the most important part of the entire symbol… So if you skip this section, you’ll fail the exam, fail out of school, and probably end up juggling tennis balls for money on the Santa Monica Pier.
Depending on how many shapes you want, you can make all kinds of different container symbols. Here are some that I created:
Luckily, each of these symbols is functionally identical. The only difference is how they’re masked (in a perfect world, we could have mask symbols too, but we can’t always get everything we want, now can we?).
I use these container symbols on things like multi select pills/chips too, so I like having several different shapes available:
- Hard: 0px border radius for sharp corners
- Soft rounded: Usually 2px-10px border radius for soft corners
- Rounded: 100% border radius for a nice rounded rectangle shape. These are great for chips and tags.
- Left rounded: This is so I can put buttons together in a button group. This serves as the rounded button on the left side of the group.
- Right rounded: this is just the same as above, but just for the right side.
As I said, you only need as many containers as button shapes you think you might use. That is, if you’ll never use rounded buttons, then don’t worry about creating a rounded container.
Building a Container
Each container is built with two nested symbols and a mask:
- State Symbol: Is this container being hovered? Pressed? Focused?
- Color Symbol: What color is this container?
- Mask: What shape is this container?
States are the top-most symbol in the container, and using techniques like transparency and blending modes, can affect the container to make it appear to be hovered, focused, pressed, or disabled.
Here’s how they look when they’re toggled on our button symbol:
Again, because states are symbols, and each state symbol is the exact same size, I can swap them out in the symbol override dropdown.
Speaking of symbol overrides…
Make symbol sets (all states, all colors, all text) slightly different widths from each other. This will ensure that they don’t show up in your symbol overrides dropdown together. You don’t want to accidentally choose “Color/Red” for the button state, when you meant to pick “State/Hover.”
Lastly, the color layer. It’s basically just a symbol made out of a box with a fill color. Fascinating:
I like to make a bunch of these symbols in different colors:
These are the colors that give my button its lovely hue. Not much else to say!
You don’t need a bunch of different symbols for each component. Just give yourself the necessary pieces, and built it once. Then use those same pieces to build other things! The majority of my symbol page is just pieces, not full components themselves. But using all of these pieces, I can build some really sophisticated components.
Client: Make it all blue. *three weeks later* No, not THAT blue!medium.com
Warning: More GIFs than the peanut butter aisle.medium.com