Spacing Tips & Tricks
12 Days of Sketch | Day 9
We all know our designs should have consistent spacing and use a grid, but we don’t always know how to translate this over to the responsive world or take our precise practices from traditional design software into Sketch with ease. In this article, I‘ll go through some best practices, tips & tricks, handy plugins, as well as some commonly overlooked Sketch functionality.
8pt Grid System
The preferred grid in mobile design is an 8pt grid, there are many reasons why this is a best practice, including solving any half pixel offset disputes and being a number that is divisible by most screen resolutions. If you want more information on this grid system, or just aren’t quite sold, this is a great place to start.
In an ideal world, everything from padding to elements should all be using this 8pt grid system.
So you’re saying I have to know all the numbers divisible by 8?
Well, there’s a trick for that too! You can calculate the math right in Sketch. Just type your calculation in an input field just like you would a number. (Ex: 8*12 )
But how do I set up a grid in Sketch?
It’s simple, just go into View → Canvas → Show Grid, or tap Control + G on your keyboard to view the grid.
To adjust the grid width, tap into View → Canvas → Grid Settings, and choose 8px for your spacing.
What about columns?
In designing responsive layouts, using a column system can be helpful in creating consistency from page to page, and device to device.
Creating columns in Sketch is as easy as View → Canvas → Layout Settings…You can even do math in these fields to make sure your columns line up with your 8pt grid.
Summary
Using a consistent grid system tailored to mobile will make your designs feel more at home on various devices, as well as making your designs more consistent without you even thinking about it!
If you enjoyed this article please give us a follow or some claps! Your support keeps us writing more content; feel free to DM us with content requests! Instagram Twitter Dribbble LinkedIn
We’re posting Sketch tips and tricks every Monday, Wednesday, and Friday until the holidays, so stay tuned for more tips and tricks!
Learn more about Atomic Robot.
