Design + Sketch App — Medium | Bunin

Sketch Tutorials

Learn how to move from prototype to final design and be more positive when it comes to changing things that are already done.

This is part of Frames for Sketch — series of short tutorials about best practices we used to make Frames Kit truly useful tool. We’ll cover on how you can make every change less painful and generate unlimited variations for your designs on the example of a simple button.

If you are not interesting in reading all this words feel free to download the freebie right here — Dynamic Buttons Tutorial

If you’re anything like me, a large part of your time is spent on wireframes that always need to be discussed before moving to high fidelity design. We all know how important this phase is, in creating websites and applications, it’s decisive time for selecting the right elements and setting their position on the chosen layout.

At this point, most designers already imagine how those fancy rounded buttons will be looking here and there after their godlike touch, how beautiful will this picture look with a little bit of blur in the hero section, and so on. But when it comes to reality, finalizing individual details may bring in different hypotheses and disputes about elements shapes, colors, images, lyrics, icons and everything else that matter to our customers, users and ourselves.

A lot of designers often get so much attached to the chosen design style that every new change can become more and more painful for them to make.

But why should it be painful, why can’t it be more fun?

Well, it can be. By using combinations of simple sketch techniques you can achieve the desired flexibility when working with wireframes and layouts, as well as creating an unlimited number of design variations in no time, and stay sane and cool for the rest of the day. 😎

What should be done?

Sketch app allows to create customizable components and reuse them an infinite amount of time. In order them to work properly, first of all you need to do this simple steps to prepare all the elements before moving on:

1. Define a set of all UI elements that will be used across your project such as buttons, icons, text, avatar, mockups etc. Try to think of those elements as something that can be coded and used outside of your sketch file.
2. Create a separate symbol for each instance of visual parameters such as color, shape or state. (For example, if your project uses 16 different colors, you need to create a symbol for each of them).
3. Find the right balance between the number of parameters and UI elements to which they are distributed. (Working with the overrides dropdown menu can be quite tedious sometimes, so it’s important to maintain a balance between the number of parameters and the convenience of interacting with them).

It seems like a lot of work, well perhaps it is but this approach rewards you in the long run and allows you to save hundreds of hours setting up new design file when you have all ingredients always ready to be cooked.

Lets have a simple example

We will consider creating one of these components using the example of a simple button, I hope that you will be able to use this technique for your future projects. First of all you need to download this demo file. 👇

How to make it work?

To make our button useful, and we could swap its parameters, we need to put all the right child symbols into our single button. So let’s take a look at these symbols:

• Text — Set up symbol width to fit the size of the button, and set it height to stay fixed in the middle of the button. To change the text color, you should create the desired number of colors for this element.
• Shape — This is also a parent symbol which includes state and color symbols inside of him. Use it to swap between rounded and basic shapes and apply different colors and states, such as hover, focus or pressed.
• Icon — By default the icon is hidden, you can display it and remove the text of the button in order to create an icon button. Feel free to change its color if needed, and be sure to set it width and height to stay fixed upon resizing. Use it to make a floating action buttons or simple social buttons.

Now you can generate an almost unlimited variation of this buttons by simply adding more shapes, colors, icons and maybe some more states for your buttons in Sketch.

And that’s all. Hope you find it useful.

Before you leave, don’t forget to:

• Download the freebie above!
• Help us spread the word about Frames for Sketch and get 25% off. Just email us / tweet us / DM us the link to your post and we’ll get back to you as soon as possible.
• Follow Robowolf on Twitter for more awesome freebies and tutorials.

How to change your design on the fly in no time with Sketch was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.