Dynamic Buttons in Sketch

One of the most tedious things about designing interfaces for a living is creating buttons. For example, you might start with one like this:

Basic Button

Soon, you’ll be making variants on it, like these:

Button Variants

When I use Photoshop for this work, each variant requires manually adjusting the left and right padding as the text expands or contracts. It’s very time consuming.

However, with Alexander Kudymov’s Dynamic Button plugin for Sketch, this process is made much, much easier. The padding around the button label is defined in the layer name for that text object. In these examples, the layer name for each text label is “28:80:40:80,” indicating that the button shape should have 28 pixels of padding at the top, 80 pixels on the right, 40 pixels on the bottom, and another 80 pixels at the left (I used over-sized dimensions for illustration purposes). Once the layer name is set, I can type any text I like, then hit the key combination command-J, and the button shape adjusts accordingly and instantly.

Watch this video to see it in action.

This is one of the many reasons I think Sketch is so terrific. Kudmov’s plugin is free and available here.