Faster UI Design with Symbols and Shared Styles in Sketch

In this tutorial you’ll use a mobile shopping cart design to practice using two very important featuresin Sketch. We’ll be paying close attention to: “Symbols” and “Shared styles”.

Sketch Symbols

Symbols allow you to duplicate elements of your design and reuse them.Any changes you make to the contents of a symbol will be reflected across all instances of that symbol.

To create one, with a cluster of objects selected, click onCreate Symbol:

There are two important tips for efficient use of symbols. First, be sure that your symbols are uncomplicated. Let’s take the example of my header symbol:

You’ll see the background, the status bar, the title label and the icons, all shown here in their subfolders within the header-bar symbol:

The progress bar won’t be included within the symbol because its state changes on every screen.

The second thing is to check the option ExcludeTextValue from Symbols for each of your text layers inside your Symbols. This way you canedit the text for each of the duplicated symbols on an individual basis.

Sketch Shared Styles

The “Shared styles” feature is as straight forward as “Symbols”. It’s useful to change the appearance of multiple elements, across various symbols and objects, in a single click. Let’s take a look at the header and the progress bar again. Here you can see I’ve changed the background of the progress bar, but it doesn’t look great against the header background:

To avoid to changing every single progress bar background manually, you can set a shared style. Here we’re applying the header-bg style which I prepared earlier, by clicking Create New Shared Style when the header background was selected:

We then apply the same for every layer which needs to reflect the same style. Now when you edit the progress bar background, the background on all elements with the shared style will be modified:

Conclusion

With these two features in your toolkit, designing your next app UI in Sketch should be much less time consuming!

Thank you for reading and don’t hesitate to ask any question in the comments below.