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.
http://spec.fm/specifics/8-pt-grid
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
I have a set of Shared Layer styles that I paste into all of my next sketch documents. I use the shared styles to create color coded guides.
Each multiple of 8 is color coded with 50% opacity
Set your BigNudge
If you are using a grid size other than 10pt you can change your BigNudge value (shift + arrow) to the grid size. I built a little app for this called Nudg.it — www.nudg.it
Getting Started
For this tutorial we are going to create some list elements. Lets start with a single line element.
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.
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
Lets add an optional secondary icon.
The dimension of the icon will be 24x24 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
As an added bonus, when handing off your work to your dev team with Zeplin.io you can make the guides visible. And your developer will be able to see your exact intent of each measurements. This can help them to understand which dimensions are fixed and which ones might be fluid, or constrained.
Thanks
I hope you found this tutorial useful, please let me know what you think.
A source file can be found here.
