Представь себе ситуацию: ты задизайнил бомба пушка ракета-макет, который утвердил заказчик.

Его передали в разработку, а ты получил свою оплату и уехал кутить на Мальдивы (представим, я же сказал).

Внешне к макету никаких претензий, но на поверку, там пиксель в отступе потерян, тут в слоях бардак, а здесь вообще дробные значения.

Вроде не критично, но кто будет все это исправлять?

По факту, макет утверждён и к тебе как к дизайнеру никаких вопросов быть не может, но разработчик почему-то материт тебя «на чем свет стоит». Ведь именно ему теперь проверять каждое значение🥴

Вообще, по-хорошему, такое нужно возвращать дизайнеру, но этого не делать не придётся, если каждый будет ответственно подходить к выполнению своих задач и использовать в работе плагины, которые наводят порядок.

В слоях/ в числах/ в жизни

Плагины не только упрощают взаимодействие с макетом, но и непосредственно влияют на отношения в связке заказчик-дизайнер-разработчик⚡️

Ведь нет ничего проще, чем запустить плагины, которые избавляются от дробных чисел, «висячих предлогов» и даже разных отступов в макетах.

Внимательность тоже важна, но на больших проектах за всем не уследишь.

Дизайнер, помни: сегодня ты делаешь классный макет, завтра разработчик рекомендует тебя как крутого спеца.

Наоборот, кстати, тоже работает

Как настроить сетку по bootstrap ?

Bootstrap — это набор готовых инструментов для создания адаптивного дизайна. Его разработали в Twitter.

Общие параметры сетки:

Отступ между колонками (Gutter) – 30 пикселей
Базовая единица – 5 пикселей
Колонки – 12
Количество брейкпоинтов – 5

Что такое брейкпоинты?

Это контрольные точки, где контент перестраивается в зависимости от устройства.

Как построить сетку в Figma по Bootstrap?

Предположим, мы хотим создать сетку для веб-версии сайта.
За основу берем разрешение экрана 1440 на 1024 пикселей.

При этом согласно документации Bootstrap экраны больше 1200 пикселей относятся к ExtraLarge, а ширина контейнера у них – 1140 пикселей.

Настраиваем сетку:

Отступы по краям (Margin) – (1440 - 1140)/2 = 150+15 (cогласно документации Bootstrap, между границей контейнера и колонками требуются отступы по 15 пикселей).
Колонки – 12
Gutter – 30 пикселей
Тип (Type) – Stretch.

Значения для других разрешений в карточках ниже 👇🏻

#дизайн #сетка #bootstrap #design