See how he has effectively spaced his elements?? That's exactly what i want to learn how to do.
Are there 'straight to the point' FREE online resources i can use to effectively learn how to use the 8pt grid system.
I want to know how to place elements while adhering to this rule.
I really am a sucker for a logical way to design.
Set your nudge distance to 8px in the Figma settings.
Setup your variables for spacing to be multiples of 4 with increasingly larger space. 4, 8, 12, 16, 20, 24, 32, 40, 48, 64... etc.
Set typography scaling up in the Major Thirds and set the line height to fit the system but with a minimum 1.5x. E.g. Font size 16px Line height 24
Set icons to the scale too, e g. 16, 24 and 32
Button sizes, design them to be heights of small 32px, medium (default) 40px and large 48px
Once that's setup, design with auto layout.
This is simplifying it a lot, but it's a way to get started.
Edit: Swapped golden ratio to major thirds after realizing my own default is Major Thirds
Can you elaborate more on the typography part. I understand the rest, but don't know what it means to "scale up in the golden ratio".
Probably easiest to just Google the golden ratio for typography honestly mate. You'll get better visuals than me trying to explain it here. But it is essentially a scale of which you set your typography sizes to by multiplying by 1.618
Use golden ratio to create typography scale. For example if your base font size is 16px and if you want a bigger font size you have to multiply your base size times 1.618(golden ratio) which results in 25.88px. You can leave it at that or round it up or down. It's up to you. Then multiply that times 1.618 and so on.
To be honest golden ratio is not that good when you need a lot of different sizes that are not too big. I personally prefer to use major thirds(1.25).
You can use typescale to help you with that. Try it out.
/u/CraftyMuthafucka I second what iv3rted said here.
It means that difference between typography sizes is 1.68 (that's the golden ratio). So you start with base size for body, usually 16px. Which means that your caption text is 9.9 and small print size 6.1, and h5 is 25.8 (16 x 1.68). So it's just a multimeter that will help you create your typography scale. Golden ratio is quite bad and not used most of the time, like 6.1 is too small soze, usually you don't go under 10 because of readability. Also you should round those ratios, otherwise you vill have half pixel sizes which is odd to work with and makes unpredictable renderings speciay for smaller elements. You can try minir thirds 1.2 and madior thirds 1.25, that's more usual.
Use some online tool for this, there many of them for example this Or search for "free online typography scale tool".
OP, use the Major Thirds, just realized after reading this I don't actually use the golden ratio myself because my default is 12, 16, 20, 25, 32 😂
this is the way
Multiple or divide the font by 1.618