Настройка 12-колоночной сетки и рабочего пространства в Figma

В уроке настраиваем 12-колоночную модульную сетку в Figma для десктопного макета 1920 × 1080 px. Разбираем ширину контейнера, Margin, средники, режимы Stretch и фиксированной ширины колонок, а также определяем рабочую высоту первого экрана с учётом интерфейса браузера.

Модульная сетка помогает создать системный десктопный макет и заранее определить рабочую область для контента. При её настройке важно учитывать не только количество колонок, но и ширину контейнера, средники и реальную высоту первого экрана сайта. Разберём базовую настройку для макета Full HD.

В рамках курса десктопный макет создаётся во Frame: 1920 × 1080 px

Это формат Full HD с соотношением сторон 16:9.

Такой Frame используется как основа, от которой в дальнейшем можно переходить к адаптивным версиям сайта. При этом высота 1080 px не означает, что весь первый экран необходимо заполнять контентом до самого нижнего края.

После создания Frame необходимо открыть настройки Layout Grid. Далее:

• Добавить Layout Grid.
• Изменить тип сетки на Columns.
• Установить Count = 12.

После этого Figma распределит 12 колонок по ширине рабочей области.

12-колоночная система удобна тем, что позволяет гибко делить пространство, например:

• 12 колонок — один широкий блок;
• 6 + 6 — две равные части;
• 4 + 4 + 4 — три карточки;
• 3 + 3 + 3 + 3 — четыре элемента.

Поэтому такая сетка хорошо подходит для самых разных композиций и становится удобной основой для веб-дизайна.

При Frame шириной 1920 px основной контент необязательно растягивать на весь экран.

В рамках курса рекомендуется работать с контейнером примерно: 1100–1200 px

Такой диапазон позволяет оставить достаточно свободного пространства по краям и сохранить компактную структуру контента.

Кроме того, макет с контейнером около 1100 px легче адаптировать под более узкие экраны.

Например, на ноутбуке шириной около 1366 px такой контент по-прежнему может комфортно помещаться по ширине.

Первый способ создания контейнера — использовать режим Stretch.

При нём задаются:

• количество колонок;
• средник;
• Margin.

Для Frame 1920 px и контейнера 1100 px внешний отступ будет составлять: 410 px слева и 410 px справа.

Расчёт: 1920 − 410 − 410 = 1100 px.

Таким образом, 12 колонок автоматически распределятся внутри контейнера шириной 1100 px.

Средник, или gutter, — это расстояние между соседними колонками. В качестве базового значения можно использовать: 20 px

При необходимости средник можно увеличивать или уменьшать. Его размер зависит от композиции и конкретной задачи проекта.

В режиме Stretch Figma рассчитывает ширину колонок автоматически. Если оставшееся пространство невозможно идеально разделить на 12 колонок, программа распределяет пиксели между ними.

Поэтому одни колонки могут получиться шириной 73 px, а другие — 74 px. Разница в один пиксель обычно не влияет на итоговый дизайн.

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

Вместо Stretch можно выбрать выравнивание сетки по центру и вручную задать ширину колонок, например:

• 12 колонок;
• ширина колонки — 73 или 74 px;
• средник — 20 px.

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

Выбор зависит от того, что важнее в конкретном макете:

• точная ширина контейнера;
• или строго одинаковая ширина колонок.

Frame имеет высоту 1080 px, но браузер показывает сайт не на всей этой высоте.

Часть пространства занимают:

• вкладки;
• адресная строка;
• закладки;
• системная панель.

Поэтому реальная видимая область сайта меньше, если расположить CTA или важный текст у нижнего края Frame, в браузере пользователь может их не увидеть и ему придётся сделать дополнительный скролл.

Для Full HD в рамках урока предлагается ориентироваться примерно на: 980 px

То есть около 100 px оставляется с учётом интерфейса браузера и системы. Это ориентир, а не жёсткий стандарт, главный экран вполне может быть ниже.

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

В пределах первого экрана желательно показать всё, без чего пользователь не поймёт предложение.

Обычно это:

• главный заголовок;
• оффер;
• краткое пояснение;
• ключевой визуал;
• Call to Action;
• основная кнопка.

Пользователь должен практически сразу получить ответы на несколько вопросов:

• Куда я попал?
• Что мне предлагают?
• Подходит ли это мне?
• Что делать дальше?

Если для получения этих ответов приходится дополнительно искать кнопку или прокручивать страницу, первый экран работает слабее.

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

Но именно из подобных решений складывается удобство сайта:

• небольшой непродуманный скролл может спрятать CTA;
• слишком широкий контейнер усложняет адаптацию;
• отсутствие системы в колонках затрудняет дальнейшую работу с макетом.

Поэтому техническую основу лучше настроить до начала активной работы над дизайном.

Для первых учебных проектов можно использовать следующую систему:

• Frame: 1920 × 1080 px;
• Columns: 12;
• Container: 1100–1200 px;
• Gutter: около 20 px;
• видимая высота первого экрана: ориентировочно до 980 px.

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

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

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

Перейти к следующему уроку