Design Systems, part 7: Forms

Design + Sketch App — Medium | Christopher Deane

An ongoing series where we build a design system in Sketch called Dezin.

An hour of updating shared styles, creating a couple of icon symbols and making a common set of form field components.

View the tutorial

Download the Sketch file

If you visit the YouTube page for the above tutorial, you can download the Sketch file from a link in the description.

What’s covered in part 7

1. 0:21 Introduction, create a new branch in Abstract
2. 1:19 Update button art-board, create a rectangle for out first button then create new shared styles to be used in our form fields
3. 10:50 Input text field, more shared text styles, resizing settings then demo it’s nested symbol
4. 21:44 Text area field then demo
5. 23:45 Select field, arrow symbols, shared style updates then demo
6. 40:18 Radio buttons and check-boxes
7. 53:26 Create a sign up form to demo the form components
8. 56:53 Outro, commit and merge branch into master in Abstract

Watch the series

Here’s the rest of the series where I’ll be adding new parts every 1–2 weeks:

For updates:

Follow me here at Medium, Twitter and YouTube.

Design Systems, part 7: Forms was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.