Published on | Prototyping: From UX to Front End — Medium Jess Jiang

Here is a few tips on how I use Sketch and the amazing articles I came across while I learned Sketch.

Sketch Principles

I loosely follow a process called Component Based Design by Lewis+Humphreys which follows Atomic Design. Essentially, it is breaking down your design group by group to make life easier for you when you work on your project. I usually partion out my project into 3 levels:

How we’re using Component Based Design

1. The base level is the identity group which is composed of colors and typefaces.

This is handy because you can have a shared style for any element that has a fill and a stroke and a shared text style for any text. Once you change the color or font in the shared style on an element, you can then apply it everywhere! Jon Moore created a great Sketch stylesheet tutorial that covers Stylesheets and how to set them up.

Making Stylesheets in Sketch

2. The elements and symbols level.

It is important to use symbols effectively. It is also super useful to use nested overrides. Below are a few articles from both Jon Moore and Lloyd Humphreys on symbol naming conventions, organization, and techniques.

3. Designing at the pages level.

Joel Beukelman wrote a great tutorial on using the Auto Layout plugin when you’re designing in various screen sizes.

Autolayout in Sketch

Document Setup

In my big working document, I usually have 5 main Sketch pages.

Designs: Main high-fidelity designs.
Guides: Low-fidelity wireframes guides to easily start a new design.
User Flow: Sitemap and user flow.
Symbols: This page is automatically created when you create a symbol. I group similar symbols together so it is easy to find them when I need them.
Powerpoint: For projects that are always changing and need PDF presentations, I create artboards that are the same dimensions as full-screen size and design the PDF right inside Sketch. I then export out these pages as PDFs and combine them in Acrobat. Here is a tutorial by Jørgen Eidem on creating a slide deck in Sketch.

Create and maintain a Slide Deck from within your Sketch file

Essential Plugins

Thank you!

I hope this was helpful! Please leave a comment below as I’d love to hear your thoughts on your own design process. If you’d like to check out some of my work, you can go to my website or connect with me on Linkedin.

Sketch Process for Beginners was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch Process for Beginners

Cool stuff, every week

More Articles