Sketch Workflow — 8 point Soft Grids

I wanted to share my Sketch workflow designing on an 8 point soft grid. If you are not familiar with this concept please read Bryn Jackson’s great article on 8pt Grids first.

I have a fairly unique workflow, adding color coded guides right inside my artwork. This process was heavily inspired by the Material Design Guidelines

Defining the Metrics

Each multiple of 8 is color coded with 50% opacity

Set your BigNudge

No more Shift+Nudge + Back + Back

Getting Started

Start by defining the height, draw a rectangle 72pt high x 100% wide. And select your 72pt Layer Style. I name the layer with the measurement that I am calling attention to. So 72h, h for High, because the width will be fluid when this thing is built.

  • Group this layer and name it ‘Guides’.
  • Then Group it again and lets call it ‘List Element’.

We can now duplicate this layer and drag it outside of the guides group to create the actual base of the element. Your layers should look something like this. ( Don’t forget to remove the layer style before changing the background color. )

Define 16pt of padding on each side of the element.

Add some text, aligned to our left padding and vertically centered.

Create a List Element Text style while you are at it.

Add a bottom border, rather than drawing a 1pt rectangle I am going to duplicate the base layer and add inner shadow to define the border.

Border Settings

PRO TIP — Shape Nudging — Select a shape and use CMD+Nudge or Shift+CMD+Nudge to edit the dimensions of an element. Shape nudging also follows your custom nudge settings. ( note — shift+up/down within an input does not respect your custom nudge settings)

The reason for duplicating the base is because I want the border to be indented with our padding. A quick way to do this with hot keys is Shift+Nudge to the right twice (16pt) and then Shift+CMD+Nudge back to the left 4 times (32pt)

Icon Positioning

The dimension of the icon will be 24×24 so draw 24pt guide. I always name my icon guides ‘icon location’.

and an icon, I tend to use Font Awesome or Material Design Icon fonts for quick mockups. The beauty of the new nested symbols is that we can temporarily use an icon font, create a symbol, and swap it out later on with our real icons. Just be sure that your new icon symbol has a 24pt bounding box.

Finish up by creating a symbol for the entire List Element. Im sure we will have variations of this elements. So name it List Element / Single Line. This will nest the symbol within the symbols palette.

The Handoff


A source file can be found here.

Article Rating
Creative Entrepreneurs
My name is Reza Barauntu. I am passionate about entrepreneurship, technology, web design, art, and music. I design and develop experiences that make people's lives simpler. Follow Creative Entrepreneur on Instagram @founders.guides
Notify of
Inline Feedbacks
View all comments




Nine Facts of Fundraising You Need To Know

“Hey Brett, I’m going to be on vacation for the next couple of weeks. I’ll pick up the diligence when I get back,” Tucker...

11 Reasons Why Most Entrepreneurs Fail

CREATTIV.NET - Entrepreneurs starting new businesses is what drives the economy, innovation, and job creation. However, about half of those new businesses fail in the...

At the Movies 2019

We’re bringing movies to life this summer! Experience your favorite films in a whole new way this July, only at Life.Church and Church Online....

How To Use Search Personas To Improve Your SEO

In this guide, we’ll show you how to create search personas to ensure your SEO strategy helps you connect with the right people.

7 Reasons to Use Illustrations on Your Website (And Examples of How to Do It)

Are you having a hard time finding photos for your website? The solution might be a simple one: use illustrations. This post will show you how and when they make sense to use.
0 0 vote
Article Rating
Would love your thoughts, please comment.x