System design basics: How to create symbols in Sketch, for simple, fast and consistent design

Andrew Couldwell, Digital Designer and Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 5m)
    • 1. Introduction

      1:40
    • 2. An introduction to symbols

      5:49
    • 3. Creating an input and all its states

      7:36
    • 4. Symbol dimensions are important

      6:21
    • 5. Responsive symbols

      9:52
    • 6. Creating checkboxes & radio buttons

      11:04
    • 7. A UX tip, and dealing with form errors

      5:14
    • 8. Creating buttons and all their states

      9:29
    • 9. Sharing & syncing your symbols

      6:43
    • 10. Have your team setup your Library

      1:24
    • 11. Fin

      0:17
11 students are watching this class

Project Description

By the end of this class, you should (very) quickly and simply be able to create a form like the one below, using the symbols you create. Switching seamlessly between different types and states of inputs and buttons.

a21d4a09

Test test test

Stress testing your symbols as you create them is an important part of the process. Don't presume your symbols work — always try breaking them and discover where you're going wrong through trial and error.

- -

Design exercise

Follow along with, and re-create the symbols as your teacher does throughout the class. By the end, you will have a comprehensive set of form inputs and buttons.

Using the symbols you create throughout this class:

  1. Insert a symbol on a clean canvas.
  2. Duplicate the symbol multiple times to create a form (similar to above).
  3. Use the symbol overrides to change each symbols' values.
  4. Change each symbol to a different input type.
  5. Test the different states for each input type.
  6. Check that your symbol overrides remain intact as you switch between similar symbols.
  7. Change the size of all of your symbols to check they don't break. If they do, you will need to go back and edit that symbols' responsive settings.

Later in the class, once you've created a Library of your symbols (see step 9):

  1. Test your symbols by inserting them in a new Sketch file. Ideally, insert them into existing project files, using real product scenarios and data.
  2. Test your changes sync (when you edit and save changes to symbols in your master design system Sketch file).

Be the hero!

If applicable: Wow your teammates by sharing your Library of design system components with them. 

  • Have your team follow the process in step 10 to add your Library.
  • Remember, you should save your Library Sketch file somewhere accessible by your team, where they will also receive any updates (e.g. Dropbox). 
  • Gain huge respect, as your team's design process is significantly sped up, and everyone designs consistently using the same design system components.
  • Your engineering team will also love you for this!

- -

I hope you enjoyed the class :)

Student Projects

project card
Adriano Reyes
2 comments
project card
Jeroen N.
project card
Lucas Juhel