Custom Templates and Reusable Symbol Libraries in Sketch
Tips to speed up your Sketch workflow
If you often use the same interface elements, canvas size or grid settings for multiple projects, this tutorial will teach you how to create custom templates and libraries of reusable symbols in Sketch 3.
Reusable blank artboards and grid templates
If you often use the same size artboards within a project or for different projects, creating a custom template with the artboard already set up can save you a little bit of time. If you have a favorite grid setting that you reguarly use, you can include that too. Here's how to create custom templates for Sketch:
Launch Sketch and create a regular new document. Use the Artboard tool to draw a new artboard onto the canvas and define it's dimensions in the properties panel.
Name your artboard in the layers panel:
If you have a preferred grid that you like to use, go to the layout settings dialog and set up your grid
When you are happy with your document setup that you'd like to make reusable, go to File > Save as Template to name your template and make it available for all future projects when you create a new document from template:
How to create a library of reusable UI elements
Symbols are a feature in Sketch that allow you to reuse graphics multiple times within a document. When changes are made to one instance of the symbol, other instances of the symbol are also automatically updated. The templates and symbols features can be combined to create a reusable library of symbols available for all future projects.
Let's create a couple of button symbols first. Draw a 200 x 50 pixels rectangle on the canvas with a solid fill and no borders:
To give the button some subtle styling, add a small 10% black inner shadow style with a -2 Y value and 0 blur.
Place a new text layer in the center of the button and type in 'Solid Button'
Duplicate the rectangle and text layers, then select the duplicated rectangle, remove its fill and add a 2px border. The text layer will appear invisible because it is still white so first change its fill color and then updated the text to 'Outlined Button':
You now have two different buttons, select each one and go to Layer > Create Symbol:
With one of the newly created symbols selected, click its name in the properties panel and select Organize Symbols from the contextual menu. In the dialog that appears you can name your two button symbols:
Insert a new instance of your solid button symbol onto the canvas next to the original. Double click one of the symbols to edit it, highlight the text layer and check the box that says 'Exclude Text Value from Symbol'. You can now update the text without affecting other instances of the button:
If you make any changes to the button other than the text, you will notice that they also appear automatically in other instances of the symbol.
You can now repeat this process for any other additional elements that you want to include in your UI library.
Select all of the objects that you have on the canvas and delete them. Then finally, save your template for future use!
This same process can be used for any sort of desktop, mobile, web or print template that you'd like to create and have handy for future use. If you have the patience you could even create a library of your favorite icons. Nested symbols are feature that Bohemian Coding are working on
, there is a workaround way to do it now, but it is currently a little unstable which is why I didn't mention it in the article.