Learning week up to 40% off · enterEnter code for 10% more off

Ends in00:00:00

Sign in
Become a teacher

Design

Figma layout: 3 rules for a clean interface

A messy interface usually comes from uneven spacing, not colour. The three rules below fix most first designs.

AuthorLê Thu Hà29/09/20266 minutes of reading

Spacing in steps of 8

Every gap is a multiple of 8: 8, 16, 24, 32. Readers feel an even rhythm without knowing why.

Auto layout for every block

Use Auto layout so blocks grow with their content. Make the text longer and buttons and cards push each other along, no dragging by hand.

  • Turn on Auto layout with Shift A
  • Set the gap between items instead of dragging each one

One font size per role

Headings, body text and captions each get one size. No more than 4 font sizes on a screen.

Related courses

Figma from zero to your first interface

₫799.000₫1.390.000

View courses

Written by

Lê Thu HàLecturer Nac Ladder · UI design and visuals

Comments

No comments yet.