Create Adaptive Buttons Using Combined Shapes In Sketch

Note: With Sketch 58, this method is no longer needed. Check out my new article on how to easily create adaptive buttons using Sketch’s Smart Layout.

The problem we’re solving, shapes don’t respond to override text.

If you’ve ever tried to create buttons within a Sketch symbol, you quickly realized the limitations. Solid buttons and outlined buttons do not respond to the length of the override text. You likely had to make tradeoffs, creating fixed-width buttons or having to get creative with button text to make it fit within the fixed-width button.

This is the first of two posts showing different methods for creating adaptive buttons that can be nested in other symbols.

Introducing the Combined Shape Method

Using the power of combined shapes, this tutorial will show you how to create a button and button groups that adapt to the override text length. These buttons can be used on their own and can be nested in other symbols.

This tutorial shows how to create adaptable buttons that can be nested into symbols.

⬇︎ Download Sketch File

This method can be used to create multiple button style combinations, we’ll be focusing on creating a solid button and text-only button…