Создание сетки Bootstrap в Figma / 2021

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

Создаём проект в Figma

Для начала создадим новый проект, и создадим в нём frime. Размеры frime 1920×3000, ширина должна быть 1920px, а высота любая какая для вас приемлема.

Создаём frime в figma

Создаём сетку для нашего frime

Если обратиться к документации bootstrap, то мы увидим что .container составляет 1200px, а каждый состоит он из 12 столбцов.

Зная эти показатели мы настраиваем нашу с вами сетку.

  1. Переходим в правую часть панели инструментов на пункт Layout Grid
  2. Нажимаем на «+»
  3. Нажимает на иконку grid (квадратики)
  4. Из списка выбираем Columns
  5. Count : значение 12 — количество столбцов
  6. Margin 360px — для того что бы получить отступы от края frime и получить .container размеров 1200px
  7. Gutter: 30px — отступы между столбцами, у .col- есть отступы 15px слева и 15px справа, так мы получаем наши 30px
Прописываем сетку для bootsrap

Собственно на этом всё. Наша сетка для bootstrap в figma готова. По традиции, если есть вопросы, то задавайте их в комментариях.

Максим Борисенко

Веб-разработчик
Основатель MAKBORI

Блог Максима Борисенко - разработка и продвижение сайтов
Добавить комментарий

  1. Аватар
    Женя

    Огромное спасибо за информацию.

    Ответить
    1. Максим Борисенко
      Максим Борисенко автор

      Всегда пожалуйста

      Ответить