Published on | Prototyping: From UX to Front End — Medium Caio Calderari

A little bit about how and why we created our first Sketch Plugin to resize buttons in a easy and fast way. It’s like magic! 🎩

First things first.
👋 Hello, how are you doing today my designer friend?

The Problem

Have you ever found yourself in that same situation? *view gif*

Example of a traditional approach to resize the button after you relabel it.

You have a button symbol, you need to change it’s label, and after you do it by using a symbol override text field you just have to manually resize the button to maintain the same padding sizes in every corner/side. Doing that takes a bit of time and in most cases you might even miss a pixel or two depending on how fast you want to accomplish the task, making your buttons a bit “inconsistent” or oversized. If you are more worried about pixel perfection you might even consider measuring both button sides to discover the padding left first and then resize the total button size to the perfect size to get a perfect padding resizing in all sides. But, omg, that was just a single button! Now multiply that by 100. Boring and time consuming!

Well, we wanted to fix it, in a fast and simple way. But even more, we wanted to accomplish something similar to a CSS behavior, but inside sketch, where we could build our button symbols defining a consistent padding size that maintains itself after we change the text label, similar to what happens in HTML if we have a button and change just the text inside it. That was our goal!

We know that there are some similar plugins out there (some even buggy), but none of them seemed to do what we actually wanted, we even tried Paddy which is great but depending on how you want to structure your symbols and nested symbols it gets messy and tricky, so we decided to build one that is perfect for us and might be useful for you as well. We hope so!

🎉 We introduce you
Magic Buttons Sketch Plugin v.01 (beta) 🎩

Created at UPX Technologies in May, 2018. Visite the website: www.upx.com

This is a free sketch plugin developed to make buttons management easier inside Sketch App. This plugin’s goal is to make buttons a little bit smart by automatically keeping it’s proportions based on the padding sizes and text elements inside it, also giving users ability to change it’s label text with a keyboard command.

Relabel buttons with a keyboard command (cmd + shift + m) 🎩 — (works as override of a text layer inside a symbol)
Keep button size according to text size + padding elements defined by you
Works similar to the CSS padding concept

How it works

Be a wizard! 🎩
Automatically resize and relabel buttons with padding sizes like CSS.

Just select the symbol you want to replace the label and resize, press cmd + shift + m, type in the new text and that’s it!

The Magic Buttons Sketch plugin let you automatically change the label of any symbol button by pressing keyboard keys (cmd + shift + m) 🎩 , and also resize the button according to the new text added keeping it’s padding proportions like in CSS. It’s magical!

How to install

Easy, very easy! Just download it: https://github.com/upxlabs/magic-buttons-sketch-plugin/raw/master/magic-buttons-sketch-plugin-v01.zip

After your download is done:
1 — Open it

2 — Unzip it

3 — Double click the sketch file to install

And that’s it! (Just like any other sketch plugin) — An example bellow:

Inside Sketch:

1 — First select the symbol you want to relabel and press a keyboard command (cmd + shift + m) 🎩 . It just works with symbols!

2 — The prompt will open, type in the new desired label and hit enter.

3 — Magical! The button is going to be automatically resized to fit the new text with padding settings preserved as you defined in the symbol.

That’s the magic!

Buttons Template

We created a sample sketch file with some examples of buttons ready to use. You can download it to test or use for real, it’s free.

You can also create your own set of buttons based on our methodology.

If you need help, please read our documentation here: https://github.com/upxlabs/magic-buttons-sketch-plugin

The sample sketch file is included inside the plugin file! And it’s free!

Example of how to simply show/hide the padding layers.

How we structured the plugin

Simply create a new button and make sure there are 3 elements inside it:

1 — padding-left (must be a symbol) — symbol name must be exatly that, lowercase only

padding-left

2 — text element (Can’t be a symbol) — you can setup as you like, no special requirements

text

3 — padding-right (must be a symbol) — symbol name must be exatly that, lowercase only

padding-right

Symbol Button final structure:

padding-left + text + padding-right

TIP: For the text layer, make sure it’s aligned to the place where you want it to be, centered, left or right. Pin it to the corners if you want it to stick to the left or right and make sure to check the text alignment/position. If you get lost, download our sample files to get some ideas.
Artboard/Symbol size can be any in height or width, and background layers, border layers, color layers, icon layers and others inside the button symbol won’t be affected.
The size of padding-left and padding-right can be determined by you and can be different for each element. Magic Buttons Plugin will do the math for you. It will consider padding-left + text size + padding-right and always keep your buttons with the right size.

How we made it

We first had the need. After, we had the courage to spend time on it, even not knowing how to actually do it. So we imagined if it was possible to create something that would make our tasks to be accomplished faster and easier.

It was our first time trying to build a Sketch Plugin, so it was tricky and scary.

We made the plugin by searching on the web how to build a sketch plugin, we spent a couple or hours trying to figure out how it should work and by trial and error making the code piece by piece until it finally worked. It was without a doubt a very challenging project, even thought it’s a very small one that took us just a few days. The result looks cool and we are very happy with it! We hope to keep improving it as needed. And you are welcome to help us!

To be honest, the official documentation available to build sketch plugins is very poor to non existent, also hard to understand, so I advise you to find information on the web, even that’s not so easy and fast, but that was our way to go. Unfortunately!

A good post that helped me a lot was this one written by Mike Mariano:

https://medium.com/@marianomike/the-beginners-guide-to-writing-sketch-plugins-part-1-28a5e3f01c68
He wrote about 7 posts talking about some basic ways to create a plugin. Even he helped me with some questions via Twitter and sent me some interesting links. Thanks Mike!

I advise you to try reaching out to people on twitter or anywhere, maybe some of the creators from other plugins might help you. I also encourage you to view our humble code and try understanding it, it’s very detailed in comments about what each line does.

Luckily a sketch plugin can be created basically using Javascript so we could use our team of front-end developers to help get things done, also we found some bits of code on other plugins available at Github so we could find answers and grab a piece here and there to make our idea work. Again that not the best way, but it might work.

This plugin was developed as open source code. Part of the code was based on the plugin called Relabel Button plugin by Ken Moore, and the rest of it was coded by us at:

UPX Technologies
www.upx.com

The plugin is still in it’s first version and as I said it’s our first attempt creating something like that, so if you find something wrong, please be patient and let us know, we gonna try to fix it as soon as possible.

We hope you enjoy it! and that it can help you with your design workflow!

Made in 🇧🇷

Let us know what you think, leave a comment bellow and share it with your friends!

Download the plugin:

https://github.com/upxlabs/magic-buttons-sketch-plugin/raw/master/magic-buttons-sketch-plugin-v01.zip

👋 bye!

Follow me on Medium Caio Calderari
Follow me on Twitter
Follow me on Facebook
Subscribe to my Youtube Channel U&I Design

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Magic Buttons Sketch Plugin — First release! 🎉 was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Magic Buttons Sketch Plugin — First release!

Cool stuff, every week

More Articles