Pro Sketch Techniques for Shared Libraries

How to raise the quality of your libraries to a professional level

As your product grows and matures, your design team will be faced with new challenges. New people need to design new screens using new components. Conventions become rules. Novices become experts. And your team’s Sketch skills have to keep up. In this article, we’ll explore a few techniques that will help you raise the quality of your Sketch files to a professional level.

When you collaborate with several designers, especially when creating a shared library, some extra effort is needed to ensure that

• Symbols are fast and easy to use
• Shared styles remain manageable
• Common pitfalls are avoided

The following is a list of techniques I've collected over the years working with shared Sketch libraries.

Keep Symbols Manageable

1. Each shape layer should have a shared style

Manage the color of central shape layers using shared styles. That is, every shape layer (rectangles, combined shapes, vector shapes, …) should be attached to a shared style that should determine its color and other styles. If you need to change the appearance of such layers, change one of them and then update its shared style. This style will then be applied to all layers that share that style. Layers of symbols that use such shared styles can be easily overridden in symbol instances.

Generally, don’t use the global or document colors in the color picker as those are not overridable and can’t be changed centrally after the fact. The latter is also true for the new Tint feature, which is why I stick to the method explained above.

Fig. 1 The shared layer menu
 

 

Fig. 2 Overriding a layer’s color with a shared fill style

Another useful trick is to have a transparent shared layer fill style. This makes it possible to hide layers in a symbol instance.

2. Each text layer should have a shared style

Text layers similar to shape layers should use shared styles.

A word on coloring text: I recommend to not manage text color through shared text styles as this leads to a multiplication of shared styles (one for each style in each color, e. g. H1 red, H1 black, H2 red, H2 black, …). Instead, use a boolean operation to color your text layers. That way, the color of text can be overridden in the symbol’s instances. Here is how to do that:

1. Create a rectangle shape
2. Intersect it with your text layer
3. Give the resulting Combined Shape a shared layer style and you will be able to override the text color in the symbol’s instances.

Sadly, this method removes the ability to override the text style as well. If you really need to be able to override both text color and style in a symbol’s instance, you’ll need to create another symbol that contains only the text layer (with a shared text style, auto-width, Artboard sized to fit, layout horizontal left to right), and intersect that with a tint layer. The resulting Combined Shape gets a shared layer style for color, and voila, you can override both color and text style in the symbol’s instance (see fig. 3).

Fig. 3 A button symbol in which every layer can be overridden

Make symbols easy and fast to use

3. Name your layers

A proper layer name will help your fellow designer understand the structure and meaning of your file much better. In libraries this is especially important because the names you give to your layers will be displayed in the override menu of your symbols. E. g., the name Rectangle is meaningless here, whereas Background tells your designer-friends that this is the place to override the style of a background layer.

Fig. 4 This symbol will be hard to use for your fellow designers – the layers aren’t named properly and nothing but the label can be overridden, making this symbol rather inflexible.
 

Fig. 5 This symbol has properly named layers and will be easy to use.


4. Set up widget states right way

Let’s say you want to create a text input symbol in variants like empty, focussed, error, and so on. Do not create several symbols for label, border, text, error message, etc., that you would combine to different variants. This is a lot of work and comes with the risk of making small positioning and sizing mistakes. Also, if you want to change something about size or positioning, you’ll likely have to touch a lot of symbols. I call this the Free-hand approach.

Fig. 6 The free-hand approach – don’t do this

Instead, create a base symbol for text input with overrides that can take on the style of any of the desired variants. That is, you’d make the border color overridable, the text color, background color, etc. Use this master symbol as the only layer in your variants and override its variants in the desired way. Then manage the overrides such that only the necessary fields can be overridden to make the symbol easy to use. I call this the Master symbol approach (see fig. 7).

Fig. 7 The Master-symbol approach – do this
 

5. Be deliberate about managing overrides

When you select the artboard of a symbol, the inspector will show the “Manage overrides”-panel. Here you can turn overrides on and off. Turn off everything that is unlikely to be overridden on a regular basis. For instance, this button symbol only allows the text of the label to be overridden.

Fig. 8 The Manage Overrides panel. This button symbol is super easy to use because it only allows the text label to be overridden.

This makes the symbol dead-easy to use, at the cost of flexibility. Should a designer need to override some other property of the button, they can always detach the symbol. If you adhere to the principle above (Set up widget states the right way), this will give them the master symbol where they can override every property.

6. Order layers from top left to bottom right

The order of fields in the overrides panel is determined by the order of the respective layers in the master symbol. To make it easy to use, the layers should be arranged in a logical way. Plugins like Sketch Automate can help with that.

Fig. 9 Sketch Automate can help with ordering layers.

Avoid common pitfalls

7. Don’t use borders

In their default settings, borders are played on sub-pixel positions. That leads to several problems: