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

    • 2. An introduction to symbols

    • 3. Creating an input and all its states

    • 4. Symbol dimensions are important

    • 5. Responsive symbols

    • 6. Creating checkboxes & radio buttons

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

    • 8. Creating buttons and all their states

    • 9. Sharing & syncing your symbols

    • 10. Have your team setup your Library

    • 11. Fin

12 students are watching this class

About This Class

In this class you will graduate from the basics of creating symbols in Sketch, through to creating a very powerful set of design system components, to enable incredibly quick, simple and consistent design.

Your teacher, who is an acclaimed system designer, will walk you through how to create symbols for common web and product design components like form inputs and buttons — covering their different states for more comprehensive designs, and how to efficiently name and organise it all. You will also learn how easy it is to sync those design components across different Sketch files, and share them with a team of designers.

You can learn more about the value and real-world application of the skills learned in this class in this system design case study, by this classes teacher.

- -

About Your Teacher

Andrew is an award-winning digital designer and front-end web developer. His career has seen him freelance on projects for the likes of Red Bull, NASA, Foursquare and Nike. In 2014, he relocated to New York City to lead the design and creative direction of Adobe Portfolio at Behance. In 2016, he pioneered digital brand guidelines and lead the design and documentation of two design systems at WeWork. His work with system design has been published in a book and cited in articles and websites.

In 2018, Andrew happily returned to freelance life, living with his lovely wife (and fellow designer/developer), Meagan Fisher and their two cats in sunny Florida.

You can learn more about Andrew and view his design work on his portfolio site, or follow him on Medium, Behance, Dribbble and Twitter.