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 Videos (1h 5m)
    • Introduction

      1:40
    • An introduction to symbols

      5:49
    • Creating an input and all its states

      7:36
    • Symbol dimensions are important

      6:21
    • Responsive symbols

      9:52
    • Creating checkboxes & radio buttons

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

      5:14
    • Creating buttons and all their states

      9:29
    • Sharing & syncing your symbols

      6:43
    • Have your team setup your Library

      1:24
    • Fin

      0:17
11 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.

20 of 21 students recommendSee All

Great Class! :) I have a better understand on how to created my own design system in sketch.
Brandon Powell

Graphic Designer

Very simple and effective way to learn and apply Sketch symbols, nested symbols and responsive constraints on a basic form design styleguide.
Excellent instruction. Good pacing, and easy to follow along.

180

Students

--

Projects

Andrew Couldwell

Digital Designer and Web Developer

Andrew is a British web designer and front-end web developer. He has lead the design and creative direction of products and design systems in New York City at Behance/Adobe and WeWork, freelanced on projects for NASA, Red Bull and Nike, and founded and curates an award-winning, international surf art and photography website called Club of the Waves. 

See full profile