Безкоштовно · українською · 8 хв читання
Модульна сітка в дизайні: що це і як побудувати її у Figma
Що таке модульна сітка: колонки, рядки, проміжки й поля. Як побачити сітку в чужих макетах, побудувати її у Figma й адаптувати під різні екрани.
- Чим модульна сітка відрізняється від колонкової
- Як побудувати модульну сітку у Figma
- Як переносити сітку з десктопа на телефон
- Безкоштовно
- 1504 учасники
- Вхід за 1 клік
П'ять кроків до першої модульної сітки
- 1
Крок 1
Розберіться з частинами сітки
- 2
Крок 2
Знайдіть сітку в чужих макетах
- 3
Крок 3
Побудуйте модульну сітку у Figma
- 4
Крок 4
Розкладіть контент по модулях
- 5
Крок 5
Адаптуйте сітку під різні екрани
- 1504
- учасники спільноти
- 8915
- повідомлень із запитаннями з липня 2024
- 9
- дизайн-ігор з вересня 2024
- 759
- людей писали в чат
Цей гайд для вас, якщо ви
Вирівнюєте «на око»
Блоки начебто стоять рівно, але макет усе одно здається неохайним, і ви не розумієте чому.
Чули про 12 колонок
Знаєте, що «треба сітку», але не розумієте, як обрати кількість колонок, поля й проміжки.
Робите сайт або каталог
Треба розкласти багато карток, фото й тексту так, щоб це читалося на всіх екранах.
Коротко
- Сітка — це структура з колонок, проміжків між ними (gutters) і полів по краях (margins), до якої вирівнюють елементи.
- Модульна сітка додає до колонок ще й рядки: на їхньому перетині утворюються модулі, і контент займає один або кілька модулів.
- Модульні сітки добре підходять для каталогів, галерей і сторінок зі списками — там, де блоки повторюються.
- У Figma сітку будують через layout guide: колонки й рядки в одному фреймі дають модульну сітку.
- Кількість колонок змінюється разом з екраном: наприклад, 4 на телефоні й 12 на десктопі.
П'ять кроків до першої модульної сітки
- 1
Крок 1
Розберіться з частинами сітки
За визначенням Nielsen Norman Group, сітка складається з трьох частин: колонок, у які ставлять контент, проміжків (gutters) між колонками й полів (margins) — вільних зон по лівому й правому краю, де контенту немає. NN/g виділяє три поширені типи сіток в інтерфейсах:
- колонкова — сторінку ділять на вертикальні колонки, і елементи вирівнюють по них;
- модульна — до колонок додають рядки, а на перетині утворюються модулі; добре підходить для інтернет-магазинів і списків, де рядки повторюються;
- ієрархічна — найважливіший контент займає найбільші частини сітки, як на головній сторінці новинного сайту.
💡 Модульна сітка — не окремий «стиль», а розвиток колонкової. Якщо ви вмієте працювати з колонками, до модулів лишається один крок: додати рядки.
- 2
Крок 2
Знайдіть сітку в чужих макетах
Перш ніж будувати свою сітку, навчіться бачити чужі. Зробіть скриншоти трьох сторінок: інтернет-магазину, новинного сайту й портфоліо-платформи, наприклад Behance. Вставте їх у Figma, покладіть поверх напівпрозорий фрейм і знайдіть:
- скільки колонок займає одна картка товару і скільки карток у рядку;
- чи однакові проміжки між картками по горизонталі й вертикалі;
- де поля сторінки і чи однакові вони зліва й справа;
- які елементи свідомо виходять за сітку — наприклад, фото на всю ширину.
💡 Вправа: розбирайте по одній сторінці й записуйте кількість колонок, ширину проміжку й полів. З часом сітку стає легше помічати навіть без накладок.
Покажіть свою сітку
Збоку краще видно, де модулі «гуляють» або поля різні. Викладіть сторінку з увімкненими guides у спільноті й спитайте, що випадає з ритму. Це безкоштовно.
Показати сітку на фідбекБезкоштовно. 1504 дизайнери вже в спільноті.
- 3
Крок 3
Побудуйте модульну сітку у Figma
У Figma сітку задають через layout guide (до травня 2025 року ця функція називалася layout grid). Створіть фрейм завширшки 1440 px, у правій панелі натисніть Add layout guide і змініть тип. Є три типи: Uniform grid (квадратна сітка), Columns і Rows. Для модульної сітки потрібні два guides в одному фреймі:
- Columns: Count 12, тип Stretch, задайте Margin (поля) і Gutter (проміжок), наприклад 80 і 24 px;
- Rows: додайте другий guide з рядками — так колонки й рядки утворюють модулі;
- тип Stretch розтягує колонки разом із фреймом, а Left, Center чи Right фіксують ширину колонок і прив'язують сітку до краю чи центру;
- показати чи сховати всі guides у файлі: Shift + G.
💡 За замовчуванням guides червоні з прозорістю 10%. Якщо вони зливаються з макетом, змініть колір чи прозорість у налаштуваннях guide.
- 4
Крок 4
Розкладіть контент по модулях
Тепер зберіть на цій сітці сторінку каталогу: шапка, рядок фільтрів і картки товарів. Кожен елемент займає ціле число модулів: картка — три колонки й один рядок, банер-акція — шість колонок і два рядки. Стежте за тим, щоб краї тексту, фото й кнопок лягали на лінії колонок.
- відступи всередині карток і між текстовими блоками беріть кратними одній величині; Figma описує популярну 8-point grid: «жорстку» (Uniform grid розміром 8) і «м'яку» (відстані, кратні 8);
- великий елемент на кілька модулів створює акцент, а однакові модулі — ритм;
- свідомий вихід за сітку — прийом, а не помилка, якщо він один і помітний.
💡 Сітка з layout guides лише показує напрямні. Щоб картки самі розкладалися по колонках і рядках, використовуйте Grid в auto layout — це окрема функція, яка реально керує розкладкою.
Сітка є, а порядку немає? Покажіть макет спільноті → - 5
Крок 5
Адаптуйте сітку під різні екрани
Одна сітка на всі екрани не працює. NN/g наводить приклад: 4 колонки на телефоні й 12 на десктопі; проміжки на великих екранах доречно робити ширшими, на малих — вужчими. Для Android розробники Google ділять ширину вікна на класи: compact — до 600dp, medium — від 600 до 840dp, expanded — від 840 до 1200dp, а для ще ширших вікон є large і extra-large. Зробіть три версії сторінки каталогу:
- телефон (наприклад, 375 px): 4 колонки, картка на всю ширину або на дві колонки;
- планшет (наприклад, 768 px): 8 колонок, по дві-три картки в рядку;
- десктоп (1440 px): 12 колонок, по чотири картки в рядку;
- збережіть кожну сітку як layout guide style, щоб застосовувати її до нових фреймів одним кліком.
💡 Покладіть три версії поруч і покажіть у спільноті з питанням: «Чи видно, що це одна сторінка?» Якщо так — сітка свою роботу виконує.
Ви не самі з цими питаннями
Ми порахували, про що найчастіше питають у нашій спільноті. Навчання й Figma — серед лідерів, а сітка — одна з основ, з яких варто починати.
Повідомлення за темами в Spaceberry Community, липень 2024 — листопад 2026. Пошук за ключовими словами.
Практика з дедлайном і живим фідбеком
Найкраще вчить задача з терміном, яку бачать інші люди. Тому в спільноті регулярно проходять дизайн-ігри: однакове завдання для всіх, дедлайн і голосування.
Дизайн-гра · січень 2026
Редизайн сайту НАОМА
Головна сторінка академії очима абітурієнта, студента й викладача. Три роботи у фіналі, переможця обрала спільнота.
AI-челендж · травень 2025
Лендинг, створений AI
Логотип, тексти й візуали — тільки AI-інструментами. Чотири роботи, анонімне голосування, учасники поділилися промптами.
Воркшоп · квітень 2026
Figmosha: AI у Figma
Автор інструмента показав, як генерувати інтерфейси у Figma й аналізувати дизайн-систему.
Безкоштовно. 1504 дизайнери вже в спільноті.
Як приєднатися — 1 хвилина
- 1
Натисніть кнопку
Відкриється Telegram зі спільнотою Spaceberry.
- 2
Приєднайтеся
Це безкоштовно: достатньо акаунта в Telegram.
- 3
Представтеся
Напишіть, з чого починаєте, і поставте перше питання.
Часті питання
Не знайшли відповіді? Поставте питання в спільноті — там відповідають.
Чим модульна сітка відрізняється від колонкової?
Колонкова сітка ділить сторінку лише на вертикальні колонки. Модульна додає горизонтальні рядки, і на перетині колонок і рядків утворюються модулі. Через це вона зручна для сторінок, де однакові блоки повторюються: каталогів, галерей, списків. По суті, модульна сітка — це колонкова сітка з доданими рядками, тож будувати її у Figma можна з двох layout guides.
Скільки колонок обрати?
Універсальної відповіді немає. Для десктопних сайтів часто беруть 12 колонок: їх легко ділити на 2, 3, 4 і 6 частин. На телефоні колонок менше, наприклад 4. Головне — щоб ваш контент зручно лягав на сітку, а не навпаки. Розберіть кілька схожих сайтів і подивіться, скільки колонок займає одна картка.
Що таке 8-point grid?
Це підхід, коли розміри й відстані в макеті кратні 8. За описом Figma, його реалізують двома способами: «жорстко» — квадратною сіткою з кроком 8, або «м'яко» — коли самі відстані між об'єктами кратні 8. Для початківця це простий спосіб не вигадувати відступи щоразу: 8, 16, 24, 32 і так далі. Ритм відстаней стає однаковим, і макет виглядає охайнішим навіть без складної сітки.
Layout guide і Grid в auto layout — це одне й те саме?
Ні. Layout guide — це візуальні напрямні, до яких ви вирівнюєте елементи. Grid в auto layout реально розкладає вміст фрейму по колонках і рядках і перебудовує його при зміні розміру. Їх можна поєднувати: guides для загальної сітки сторінки, Grid — для сітки карток.
Чи платна спільнота Spaceberry?
Ні. Spaceberry Community безкоштовна: її підтримує громадська організація Spaceberry Foundation, яка працює не для прибутку. Щоб приєднатися, достатньо акаунта в Telegram. У спільноті 1504 дизайнери: Figma й навчання — серед найпопулярніших тем у чаті. Тут показують макети на фідбек, допомагають знайти, де модулі «гуляють», і беруть участь у дизайн-іграх з однаковим брифом і дедлайном.
Сітка готова — перевірте її на людях
Приєднуйтеся до 1504 дизайнерів, які вчаться, діляться макетами й грають у дизайн-ігри. Покажіть свою сторінку на сітці й отримайте фідбек.
- Безкоштовно
- 1504 учасники
- Вхід за 1 клік