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

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 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 class's teacher.

- -

About Your Teacher

Andrew is the author of Laying the Foundations — a book about design systems. is an award-winning web 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.

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

• Introduction
• An introduction to symbols
• Creating an input and all its states
• Symbol dimensions are important
• Responsive symbols
• Creating checkboxes & radio buttons
• A UX tip, and dealing with form errors
• Creating buttons and all their states
• Sharing & syncing your symbols
• Have your team setup your Library
• Fin