Актуальные размеры сеток и ширина контейнера в Figma

Для профессиональных десктопных макетов актуальные размеры сеток и ширина контейнера обычно задаются через ограничение max-width: чаще всего контентный контейнер устанавливают в диапазоне 1140–1320px (в практике — ~1140–1200px), а фреймы в Figma берут за основу 1440px или 1920px для Full HD. 12‑колоночная сетка, гуттеры порядка 20–30px и модульная система (8px/10px/16px) — стандартные приёмы; главное — проектировать адаптивный контейнер с max-width, а не «тянуть» контент по всей ширине экрана.

Содержание

• Актуальные размеры сеток и ширина контейнера
• Ширина контейнера в Figma и выбор фрейма
• 12‑колоночная сетка, гуттеры и модульная система
• Брейкпойнты и адаптивность
• Практические рекомендации и чек‑лист для макетов в Figma
• CSS‑примеры и настройка контейнера
• Источники
• Заключение

Актуальные размеры сеток и ширина контейнера

В 2024–2025 годах тренд такой: дизайнеры свободно выбирают фреймы (1440, 1480, 1536, 1763, 1920 и пр.), но это не заменяет правило про контентный контейнер. Широкие фреймы полезны для фоновых и полноэкранных блоков, но текстовый и основной контент лучше ограничивать по ширине — ради читаемости и контроля композиции. Многие команды используют max‑width для контента в диапазоне 1140–1320px; наиболее частое практическое значение — 1140–1200px (это совпадает с классическими значениями в Bootstrap и рекомендациями дизайнеров) — см. документацию и примеры в официальной документации Bootstrap [https://getbootstrap.com/docs/5.0/layout/containers/] и обзоры по размерам сайтов [https://webhelpagency.com/blog/website-dimensions/].

Почему так? Потому что слишком широкая контентная область даёт чрезмерную длину строк, ухудшая восприятие. В UX‑сообществе ориентируются на примерно 60–80 символов в строке — ориентир, который переводится в пиксели в зависимости от шрифта и размера (см. обсуждение длины строки: [https://ux.stackexchange.com/questions/124228/what-is-the-best-max-width-content-container-in-a-website]).

Короткий практический вывод: выбирайте фрейм в Figma по целевой аудитории (1440 для типичного десктопа, 1920 — если важен Full HD), но держите контентный контейнер в пределах 1140–1320px и задавайте его через max‑width.

Ширина контейнера в Figma и выбор фрейма

Что принять за «стартовую» ширину фрейма в Figma? Большинство дизайнеров берёт 1440px как удобную отправную точку — это и дефолт у многих, и удобный компромисс между 1366/1440/1536. Обсуждение дефолтного фрейма в сообществе — полезный контекст: [https://www.reddit.com/r/FigmaDesign/comments/1fpv838/why_is_figmas_default_desktop_frame_1440px_which/].

Практика:

• Сделайте основной фрейм 1440px и добавьте дополнительные фреймы для проверки: 1366px, 1536px и 1920px. Так вы увидите, как «парадный» макет ведёт себя на реально популярных разрешениях.
• Для контентной ширины в макете используйте отдельный layout (layout grid) — это не обязательно центр фрейма: фон может быть 1920px, а контейнер контента ограничен 1140px. Пример настройки совместимой с Bootstrap: фрейм 1440px, 12 колонок, gutter 30px, margin 15px — такой расчёт часто применяется в Figma при подготовке макетов [https://webdesign-master.ru/blog/web-design/figma-bootstrap-grid.html].

Итог: фрейм ≠ контентный контейнер. Делайте фрейм удобным для проверки внешних блоков, а контент держите в контролируемом max‑width.

12‑колоночная сетка, гуттеры и модульная система

12 колонок — это де‑факто стандарт: она даёт гибкость (деление на 2/3/4/6 и т.д.), простую верстку и совместимость с популярными фреймворками (Bootstrap, Tailwind / grid utilities). Bootstrap использует 12 колонок и задаёт стандартный размер гуттера через переменную $grid-gutter-width (по умолчанию 1.5rem ≈ 24px при 16px root) — подробнее в официальной документации по сетке [https://getbootstrap.com/docs/5.0/layout/grid/].

Типичные числовые рекомендации:

• Количество колонок: 12.
• Gutter (межколоночный отступ): примерно 20–30px (Bootstrap ~24px).
• Margin / side padding контейнера: 15–24px (в Figma часто 15px).
• Модульная сетка (spacing system): 8px (часто), альтернативно 10px (дефолт Figma) или 16px — выбор зависит от дизайн‑системы проекта и кратности размеров. Skillbox и другие курсы советуют выбирать базовый модуль и держаться его везде [https://skillbox.ru/media/design/kak-rabotat-s-modulnoy-setkoy-v-figma/].

Пример арифметики: при контейнере 1140px, gutter 30px и margin 15px ширина одной колонки = (1140 − 12×30) / 12 = 65px — типичный расчёт, который легко повторить в Figma и CSS [https://webdesign-master.ru/blog/web-design/figma-bootstrap-grid.html].

Брейкпойнты и адаптивность

Стандартный подход — «mobile‑first» с набором брейкпойнтов, которые выбирают по фреймворку или под проект:

• Bootstrap‑ориентир: sm ≥576px, md ≥768px, lg ≥992px, xl ≥1200px, xxl ≥1400px — с соответствующими max‑width для контейнеров (sm:540, md:720, lg:960, xl:1140, xxl:1320) [https://getbootstrap.com/docs/5.0/layout/containers/].
• Tailwind предлагает другую шкалу (sm:640 md:768 lg:1024 xl:1280 2xl:1536) и утилиты для max‑width [https://tailwindcss.com/docs/max-width].

Какие значения использовать? Зависит от аудитории: для проектов с большой долей ноутбуков 1366px тестируйте и этот кейс; для корпоративных порталов и лендингов — 1440 и 1920. Главное — задать несколько ключевых точек проверки (например: 360, 768, 1024, 1366, 1440, 1920) и убедиться, что контент остаётся читабельным и компоновка не ломается.

Практические рекомендации и чек‑лист для макетов в Figma

Коротко — список действий, которые ускорят работу и повысят качество макета:

• Выберите стартовый фрейм: 1440px (основной), добавьте 1366px и 1920px для проверки.
• Контентный контейнер: max‑width 1140–1200px (или до 1320px для очень широких проектов).
• Сетка: 12 колонок; gutter 24–30px; side margin 15–24px.
• Модуль: выберите 8px (рекомендовано) или 10px (если команда привыкла к дефолту Figma). Последовательность размеров делайте кратной модулю.
• Типографика: подбирайте длину строки 60–80 символов (ориентир для читаемости). Проверяйте с выбранным шрифтом.
• В Figma используйте Layout Grid (Columns) + Auto Layout для компонентов; задавайте Constraints и Resize behavior. Подготовьте компоненты с responsive‑вариантами.
• Экспорт: для Retina/HiDPI готовьте растровые ресурсы в 2x/3x (см. рекомендации по изображениям) [https://webhelpagency.com/blog/website-dimensions/].
• Тестируйте макет на ключевых разрешениях и в браузере после прототипа.

Небольшая подсказка: фоновые иллюстрации и «широкие» секции можно проектировать под 1920px, но текст и критичный контент держите внутри ограниченного контейнера.

CSS‑примеры и настройка контейнера

Простой пример контейнера и сетки (mobile‑first):

/* базовый контейнер */
.container {
 width: 100%;
 max-width: 1140px; /* или 1200px/1320px по проекту */
 margin: 0 auto;
 padding: 0 16px; /* side padding */
}

/* простая 12-колоночная сетка через CSS Grid */
.grid {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 24px; /* gutter */
 max-width: 1140px;
 margin: 0 auto;
}

/* брейкпойнты (пример, основан на Bootstrap-подходе) */
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

Если вы используете Bootstrap или Tailwind — можно опереться на их готовые утилиты и контейнеры (см. документацию): [https://getbootstrap.com/docs/5.0/layout/containers/] и [https://tailwindcss.com/docs/max-width].

Источники

• https://getbootstrap.com/docs/5.0/layout/containers/
• https://getbootstrap.com/docs/5.0/layout/grid/
• https://webdesign-master.ru/blog/web-design/figma-bootstrap-grid.html
• https://vc.ru/design/2132393-razmer-v-veb-dizajne-vazhnost-proportsij
• https://webhelpagency.com/blog/website-dimensions/
• https://ux.stackexchange.com/questions/124228/what-is-the-best-max-width-content-container-in-a-website
• https://www.reddit.com/r/FigmaDesign/comments/1fpv838/why_is_figmas_default_desktop_frame_1440px_which/
• https://skillbox.ru/media/design/kak-rabotat-s-modulnoy-setkoy-v-figma/
• https://tailwindcss.com/docs/max-width

Заключение

Актуальные размеры сеток и ширина контейнера в современном веб‑дизайне — это баланс между визуальной свободой фрейма и контролем контента: используйте фреймы 1440px/1920px для проверки внешних блоков, но задавайте контентный max‑width в пределах ~1140–1320px (обычно ~1140–1200px). 12‑колоночная сетка, гуттеры 20–30px и модульная система (чаще 8px) дают совместимость с фронтенд‑фреймворками и удобство верстки. Проще всего: определите аудиторию, выберите стандартные брейкпойнты (или используйте Bootstrap/Tailwind), настройте сетку в Figma и тестируйте макеты на ключевых разрешениях — тогда и 1480px, и 1763px будут инструментом, а не проблемой.