How I set up my Sketch buttons

Sketch symbols are a topic near and dear to my heart. Ever since I started using Sketch, and specifically symbols, I have always toyed with different setups for buttons. I have now found something that works really well for me that I wanted to share!

*** Spoiler Alert: This is nothing novel or new, you may have seen it before. I've just found it's what works for me and wanted to share. ***

See attachments for more detail!

I start with a set of symbols that will create the ultimate button symbol. I create all of my states and set those as layer styles. In the example there's five symbols, Static, Hover, Pressed, Focus, and Disabled.

After that, I drop the first "static" symbol (meaning the button state that looks like a button without any interaction) into a NEW symbol, which is the real button symbol. Confusing?

The beauty of this is that I only have one button symbol for a primary button, and I can change the state of that button to be whatever style I want! This method is something I use for all of my inputs and anything that could have a different state, but is the same element.

So is this how you set up your buttons in Sketch? Do you think it's a good idea? Bad idea? Let me know your thoughts!

Focus Lab + Odi
Global B2B brand experts.
Get in touch

More by Focus Lab + Odi

View profile