How to create great design stencils for a design system?

A few weeks ago, I was honored to conducted a design training workshop to teach 10 designers and 2 developers from 7 design firms national wide our design language, SAP Fiori for iOS. One of the most positive feedback from the participants was that they were impressed by the ease of use of the sketch design stencils that we have created for the design language. We studied a lot of existing UI kit and stencils to figure out the best way to produce our own one. I would like to share my experience and the process of creating the stencils.

Before I start, I want to address that this article is not about how to create a design system. If you are curious about how to set up a design system, you probably want to stop here and come back when you have the design system figured out. This article is all about creating design stencils in Sketch.

Overview

Tool: Sketch
Effort: 2 designer * 2–3 weeks (That will depend on the scope of your stencils)
Our design stencils:
SAP Fiori for iOS Design Stencils

First step: Set up color styles and text styles

Don’t rush to create symbols without setting up the font styles and color styles! We have made that mistake and it became such a pain when we were informed that our color palette would update!

Example of shared styles

Examine your design system to see how each color is used, is it used for filling or for outline or both. Create color styles by using the “Create shared style” function in sketch inspector. If a color can be used for filling and outline (for example, a filled button v.s. a outlined button), create one style for filling and another style for the outline. Don’t worry about text colors when creating the color styles since they will be handled in text styles separately.

You can see we have made text styles for each size with each alignment in each text color we have defined. At the beginning, we only created text styles for left-aligned text by giving the name of the iOS system font styles. Then the problem came when you need center align or right align texts somewhere in the app. What’s worse, when you hit the update button for the font styles after changing the alignment, everything went off!!! Another problem is that some designers may not be familiar with iOS system font styles, they found a hard time remembering Body is 17pt with regular weight. Therefore, we ended up with such a tremendous text styles list and name each style by indicating the font size, alignment, style name and the color. So that the text styles will be arranged in the order of font sizes in the text style list.

That’s a lot of tedious work already! I know! But believe me, this work totally worth the effort when you find how easy and fast to maintain your design stencils and to apply a brand color to your design!

Create Symbols

Symbols are the secret of producing a successful design stencils. Here are a few tips that I found them helpful to make a design stencils with great user experience.

  • Provide clear labels with a good order to the layers in the overrides
  • Use nested symbols to boost the flexibility of UI component
  • Avoid creating nested symbols with more than 2 levels
  • Create symbol variations for UI controls on different interaction status
  • Organize symbols by using a good naming convention
  • Make your symbols adaptive

After creating the symbols, there is a few housekeeping work you need to do. Rename the layers to make sure they can be easily identified in the Overrides, avoid using the real content and “Title copy 1” and other vague labels. Make sure the order of the layers is corresponding to the elements in the symbol. The basic rules have arranged the layer according to the position of elements, top to bottom, left to right. The order of the layers in Overrides is linked with the real layers within the symbol. Lock the layer which you don’t want it to appear in the Overrides.

Nested symbols are powerful when a UI component is built with several elements to create variations. The benefit of having nested symbols is that you can easily replace the UI element symbol within the nested symbol with another similar UI element symbol or turn off the UI element symbol when it’s not needed. In the following example, you can see I created a symbol for a selected value button as well as a unselected value button. And use the instance of both symbols in a nested symbol called Property Cell. By doing that, I can easily change the Property Cell according to my needs. And the best thing here is that the override will stay if the updated symbol carries the same structure.

Editing a nested symbol instance by using Overrides

Nested symbols are awesome! However, I don’t recommend you to go further than 2 levels, which are symbols within a symbol. The reason is firstly when you export the sketch file to prototyping tools, they probably don’t recognize nested symbols with more than 2 levels. If that happens, all the overrides will stop working. But 2 levels is safe so far. The second reason is that Sketch can get confused by so many levels of the nested symbol, although they said you can go as deep as you can into the nested symbols.

3 symbols created for Text Fields on different status

A lot of time, one symbol cannot solve the problem of variations. I suggest providing the most frequently used symbol variations for one UI component, as well as for UI controls on different status. The latter one becomes useful when the designers need to create the step by step workflow screen like typing or editing on a screen. With all different status of UI controls ready in symbols, designers can switch the symbol into another status without recreating the screen.

Symbols are organized by groups in the symbol library

You probably have already noticed that all the symbols in my design stencils are organized into groups and subgroups under stencil library. That does not only keep your file clean but also help Sketch recognize which symbols are similar to surface up in the Overrides. The trick is to use “/“ in the symbol names to create group or subgroup. In another word, one “/“ creates a hierarchy. For example, the Text Field is organized under Controls group, and Text Field can be a subgroup for the different status. The symbol of Text Field in a typing status has the name “Controls / Text Field / Typing”.

When creating the symbols, don’t forget to make them adaptive when the UI components need to be used on different device sizes or orientations. To achieve that, apply constraints to layers of the symbols. You can learn more about how to use the tools in Sketch to set constraints here. Having adaptive symbols will also save a lot of effort when you need to create design stencils for different screen size. Unfortunately, there is one thing that Sketch is not able to do. That is when the margin changes on different screen size, you still need to create new symbols to adapt to the screen. For example, I made all the controls created for iPhone adaptive, they will keep the 16pt margin instead of switching into 48pt when it’s iPad size.

Organize the stencils by pages

Some UI kit/ stencils place everything on one page. That’s one way to organize the stencils. I would prefer organize the symbol instance by types and create an individual page for each type. That helps the creators to maintain the file easier. Plus, that helps the designers relate the UI components in the design system. And pages handle the variations of one UI components.

Provide some assembled screen examples

We provided some screen examples by assembling the UI components so that it shows the context of where UI components are applied. And designers found it quite handy and useful for them to start their own design.

At last, I would like to say that creating a great design stencil is not an easy work. And you, as a creator, are going to experience hundreds of rounds of update when you found all kinds of bug reported by the designers who are using it. And you may get a new request from the designers to add some variations to the design stencils. But ultimately, this work will be paid off when you see how the design stencils streamline the design process and how much time the design stencils save for the designer to design align with the design system. I am glad that we have spent time on creating the design stencils so that other designers who can benefit from it by focusing more on creating innovative workflow and great user experience without worrying about how they are going to create the screens. That’s the value of having these design stencils. :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store