Dynamic buttons with symbols and Sketch

So there I was sitting next to my friend who was responsible for the new layout of our website. I overheard a discussion about a Sketch plugin called Dynamic Button which he thought was great but also had a little drawback. When used as a symbol you couldn't resize the button. What made it kind of pointless to him. Why build a button you can't change easily throughout your whole design?

My only contact with Sketch was through Zeplin. Since I'm a Frontend Developer I was curious how to extend Sketch through it's API. As it turned out for writting a plugin you need to know CocoaScript, "[...] a bridge that lets you use Objective-C/Cocoa code from an external script written in JavaScript." Awesome! Since I already knew JavaScript I thought: "This shouldn't be that hard." Boy, was I wrong.

Current Workflow

Writting the actual plugin was the easy part. Figuring out how to control Sketch through the API, a whole lot of another beast. The API itself isn't that well documented and I found myself reading a lot of class dumps which Aby Nimbalkar luckily provides in his repo. This step was a lot of trial and error. Mostly error but in the end I got a first draft of the plugin running. What I wanted to do was provide an easier way to deal with buttons as symbols inside of Sketch. Since the current workflow in our graphics department involved a lot of manual editing and updating.

Creating a simple button

For a simple button you would create a text layer and a rectangle shape, align it to your taste and convert it to a symbol. Add it to your artboard, change the text and you would need to manual resize the symbol. Now you realize the Sketch wraps your text in a strange way when you input a longer text for the button. You set the text to "Pin to corners" only to find out that Sketch centers your text inside the rectangle. After some googling you find out that the side you want to pin the text to needs lesser padding than the opposing site. And don't you forget about the space between your text and the button. At some point you wonder if there is now better solution. Again after some googling you might stumble upon Dynamic Button. Which is great but has the drawback that it doesn't ease the way of editing when converted to a symbol.

The solution

First of all I want to thank Aby Nimbalkar for providing the Sketch header files and fuggfuggfugg for Dynamic Button which I used to build my own solution on top. So what does the new workflow looks like? Well, let's take a look:

First we use the plugin to create a new symbol. It will ask you for the padding of each side of the button. With that information it creates a new symbol which consists of a text layer and a rectangle layer. You'll may notice that the text layer has a weird name. Let me explain it real quick:

Each number represents the padding of the button starting at the top and then going clockwise. So the first value is for the top padding, second value for the right padding and so on. The name of the text layer for the example above would be 15:30:15:30. The plugin takes care of that for you and uses the name of the text layer to update the dimensions of your button. If you want to change the space between the text and the left side of the button to 50px you would change the name of the layer as follows 15:30:15:50. Then choose Update dimensions from the Dynamic Symbol Button plugins menu. The same logic applies to changing the font size or any other operation that would need the dimensions to be updated. Keep that in mind when changing your button. Now that you finished the layout of your button click Return to instance. The only thing left is to resize your symbol. For that choose Resize symbol from the same menu item. Et voilà your button is automagically resized and uses the updated styles.

Final thoughs

You can download the plugin via the Sketch Toolbox. Search for "Dynamic Symbol Button" or from my GitHub page.

What the plugin does is determining the size of your inputed text recalculates the new dimension for your symbol. To work in the correct way you need to follow two, simple rules:

  1. The symbol needs some kind of a background layer
  2. The text layer name needs to follow the pattern top:right:bottom:left. Else the recalculation of the dimensions will fail

So, yeah the plugin is far from perfect (but what is?). It's the first iteration and I will update and improve the handling of it in the future. As always there are many different ways to achieve a certain goal. I don't have extensive knowledge of Sketch. But I do hope this plugin makes working with buttons and symbols a little bit easier for you. If you have any suggestions or are struggling with using this plugin send me a message. Drop me a line on Twitter or open an issue on GitHub. I'm happy to help!