On the left, my quick guides. On the right, Google’s Material guidelines

Using Sketch Symbols to Create Material Quick-Guides

Lloyd Humphreys
Oct 19, 2015 · 2 min read

To me, the best thing about Sketch is the speed with which I can design something. I’ve been working with Material recently, and Google have laid out some great guidelines.

I often find myself creating quick-boxes to snap align stuff to, especially when designing for Material. We’ve all done it — but after discussing with some friends, I figured I’d write this because none had thought of doing it quite like this. After more tinkering, I created some fancier guides and made them Symbols so that I could more quickly drop them into whatever I’m working on.

I never actually edit these Symbols, they’re purely guides.

I just draw on top of them, or drop them in once I’m done roughing to get the alignments right. When done, delete symbols (or drop them into a group and hide it). Quick, dirty, easy!

My most commonly used quick-guide Symbol is the list item. I simply offset each to create the proper height, then middle align everything to that symbol.

Offset cell heights

Below is an example of when I’ve given myself little hints as to how they should be used, reinforcing the correct metrics without having to reference back to the Material guidelines. I’m often jumping around between iOS, web, Android — this comes in very useful!

The red line is so I can quickly align text by holding alt+nudging.

Notes within a quick-guide: With these headings, the top margin is ignored if it’s the first thing on the page, and only taken into account if it’s separating two groups.

The numbers aren’t really necessary, but I like to have them in there as reminders for when I’m doing math in the Size/Position fields.

I’ve created a few more of these across various documents when I’m working on something I know I’ll need to reproduce fairly often. I’m not a big fan of creating Symbols for UI elements, because I know I’ll rip them apart, change/delete stuff and then realise later that I’ve screwed up a design on a different artboard — I’ve done that enough that I’ve lost confidence in using them as such. This isn’t perfect. It’s just a compromise so I can move quickly.

Download the Sketch file to take a closer look!

GoToAssist Product Blog

How we build GoToAssist

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store