QuickApp.gif

Proactive design can save you lots of time in the future and Sketch is making it easier and easier to set up your controls and components to be re-used over and over throughout your designs.

Recently I have been looking at ways to improve the way we, as a design team, can design faster, control consistency, and work better with the engineers.

By building a set of flexible symbols that can not only be shared between the design team for faster design creation, but looks and reacts the same way as the components used by the developers, we can design fast, build quicker and spend less time worried about small things like consistency in margins and color, and focus on the deeper experience.

This post is looking at how to make complex symbols that can be re-used throughout your projects. These symbols need to be adaptable and fit into all sorts of situations for what ever your project requires.

Let’s take a look.

Symbol basics. 

Creating symbols in Sketch is easy. Make some shapes and objects, group them, right click and create a symbol. Now you can use that over and over.

Screen Shot 2017-06-21 at 11.10.57 AM.png

Screen Shot 2017-06-21 at 11.11.19 AM.png

Screen Shot 2017-06-21 at 12.17.24 PM.png

Symbols are generally document specific, but you can grab a symbol from another document and simply copy and paste it into the symbol page of another document. Sweet.

I have been building a stand alone symbol document for each product to hold the symbols. these documents are available to the whole design team. Think of it like a UI kit just for our products. You can grab bits and pieces of what ever you need to build your designs.

Naming conventions

One thing to consider when starting out creating your components, is to understand how the engineers name their components. This will make things much easier during hand over in the future.

Screen Shot 2017-06-21 at 12.18.03 PM.png     Screen Shot 2017-06-21 at 12.18.18 PM.png

Overrides

The key to making symbols amazing is the ability to override the content. Setting up a symbol with your main objects, titles, content areas, images is great. But when you repeat it 10 times, it’s not really so useful, unless each item can have its own content and characteristics.

In the right panel you will find overrides for any object Sketch can find that might want to be changed. This is automatically done by Sketch.

Screen Shot 2017-06-21 at 11.11.57 AM.png

Screen Shot 2017-06-21 at 11.12.32 AM.png

Auto layouts

Double click your symbol to view the original. Here you can make edits that will effect all instances of that symbol. Changing the master symbol will update all symbols in the document. Keep in mind though, it won’t update symbols that have been copied out of the document and used elsewhere.

Screen Shot 2017-06-21 at 11.14.20 AM.png

Next step is to make your symbols grow and fit into where they need to be.

Using auto layout has recently been upgraded to be super easy to use. The resizing panel allows you to set constraints on each item, so when resizing, they know how to act.

Screen Shot 2017-06-21 at 11.14.34 AM.png

This example will pin the left icon to the left side of the artboard, and by fixing the width and height, it will not allow the icon to change size no matter how you resize the instance.

iPadResize.gif

No fixed width and your icon will stretch to the percentage it was originally at.

Editable icons.

There are 2 options here, you could simply use overrides as we saw earlier. Just save all your icons into a folder and grab switch them in an out as needed.

The second option is to add your icons as symbols and use them as nested symbols which we will look at next. This option is better if you wish to keep all your icons inside your document as well.

Nested symbols

If you create a symbol that is the same size as another symbol, you can switch them out via the override panel. This allows you to create incredibly flexible objects.

Screen Shot 2017-06-21 at 11.41.05 AM.png

Note: the smaller white squares are icon symbols but the name is hidden as they are to small.

Using nested symbols allows you to control what changes can be made to your objects to avoid people using the control in ways that were not intended or outside your style guidelines.

If made well, basically anyone can jump into sketch and start building out pages that could be used in a final product.

Nested.gif

Conclusion

Mastering these few controls, you will be able to make amazingly flexible and useful symbols that can be used over and over throughout your designs.

On top of that, making these symbols match up with how the developers components work, you wont need to spend time doing UI design review and can focus on the UX rather than if the margins and font sizes are correct. Simply, you will be able to design fast, with more consistency while reducing handover and build times later.

For a bit of further reading about taking full advantage of modular designs, I highly recommend reading Atomic Design Methodology by Brad Frost.

Thanks to icons8.com for the icons.

Thanks for reading.

Alex Knight

UX / UI Designer, Tokyo, Japan.

www.agkdesigns.net

 

Advertisements