Сетка 8pt для адаптивного дизайна в Adobe XD

Сетки 8pt, которые  упростят жизнь вам и вашим коллегам разработчикам. О том, как подружить базовую сетку 8pt c колоночной, можно почитать тут — 8pt Grid for Web. Или мой Калькулятор.

Огромное спасибо, цифровому дизайнеру Дмитрию Симбереву, за статью и проделанную работу, а GUI дизайнеру Богдану Сломчинскому за 8pt сетки для адаптивного веб-дизайна в  Adobe XD.

Для настольных

  • Desktop (≥1200px):
  • Grid — 1152px
  • Columns — 12
  • Column Width — 64px
  • Gutter — 32px

Для планшета

  • Tablet (≥768px):
  • Grid — 672px
  • Columns — 12
  • Column Width — 40px
  • Gutter — 16px

Для телефона

  • Phone (<768px):
  • Grid — 288px
  • Columns — 4
  • Column Width — 56px
  • Gutter — 16px