The DRY Principle
Developers who write code as a profession know that copy and pasting code is a bad idea. If you need a chunk of code in ten places and copy and paste it, then later on you have ten changes to make if you want to update that chunk of code.
Developers will instead make sure that this code appears once and they "refactor" their code so that any place that needs to use this logic is getting it from one place. The principle is called "Don't Repeat Yourself" or DRY.
DRY Menu Bars
Let's think about our menu bars. We know our BabySittr prototype is eight screens, and six of these use the menu bar. If we copy and paste our menu bar into those 6 artboards, it will be nice and quick!
However, if later on we decide to change one of our icons, we will have to do that change in six places. The good news is that it is possible to create a version of these icons called a Symbol, and then we can re-use that symbol (i.e. insert that symbol) everywhere we need it.
Any changing later can be done in one place. And all (six) artboards that use this symbol will update instantly. This is a really powerful feature!
How to create a symbol
Simply select some layers in your artboard that you would like to be the reusable elements. We can select the menu bar.
Then, we use the Navigation to select Layer > Create Symbol.
View Symbols
You can toggle between your page view (a page is a collection of artboards and you will have one page called Page 1 by default) and symbols view.
How to insert a symbol
Once we have done this, then inserting a symbol is easy.
Use the navigation Insert > Symbol.
Choose the symbol you wish to insert.
Drag the symbol to the appropriate part of the artboard.
Our menus = 2 symbols
Because we sometimes have our Booking menu selected and sometimes have the Search menu item selected, I have created two symbols (one for the menu with Booking selected with icon text orange and another for the menu with Search selected icon and text in orange).
My symbols page looks like this:
We can choose one or other symbol easily now (depending on what the prototype screen requires)!
Additional Resources
The Sketch file for this lesson.
If you want to adopt an even more elegant approach to showing menus differently (like orange, in our case) when selected, then you could use a combination of symbols and over-rides (warning: advanced Sketch lesson, so this is more of a resource for once you have finished this course)!
More on the SVG format
