Выберите фрейм, откройте справа Layout grid, нажмите «+», задайте тип (Columns / Rows / Grid) и параметры Count, Margin, Gutter — дальше выравнивание идет быстрее и без перекосов.
Это один из самых простых способов привести веб-макет к порядку: одинаковые отступы, ровные колонки, понятный ритм по вертикали. Плюс легче делать адаптив и собирать компоненты. Если вы хотите прокачать Figma системно, с практикой и проектами, удобно начать с Курса цифровой дизайнер.
Дальше — короткий гайд: где все находится, как включить сетку в фигме, как настроить 12 колонок, как быстро прятать и возвращать отображение, какие ошибки мешают работе.
Что это и где находится в интерфейсе
Сетка в Figma — это настройка на конкретном фрейме, а не на весь файл. Поэтому самый частый сценарий, если вы не видите функцию — выбран не фрейм, а элемент внутри.
Если вы ищете, где сетка в фигме:
Design → Layout grid (справа) → «+» (добавить сетку в фигме).
Типы:
- Columns — базовый вариант для веб-страниц и лендингов
- Rows — для вертикального ритма и выравнивания по горизонтали
- Grid — «модульная» основа, если вы строите интерфейс по шагу (например, 8 px)
Подсказка для новичков: если вы работаете над лендингом, лучше держать одну колонную разметку на весь экран, а не добавлять отдельную на каждый блок. Так проще следить за ритмом. А если делаете несколько страниц в одном файле, удобно один раз настроить параметры и затем копировать фреймы с уже заданными настройками — это экономит время.
Зачем это нужно в веб-макете
Практическая польза простая:
- вы быстрее выстраиваете отступы и иерархию
- проще собирать адаптив под разные экраны
- меньше хаоса в компонентах и дизайн-системе
- передача в разработку становится понятнее
Плюс появляется предсказуемость. Когда вы подбираете размеры на глаз, итог может выглядеть нормально, но правки будут литься рекой: «чуть левее», «чуть правее», «почему здесь другой отступ». С каркасом вы просто сверяете: блок идет по колонкам, отступ кратен шагу, элементы не пляшут.
Если чувствуете, что все ровно, но выглядит плоско, чаще всего проблема не в направляющих, а в оформлении: типографика, контраст, эффекты. Тут помогут небольшие инструкции: Как добавить шрифт в Фигму и Как сделать эффекты в фигма.
Еще один практический совет: компоненты и Auto Layout лучше «садятся» на каркас. Если кнопка или карточка собраны на Auto Layout, а контейнеры стоят по колонкам, макет не разваливается при правках текста и картинок. Это особенно заметно, когда вы делаете несколько версий страницы или собираете лендинг под разные офферы.
Пошагово: как создать и настроить
Добавление на фрейм
- Выделите фрейм.
- Справа Layout grid → «+».
- Выберите тип: Columns / Rows / Grid.
Это самый простой способ создания сетки в фигме без лишних действий.
Если вы случайно добавили не то: тип можно поменять в любой момент. Главное — не пытайтесь «лечить» неправильную структуру постоянными ручными подгонками. Быстрее один раз настроить правильно и дальше собирать блоки спокойно.
Колонки: базовый вариант для сайта
Если вы настраиваете сетку для сайта в figma, чаще всего берут 12 колонок на десктопе.
Пример для 1440 px:
- Count: 12
- Gutter: 20
- Margin: 80
Сетка из 12 колонок в фигме — самый удобный удобный каркас для блоков и контейнера.
Для мобилки 360 px:
- Count: 4
- Margin: 16
- Gutter: 16
Это проще всего применять, когда вы делаете адаптив и хотите, чтобы элементы не сдвигались к краям.
Ориентиры для подбора значений:
- Margin отвечает за «воздух» по краям. Если его мало — страница выглядит тесной.
- Gutter отвечает за читаемость сетки. Слишком маленький — блоки слипаются.
- Count — про удобство компоновки. 12 колонок дают гибкость: можно собирать 2, 3, 4, 6 колонок под разные блоки.
Модульная основа (Grid)
Если нужен системный UI, используйте модульную сетку в фигме:
- Type: Grid
- Size: 8 px (или 10 px, если так удобнее)
Дальше держите отступы и размеры кратными шагу — интерфейс выглядит аккуратнее, компоненты собираются быстрее.
Где это особенно полезно: карточки товаров, списки, таблицы, формы. Там важно, чтобы отступы были одинаковыми, а высоты строк не прыгали. С шагом 8 px вы быстрее находите «правильные» размеры: 16, 24, 32, 40 — все складывается в понятный ритм.
Включить, выключить, скрыть: быстрые действия
Важно: «включить» — это показать уже созданное. Если ничего не настроено на фрейме, показывать нечего. Горячие клавиши:
- как включить/показать сетку в фигме — Shift + G;
- как выключить/скрыть сетку в фигме — Shift + G.
Два действия — один переключатель.
Если нужно удалить настройку полностью, а не прятать, удалите ее в Layout grid (минус/удаление конкретного grid-слоя).
Быстрый рабочий прием: держите отображение включенным только на этапе раскладки блоков. Когда проверяете визуал и баланс, лучше спрятать (Shift + G), иначе вы начинаете «видеть линии», а не страницу.
- 6 практических заданий в Figma — с нуля
- Личная обратная связь от наставника
- Понимание профессии и формата работы дизайнера на практике
- Можно пройти в удобном темпе
Типичные ошибки, которые мешают
- Слишком узкие поля (Margin) — контент прижат к краям, макет выглядит дешево.
- Неудачный Gutter — блоки слипаются или ритм разваливается.
- Слишком плотная модульная разметка на весь экран — мешает смотреть на итог. В таких случаях лучше прятать отображение и включать только на этапе выравнивания.
- Несовпадение логики с контентом — когда карточки не делятся по ширине, приходится «ломать» композицию.
- Настройки разные на похожих экранах. На одной странице 12 колонок и Margin 80, на другой — случайно 10 колонок и Margin 60. В итоге файлы выглядят «как будто от разных людей».
- Ожидание, что направляющие решат все. Они не заменяют иерархию: заголовок должен отличаться от текста, кнопка — от ссылки, блоки — от фоновых деталей.
Заключение
Ключевые приемы здесь: настройка через Layout grid на фрейме + быстрый переключатель видимости. Этого достаточно, чтобы ускорить выравнивание, аккуратнее делать адаптив и собирать интерфейсы без перекосов.
Если вы хотите подтянуть Figma целиком — от структуры до оформления и работы с компонентами — посмотрите Курс по цифровому дизайну. Там эти навыки отрабатываются на реальных задачах, а не в теории.
И про рабочие договоренности. Когда появляются первые клиенты, проще сразу фиксировать объем и правки. Скачайте шаблон договора на оказание услуг дизайна и держите под рукой — это экономит время и нервы.
- 3 профессии в одной: графика, веб и UX/UI любые заказы теперь ваши
- Гарантированные оплачиваемые заказы от партнёров на чек до 20 000 ₽ ещё во время обучения
- 16+ кейсов и портфолио, которое выделит вас на фоне тысяч дизайнеров
Краткое содержание
Как включить и выключить сетку в фигме, чтобы не мешала?
Если настройка уже есть на фрейме, используйте переключатель видимости (Shift + G).
Как сделать сетку в фигме для дизайна, если я новичок?
Начните с Columns: 12 колонок на десктопе, 4 на мобилке. Затем уже добавляйте модульный шаг 8 px.
Как в фигме скрыть сетку горячими клавишами, но не удалять настройки?
Shift + G — это скрывает отображение, настройки остаются на фрейме.
- 6 практических заданий в Figma — с нуля
- Личная обратная связь от наставника
- Понимание профессии и формата работы дизайнера на практике
- Можно пройти в удобном темпе
