Be a wizard! Automatically resize and relabel buttons with padding sizes like CSS.
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!
Created by UPX Technologies in May, 2018. Visit the website: www.upx.com
Contributors
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
Read a medium post we wrote about the plugin!
Look at how hard it is to change a button label and keep it with the correct size and proportions today.
First, download the plugin here and install it:
Download the plugin via github
Open the file inside your computer
Double click the file
That's it!
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.
View how it works here:
Tip: You can select more than one symbol at the same time, it will ask new label for each in a separated prompt.
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.
Here's quick example on how to hide padding-layers inside our sample file, it's easy!
You can create your own set of buttons using our simple structure to ensure the plugin will work, or just get our sketch file and use our template buttons.
padding-left
text
padding-right
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.
Created by UPX Technologies.
Github: https://github.com/upxlabs
Credits: 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 the authors.
An idea from Caio Calderari
Community contributions are essential for keeping this plugin great. So if you find any problems, feel free to open an issue.
Be sure to provide at least the following information on the issue:
- Environment (e.g. Skecth v5.0)
- Operating System (e.g. iOS 10)
- Plugin version (e.g. 3.0.0)
Use some of our image sources to share this plugin on your website or social networks!
https://github.com/upxlabs/magic-buttons-sketch-plugin/tree/master/documentation-images
The MIT License (MIT)
Copyright (c) 2018 UPX Technologies