Сетка в Figma Направляющие в Фигме

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

Нужно отдельно написать, что сетка в Figma и линейка в Figma — это разные вещи. Если ты привык работать в программе для редактирования фото, то ты знаешь, что там есть направляющие, которые постоянно мешаются и цепляются к курсору, зато их можно включать и выключать. Так же в той проге ты мог скачивать и отдельным слоем устанавливать колонки в слои, но там они постоянно терялись и то же было не очень удобно работать. Не понимаю, почему ты до сих пор работаешь в той ужасной и не удобной программе.

Сетка в Figma

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

Настройка сетки Layout Grid Figma

Кликаешь + и видишь настройки. По умолчанию создается именно сеточка с шагом в 10 пикселей. К слову сказать, любые объекты в Фигма, если ты их будешь двигать стрелочками, двигаются на 1 пиксель, а если будешь зажимать при этом Shift то двигаться они будут на 10 пикселей. Так что, если поменяешь тут значение на какое-то другое ( некоторые любят ставить размеры 8 и в этом есть разумное зерно) то придется изменить и настройки перемещения объекта с шифтом на 8. Делается это вот тут в меню


Нравится Figma? — подпишись на нас в вк и инстаграме 

Настройка расстояния перемещения объекта

Как ты понимаешь, нужно поставить одинаковый шаг сетки и Nudge Amount, чтобы было удобнее перемещать объекты и они всегда были выровнены, как нужно, ну а если ты  любишь работать в 10 пиксельной вселенной, то ничего отдельно настраивать не нужно.

Колонки в Фигме

С сеткой понятно, теперь давай разберемся с колонками. На второй вкладке ты можешь настроить колоночную сетку в Фигме.

Колонки в Фигме

У нас тут такие настройки:

Count — количество колонок

Width — ширина колонки (при выбранном Type Stretch задать ширину колонки не получится — только межколоночное расстояние)

Gutter — межколоночный отступ ( он всегда у нас будет неизменным, на то это и колонки)))

Margin — отступ сетки от правого и левого края макета, в случае колонок, если ты настраиваешь горизонтальную сетку, то Margin  будет отодвигать твои строки сверху и снизу. Теперь давай рассмотрим, что же у нас кроется в выпадающем списке Type

Настройка колонок в Figma

Stretch– тянущаяся или резиновая сетка. Колонки растягиваются на всю ширину фрейма. Можно задать только межколоночное расстояние, ширина такой колонки будет подстраиваться под ширину фрейма. Очень крутая штуковина для создания резиновый макетов и адаптива. Можно задать определенный отступ справа и слева, если говорим о колонках.

Center–Сетка по центру макета, можно настроить ширину самой колонки, но при этом при изменении ширины фрейма ширина сетки и расстояния между ними будет неизменной.

Left–тут все и так понятно.

Обрати внимание, что в одном фрейме можно создать сразу много сеток, хоть миллион.

Включить-Выключить сетку на Windows Ctrl+Shift+4. На Mac Cmd+g

Колонки bootstrap 4 Figma

Как создавать колонки разобрались, теперь давай создадим модульную систему сеток под бутстрап 4 в Фигме. Делается это очень просто. Создай фрейм, любой, какой тебе нравится. Я создал для примера с шириной 1920. Мы знаем, что ширина рабочей области в bootstrap 4 для десктопа составляет 1140 пикселей, (!)30рх по краям контейнера я не учитываю. Поэтому я просто создам прямоугольник длиной 1140 и центрую его во фрейме.

Место, где у нас будет сетка выбрали, теперь давай создадим ее, родимую… по номенклатуре ширина колонки бутстрап не указана, зато есть расстояние между ними 30. Создать ручками в режиме Center  такую сетку невозможно. Поэтому, создаем модульную сетку bootstrap 4  в figma по средствам Stretch, который примет любую ширину колонки. Просто задаем нужные параметры в настройках и все. Вот и эти параметры: 12 колонок с межколоночным расстоянием в 30 пикселей. Тут все понятно, а вот как быть с марджином? То же проблем никаких нет. Просто меряешь расстояние от краев прямоугольника до краев твоего фрейма и такой выставляй марджин. В моем случает это 390. Если что — посмотреть расстояние прямоугольника до краев фрейма можно при нажатом Alt

Сетка bootstrap 4 Figma

Теперь сеточка становится просто идеально, как нам и нужно. Точно так же можно создать и под другие разрешение, но не беспокойся — я уже все сделал за тебя и скачать модульную сетку bootstrap 4  в figma можешь тут. Пользуйся на здоровье. Там и под десктоп и под планшет, все есть.

Все те же настройки и логика процесса работает и с горизонтальными сетками, поэтому расписывать что там и как я не стану.

Обрати внимание, что ты можешь вкладывать фрейм во врем и во вложенном настраивать отдельную сетку под свои нужды. Куда там динозавру фш до такого.

Колоночная сетка для каждого фрейма

Линейка в Figma

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

Линейка в Figma

Странно как-то получается… зачем нужны и модульные сетки из колонок с кучей настроек и направляющие линейки в Фигме? На самом деле ничего странного тут нет. Линейки — это просто линейки по которым ты ровняешь блоки, а Layout grid Figma работают в тесной связке с constraints, что позволяет тебе быстренько создавать адаптивы.

Подробнее о констрейтс читай тут.

Смотри видос в котором я рассказываю В чем разница между колонками и направляющими в Figma

Система сеток Bootstrap 4  в figma

3 комментария к “Сетка в Figma Направляющие в Фигме”

  1. Семен

    Можете ли вы подсказать

    , как удалить одну или несколько направляющих?

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *