Skip to main content
HomeProjectsBlogsResourceContact

Grids

Last updated:
Written by: Dang Khoa (@wentallout)
fundamental

Reference

How to build responsive grids in Figma

mobile

  • Columns: 4 (or 2 if your UI is simple)
  • Type: Stretch
  • Margin: 16px (or 24px)
  • Gutter: 16px (or 24px)

tablet

Same value like Mobile but 8 columns

  • Columns: 8
  • Type: Stretch
  • Margin: 24px
  • Gutter: 16px

desktop

  • Columns: 12
  • Type: Stretch
  • Margin: 24px
  • Gutter: 16px (or 24px)
← Previous
When Should You Polish Your UI?
  • E-commerce
  • Landing page
  • Usability
  • Accessibility
  • Information Architecture
  • Responsive Design