Published on <a href="http://ift.tt/2pjXx50">| Prototyping: From UX to Front End &mdash; Medium</a> Jess Jiang <img alt="" src="http://ift.tt/2qNkVbk">
Here is a few tips on how I use Sketch and the amazing articles I came across while I learned Sketch.
<h3>Sketch Principles</h3>
I loosely follow a process called Component Based Design by <a href="http://ift.tt/2p6A8bh">Lewis+Humphreys</a> 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:
<a href="http://ift.tt/2kBKRUj">How we’re using Component Based Design</a>
<h3>1. The base level is the identity group which is composed of colors and typefaces.</h3>
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! <a href="http://ift.tt/2gR47fa">Jon Moore</a> created a great Sketch stylesheet tutorial that covers Stylesheets and how to set them up.
<a href="http://ift.tt/2jEQzry">Making Stylesheets in Sketch</a>
<h3>2. The elements and symbols level.</h3>
It is important to use symbols effectively. It is also super useful to use nested overrides. Below are a few articles from both <a href="http://ift.tt/2gR47fa">Jon Moore</a> and <a href="http://ift.tt/2oPS7yW">Lloyd Humphreys</a> on symbol naming conventions, organization, and techniques.
<ul>
<li><a href="http://ift.tt/2lT0gAi">A Better Way to Make Buttons in Sketch</a></li>
<li><a href="http://ift.tt/2jHF2bH">This is, without a doubt, the coolest Sketch technique you’ll see all day.</a></li>
<li><a href="http://ift.tt/2gIFxl9">Sketch symbols best practices (now that nested overrides are a thing)</a></li>
</ul>
<h3>3. Designing at the pages level.</h3>
<a href="http://ift.tt/2p6L9cq">Joel Beukelman</a> wrote a great tutorial on using the Auto Layout plugin when you’re designing in various screen sizes.
<a href="http://ift.tt/2qNBwvS">Autolayout in Sketch</a>
<h3>Document Setup</h3>
In my big working document, I usually have 5 main Sketch pages.
<ol>
<li>Designs: Main high-fidelity designs.</li>
<li>Guides: Low-fidelity wireframes guides to easily start a new design.</li>
<li>User Flow: Sitemap and user flow.</li>
<li>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.</li>
<li>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 <a href="http://ift.tt/2p6C3MN">Jørgen Eidem</a> on creating a slide deck in Sketch.</li>
</ol>
<a href="http://ift.tt/1R6eomO">Create and maintain a Slide Deck from within your Sketch file</a>
<h3>Essential Plugins</h3>
<ul>
<li><a href="http://ift.tt/2eftdqM">Magic Mirror:</a> You can fit your artboards in any perspective with this plugin.</li>
<li><a href="http://www.nudg.it">Nudg.it:</a> Change your big nudge increments.</li>
<li><a href="https://tinyfac.es/">Tinyfac.es:</a> Stock avatars you can insert into your designs.</li>
<li><a href="http://ift.tt/1pZWfMs">Craft:</a> Create pre-filled data information (e.g. names, headlines, addresses) and duplicate information with dynamic pre-filled data in specific rows and columns.</li>
<li><a href="http://ift.tt/2p6wePz">Sketch Measure:</a> Create redlines and dimensions for your developer in an HTML format (they won’t need to download anything).</li>
<li><a href="https://zeplin.io">Zeplin:</a> Does a similar thing to Sketch Measure but it’s saved in a program you download.</li>
<li><a href="http://ift.tt/2iqR1Gq">Auto Layout:</a> Create responsive designs.</li>
<li><a href="http://ift.tt/2pikrKK">Stark:</a> Check your designs against colorblindness.</li>
<li><a href="http://sketchrunner.com">Sketch Runner:</a> Insert commands directly from your keyboard for faster workflow.</li>
<li><a href="https://sketchfocus.com">Sketch Focus:</a> Have a to-do list right inside your Sketch document that links to your artboards!</li>
<li><a href="http://ift.tt/1MM00hy">Sketch Palettes:</a> Save and load your color palettes.</li>
</ul>
<h3>Thank you!</h3>
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 <a href="http://ift.tt/2p6DqeI">go to my website</a> or <a href="http://ift.tt/2qNvjA3">connect with me on Linkedin</a>.
<img src="http://ift.tt/2p6C4jP" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qNhPV0">Sketch Process for Beginners</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch Process for Beginners

Sketch Principles

Top Stories