UI/UX šŸ’© / Tips

Controlling Spacing and sizes in Design Systems

Controlling Spacing and sizes in Design Systems

UI/UX šŸ’©/TipsĀ Ā· April 7, 2019 at 12:12pm

Controlling Spacing and sizes in Design Systems

UI/UX šŸ’©Ā /Ā TipsĀ Ā·Ā April 7, 2019 at 12:12pm

How to control all spacing and sizes of your designs using the 8 rule and Method Sketch Plugin

SpacesSizes.png

For some years now, Iā€™ve been using a work methodology based on 8px. The goal is to improve my work-flow and shushing thoughts like ā€œtry putting this a little to the right. Wait, no! Better to the left! Letā€™s see it from farā€¦ā€

What is the 8 rule?

The theory is quite simple: the idea is that all the elements in your design are a multiple of 8 in terms of width and height, just as their spacing.

8 Rule Layout.png

Why?

Well, there are quite a few reasons why I decided to start working this way:

  • Speed. In the end, one always works with the same measures: 8,16,24,32,40,48ā€¦etc.
  • To focus on the important stuff. After all, my head only wants to focus on usability, color, experience and not on ā€˜thatā€™ going a little to ā€˜thatā€™ other place or the like.
  • My fellow programmers are falling in love with me. We all already know that anything that implies a rule or a repetition is a labor and time saving.
  • Unconsciously it ends up generating a fairly pleasant visual coherence. The user may not know, but the space will be constantly repeating so the design gains a vertical rhythm.
giphy.gif

Okay, that makes sense, butā€¦ why 8?

To tell you the truth, I tried everything. 4,6,12ā€¦ (even numbers, clearly), and there are some factors that made 8 the chosen one:

  • Most common resolutions are multiple of 8. Desktop 1440, Tablet 768, mobile 320ā€¦ If we want to design with all our elements as multiple of 8, the container should be multiple 8. If not, I donā€™t think it will mathematically fit. šŸ„“
  • 4 is way too small and offers too many possibilities. 12 is too big and offers fewer possibilities. 6 might be worth it but, when youā€™re down to it, itā€™s quite unsatisfiable in some cases.
  • Feel free! Use the one youā€™re comfortable with. It always depends on the project that unexpected things fit.
Okay, so youā€™ve probably even read all this stuff about 8 spacing butā€¦ what, sizes too?SpacesSizesM.png

If youā€™re a designer with a brush of OCD like meā€¦ please, donā€™t keep on reading. When you start designing with multiple spacings of 8ā€Šā€”ā€Šas proposed by Material Design and other manualsā€Šā€”ā€Šyou realize that, if the container of the layer youā€™re positioning doesnā€™t have a multiple of 8 size itā€™ll. JUST. NOT. FIT! However, if everything is a multiple of 8ā€¦ it will always fit; be it 144, 1600ā€¦ you name it.

Of course, this was a big problem for meā€Šā€”ā€Šimagine me tapping on my calculator all day long (I even learnt the multiplication tables from 8 to 20 by heart).

Method Sketch Plugin

Thatā€™s why I decided to create a plugin to spare me the suffering. Later, I realized that maybe many of you might have the same problem, so I thought of sharing it with you all, in case you need it, Letā€™s take a look at Methodā€™s features.

CheckButton.pngClick here!

Settings

I am an advocate of working with multiples of 8 but, if someone has another preference, you will be able to change it. The following examples are made with multiples of 8 just to be clearer

settings.gif

Round

Goodbye, calculator! Ctrl+8 and the object will be shaped to 8 in height and width. If the height and width are multiple of 8, all the elements that we fit in the (as long as they are multiple of 8), can have a multiple spacing of 8.šŸ¤“

round.gif

Resize

ā€œJust a bit moreā€ ā€œJust a Little lessā€ but 8 by 8 version

resize.gif

Move

Move from 8 to 8, so damn easy! I have included a layout to the plugin download, so that everything that fits in it, it will be a multiple of 8, to basically just get on with it!

move.gif

Future

It is always a work in progress but, with some or other technical difficulty (Iā€™m not an emoji programmer, you know) the idea is that this methodology flows softly with smart-guides. If someone wants to try it on GitHub, the source code is completely free and modifiable. šŸ¤Ŗ

smart-guides.gif
Load previous messages

May 24, 2019 at 1:37am

This is great read man you should create YouTube content.

    like-fill
    1
    • reply
    • like