Perfect Buttons in Sketch

The buttons in our Sketch Library at Doggos.com are made up of four parts — two shape layers, a color symbol, and text. From these deceptively simple pieces, we can create any variation of Button that our interface demands. Here is how we do it.

The Anatomy Lesson

I won’t really touch on organizing your Sketch project in this article, but I will say this: grouping like-symbols into pages and importing them as a library (instead of saving them to your project directly) is the way. As your project grows, this strategy will really speed up your workflow.

But if you’re just trying to follow along and build a button, you can ignore my comments on Pages and do all your work in one place.

Getting Started

This tutorial assumes some familiarity with Sketch. If you’re new to the app, you may want to keep the documentation handy.

1. Create a new Artboard in the size of your button. I recommend using the minimum or default size required by your CSS, this way when you insert your button into a project, it’ll paste perfectly. Be precise.
2. Create a New Page in your document called Color and add some color swatches. For the purpose of this tutorial you’ll need at least two.

Swatches can be any shape or size.

It may seem overly-complicated to need all these separate symbols to make one button, but the composition of these symbols is where the Sketch Magic™ happens.

After you’ve added some colors, go back to your button (which by the way, you could put onto its own page called Button) and insert your Color symbol by going to Insert / Symbol and finding Color in your document or library.

Resize the Color swatch until it’s the same size as your button, then Apply a Mask to the bottom layer of the button by clicking the “Mask” icon. If things are working correctly, you should now be able to go to your Color symbol in the overrides menu and replace it with another color from your library.

Zing!

If the color of your button has changed, you’re halfway finished!

It’s handy to set your default button color to the same default as your code to minimize overrides. In general, designers should be very diligent when working with Symbols, constantly iterating to keep your libraries up-to-date, useful and evergreen. A well-organized library delivers the same toolbox to the designers on your team as the components in your app for developers.

Color-friendly Borders

People keep telling me that color-friendly borders aren’t supported in Sketch, but here’s how we do them on buttons:

1. Create a Transparent Rectangle on top of your color layer that is exactly the same size as your button.
2. Apply an Inside Border in a medium shade of gray — we use #C0C0C0;
3. Adjust Opacity of the border layer to 25%.
4. Set the Border to Multiply

Text & Resizing

I don’t know why Sketch 51.2 doesn’t support Text Overrides. I fucked around with it for like, an hour on a Wednesday, and as far as I can tell, best practice is probably to create a Text Style.

Text Styles

When you turn your text into a Text Style, you’ll notice that its layer changes color in the sidebar, and suddenly you can save some options that’ll be accessible anywhere — like a symbol. Symbols and their properties have semantic meaning to Sketch, and because Text Libraries can be imported to a project like Symbol Libraries, we can infer that Sketch probably treats them differently for a reason.

1. Create a Text Style by inserting some text into a separate symbol near your Button.
2. Insert your Text Symbol into your button.

You’ll set the properties for your new Text Style — like color, font family, and line height — on the right sidebar. Annoyingly, while you can access these text libraries from anywhere , you can’t actually override them in your project like you can most symbols.

This method relies on creating a new button and text symbol for every variation in your design.

This may seem tedious at first, but we find it is much easier to create a new button when a new variation of text is needed than it is to try and override multiple layers of text in one shared symbol (another popular method for achieving color-friendly text.) These buttons more closely resemble the structure of your code and are easier to reason about — and maybe one day, overriding color will just …work.

Resizing

The last piece of a well-designed Symbol is the ability for it to resize itself and its contents when placed inside of your project. Ideally, you should be able to Insert your Button anywhere you need a button in your design and push it and pull it around as needed without it breaking.

If you’ve never used resizing constraints before, they’re located in the right sidebar in Sketch. Basically, resizing constraints work by allowing you to “pin” something to the edges of its container. You might compare the behavior of text pinned to the top of a button an absolutet positioned element set to set to top: 0; inside a relative container. Say you wanted your text to always ride to the left, you would stick it to the left-hand side of your box. In our case, we want the text to be perfectly centered in the button always.

1. For Centered Text, pin your text to the left and right edges of your button.
2. Set Text Height to Fixed to keep your text from breaking into rows when the viewport is too small.

Of course, if you want your text to wrap naturally, leave the height alone.

We tend to leave a bit of padding to the left and right of the button to keep the text from hitting the edge if the viewport gets small.

You can now enjoy access to your Button everywhere in your project!

🐶

👋🏼 Thanks for reading. You can also find me on Instagram