In this tutorial you’ll use a mobile shopping cart design to practice using two very important features in 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 on Create 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 Exclude Text Value from Symbols for each of your text layers inside your Symbols. This way you can edit 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.
{excerpt}
Read More