Модульная сетка в веб-дизайне: как сделать сетку в Figma

Модульная сетка — это невидимая разметка макета из колонок, промежутков между ними и полей по краям экрана. Она помогает выстроить блоки в единую систему, сохранить одинаковые отступы и сделать страницу визуально аккуратной и понятной для пользователя. Дизайнеру при этом проще собирать новые экраны и адаптировать макет под разные устройства. В Figma такую сетку можно настроить через Layout guide у фрейма, но сначала нужно определить подходящее количество колонок, поля и расстояния между ними.

Из чего состоит модульная сетка

У любой сетки для сайта есть 4 части. Названия стоит запомнить сразу на русском и английском, потому что в Figma и в разговоре с разработчиками чаще будут встречаться английские термины.

• Колонки (columns) — вертикальные полосы, по которым распределяют контент. Например, карточка товара может занимать 3 колонки, а текстовый блок 6.
• Межколонные отступы (gutter), то есть расстояние между колонками. Контент в них не заходит, это воздух между блоками.
• Поля (margin), отступы от края экрана до первой и последней колонки.
• Ряды (rows), горизонтальные линии. Вместе с колонками они делят макет на прямоугольники-модули, отсюда и название «модульная».

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

Поэтому в вебе чаще работают колоночной сеткой. Она задает только ширину блоков, а этого добиться проще, ведь блок занимает нужное число колонок на любом экране. Порядок по вертикали держат иначе, и все отступы делают кратными одному шагу, например 8 пикселям, так получаются отступы по 16, 24, 32 или 48 пикселей.

Зачем дизайнеру сетка

Без сетки для каждого блока приходится заново решать, какой сделать отступ. На первом экране между блоками 40 px, на втором 37, на третьем карточка чуть шире соседней. По отдельности этого не видно, но вместе такие мелочи делают страницу неровной.

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

Популярнее всего 12 колонок. Число 12 делится на 2, 3, 4 и 6, поэтому в одной сетке помещаются и 2 крупных блока в ряд, и 3 карточки, и 4 иконки. На 12 колонках построена, например, сетка Bootstrap, набора готовых стилей, с которым часто работают верстальщики.

Как рассчитать сетку для сайта

Все параметры сетки связаны одной формулой. Ширина колонки получается из ширины экрана за вычетом полей и межколонных отступов.

ширина колонки = (ширина фрейма − 2 × поле − (число колонок − 1) × отступ) ÷ число колонок

Возьмем макет для компьютера шириной 1440 px. Это частый размер макета для ноутбука и монитора. Контент держим в 1200 px по центру, чтобы строки текста не растягивались на весь экран, тогда поля по 120 px слева и справа. Отступ между колонками возьмем 24 px, как в Bootstrap по умолчанию. Получаем (1440 − 240 − 11 × 24) ÷ 12 = 936 ÷ 12 = 78 px на колонку.

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

Ширину блока считают так же. Карточка на 3 колонки займет 3 × 78 + 2 × 24 = 282 px: 3 колонки и 2 отступа между ними.

Как сделать сетку в Figma

Рассмотрим на примере, как настроить сетку для макета шириной 1440 px, которую мы рассчитали выше. Названия кнопок даем так, как они подписаны в Figma.

1. Создайте фрейм нужной ширины. Для этого нажмите на клавиатуре клавишу F (Frame) и выберите в правой панели готовый размер или растяните фрейм на рабочей области, а точную ширину 1440 px задайте ему в панели справа (высота на ваше усмотрение). Сетку можно добавить только фрейму, у группы этой настройки нет.
2. В правой панели найдите раздел Layout guide и нажмите «+». По умолчанию Figma добавит квадратную сетку, где все ячейки одинакового размера. В справке Figma такой тип называется Uniform grid. Для колонок она пока не нужна.
3. Откройте настройки сетки (иконка слева от названия) и выберите тип Columns.
4. Впишите значения Count 12, Type Stretch, Margin 120, Gutter 24. Тип Stretch растягивает колонки по ширине фрейма, и только у него есть поле Margin.
5. Проверьте результат. Поверх фрейма появятся 12 красных полос, а ширину колонки Figma посчитает сама. Она должна совпасть с вашим расчетом, 78 px.
6. Расставьте блоки. Перетащите прямоугольник или карточку к краю колонки и растяните до края другой: Figma притягивает объекты к линиям сетки, и блок встанет ровно.
7. Если нужен шаг по вертикали, добавьте вторую сетку кнопкой «+», оставьте квадратную сетку, которая появляется по умолчанию, и задайте ей размер 8.
8. Сохраните сетку как стиль (иконка стилей в разделе Layout guide), чтобы применять ее к другим экранам проекта одним кликом.

Тип Stretch растягивает колонки вместе с фреймом: на экране 1920 px они станут шире. Если нужно, чтобы контент оставался по центру фиксированной ширины, выберите Type Center и задайте ширину колонки Width 78.

Чтобы сетка не мешала, ее можно скрыть иконкой глаза рядом с настройкой. Стили сеток лучше хранить рядом со стилями цветов и шрифтов, тогда их легко найти в любом файле. Подробнее об этом в статье о том, как организовать файлы в Figma.

Не путайте Layout guide с режимом Grid в auto layout, который Figma добавила в 2025 году. Layout guide служит только подсказкой на экране и ничего не двигает. Grid в auto layout сам раскладывает элементы по ячейкам и подстраивает их размеры под ширину фрейма. Начинать стоит с Layout guide, а к Grid переходить, когда собираете, например, плитку карточек или таблицу тарифов.

Сетка для планшета и телефона

На телефоне шириной 360 px 12 колонок выйдут уже 20 px, в такую колонку не поместится даже кнопка. Поэтому для каждой ширины экрана делают свою сетку, обычно с меньшим числом колонок и отступов. Вот один из рабочих вариантов, который проверяется той же формулой.


Карточка, которая на компьютере занимала 3 колонки из 12 (четверть ширины), на планшете займет 4 из 8, то есть половину, а на телефоне все 4 колонки. Так заранее видно, как макет будет перестраиваться.

Ширины 768 и 360 px выбраны не случайно. С 768 px в Bootstrap начинается раскладка для планшетов, а 360 px взяли как узкий экран телефона: если макет помещается в него, на более широких телефонах он тоже не развалится. Если в проекте другие точки перехода, считайте сетку под них по той же формуле.

Частые ошибки новичков

• Текст и картинки заходят в межколонные отступы. Блок должен начинаться и заканчиваться на границе колонки, иначе выравнивание теряется.
• Поля используют под смысловой контент. В полях не нужно размещать текст, кнопки и другие важные элементы интерфейса. Поля отделяют основной контент от края экрана и сохраняют аккуратные отступы, особенно на телефоне, где пальцу нужно место у края.
• Сетка есть только на первом экране. Если остальные экраны собраны на глаз, смысл пропадает. Сохраните сетку стилем и примените ко всем фреймам.
• Дробная ширина колонок. При 73,75 px вместо целого числа блоки встают между пикселями, и их края могут выглядеть нечетко.
• Считают границы полей строжайшим запретом. Правило из предыдущего пункта касается текста и кнопок. Фото, фон и декоративные элементы могут выходить за поля или занимать всю ширину экрана, если это предусмотрено дизайном. Важно только, чтобы они не мешали читать основной контент и не ломали структуру макета.

Попробуйте собрать макет по сетке

Сетку проще всего понять руками. Возьмите лендинг, который нравится, и попробуйте найти в нем сетку: сколько колонок у первого экрана, какие поля и отступы между блоками. Помните, что в разных блоках одного сайта сетка может быть разной, например 12 колонок в каталоге и 2 широкие колонки в блоке с отзывами. Затем соберите такой же первый экран в Figma по найденной сетке.

А если хотите потренироваться в работе с сетками и макетами под руководством опытного дизайнера, приходите на бесплатный интенсив UX/UI: Start. За 7 дней вы соберете 5 дизайн-проектов в Figma, повторяя за преподавателем по записям уроков. На втором уроке разбирают инструменты Figma и делают первый экран сайта, на шестом — адаптивные версии макета. А если решите освоить профессию целиком, посмотрите курс UX/UI-дизайнер.