• 20 hours
  • Hard

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 11/30/21

Reuse elements in Sketch with symbols

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.

Select the menu bar and then visit Layer > Create Symbol
Select the menu bar (what you see above) and then visit Layer > Create Symbol

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.

Toggle between page view and symbols view
Toggle between page view and symbols view

How to insert a symbol

Once we have done this, then inserting a symbol is easy.

  1. Use the navigation Insert > Symbol.

  2. Choose the symbol you wish to insert.

  3. 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:

Our symbols area
Our Symbols Page

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

Example of certificate of achievement
Example of certificate of achievement