Чтобы включить сетку в Фигме, выделите фрейм, найдите в правой панели раздел Layout guide и нажмите плюс (Add layout guide). На фрейме сразу появится квадратная сетка. Для колонок или строк откройте настройки сетки (значок у её строки) и смените тип. Скрыть все сетки файла можно сочетанием клавиш или через меню вида в верхней части правой панели, оба пути разобраны ниже.
Сетка работает только на фрейме: на группе или отдельной фигуре раздела Layout guide нет. Если вы только знакомитесь с программой, начните с обзора интерфейса Figma, а потом возвращайтесь сюда.
Рекомендуем курсы по Figma
Bonnie & SlideОсновы дизайна в Figma42 800 ₽4 недели
SkillboxFigma 2.029 394 ₽2 месяца
Академия СинергияFigma с нуля до PRO31 836 ₽2 месяца
CloudlessonsСупер Figma23 990 ₽1 месяц
НАДПОВеб-дизайн в редакторе Figma. Повышение квалификации33 400 ₽2 месяца
PurpleSchoolОсновы дизайна и Figma3 999 ₽2 месяца
Какие сетки есть в Figma
Словом «сетка» в Фигме называют четыре разные вещи. Путаница отсюда: человек ищет колонки для сайта, а находит пиксельную сетку, которая видна только на сильном увеличении.
| Что это | Где включается | Зачем |
|---|---|---|
| Layout guide (до мая 2025 года называлась layout grid) | правая панель, раздел Layout guide у выделенного фрейма | колонки, строки и квадратная сетка для разметки макета |
| Grid в автолейауте | правая панель, раздел Layout, вариант Grid | раскладывает объекты по ячейкам и перестраивает их при изменении размера |
| Пиксельная сетка | меню Zoom/view options | показывает каждый пиксель при увеличении от 400 % |
| Направляющие | Main menu → View → Rulers, затем линия тянется от линейки | отдельные линии для выравнивания в любом месте холста |
Переименование layout grid в layout guide Figma описывает в справке о сетках: это та же функция, сменилось только название. В старых уроках вы встретите оба варианта.
Дальше по порядку: сначала layout guide, потому что о ней спрашивают чаще всего, затем остальные три.
Как добавить сетку на фрейм пошагово
- Создайте фрейм: клавиша F или значок фрейма на панели инструментов, затем выберите готовый размер в правой панели или растяните фрейм мышью.
- Выделите фрейм кликом по его названию над холстом или в списке слоёв слева.
- В правой панели найдите раздел Layout guide и нажмите плюс рядом с ним. На фрейм ляжет квадратная сетка (uniform grid).
- Нажмите значок настроек у строки сетки. Откроется окно, где меняется тип: квадратная сетка, колонки или строки.
- Задайте число колонок, отступы и цвет, закройте окно. Сетка сохранится вместе с фреймом.
Компонент в Figma тоже фрейм, поэтому сетку можно поставить и на компонент. На группу нельзя: если раздела Layout guide в панели нет, проверьте, что выделено. Группу легко обернуть во фрейм сочетанием Ctrl+Alt+G, на Mac Command+Option+G.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяПовёрнутый фрейм сетку не покажет. Перед тем как добавлять её, поставьте поворот 0° в поле поворота правой панели.
Как настроить колонки, строки и квадратную сетку
У трёх типов сетки разный набор полей. Названия ниже даны так, как они подписаны в интерфейсе: русского языка у Figma нет, подробности в нашей статье о том, можно ли перевести Figma на русский.
| Поле | Где есть | Что делает |
|---|---|---|
| Size | квадратная сетка | размер клетки в пикселях |
| Count | колонки, строки | сколько колонок или строк; можно выбрать Auto или переменную |
| Type | колонки, строки | откуда начинается сетка: Left, Center, Right или Stretch (у строк Top, Center, Bottom, Stretch) |
| Width / Height | фиксированные типы | точная ширина колонки или высота строки |
| Offset | Left, Right, Top, Bottom | отступ первой колонки или строки от края фрейма |
| Margin | Stretch | поле между крайними колонками и краем фрейма |
| Gutter | колонки, строки | промежуток между соседними колонками или строками |
| Color и Opacity | все типы | цвет сетки; по умолчанию красный #FF0000 с непрозрачностью 10 % |
Главное, что тут нужно решить: Stretch или фиксированный тип. При Stretch колонки растягиваются вместе с фреймом, поле ширины недоступно и стоит Auto. При Left, Center или Right ширина колонки задана в пикселях, и при растягивании фрейма меняется только свободное место по краям.
Колоночная сетка для сайта
Для адаптивного макета обычно берут Stretch: колонки подстроятся под ширину экрана так же, как это потом сделает вёрстка через медиа-запросы в CSS. Ширина колонки при этом считается сама: ширина фрейма минус два поля минус все промежутки, делённое на число колонок.
| Фрейм | Count | Gutter | Margin | Ширина колонки |
|---|---|---|---|---|
| 1440 px, десктоп | 12 | 24 | 72 | 86 px |
| 768 px, планшет | 8 | 16 | 32 | 74 px |
| 360 px, телефон | 4 | 16 | 16 | 70 px |
Это рабочие стартовые значения, а не стандарт. Подбирайте поля так, чтобы ширина колонки выходила целой: при дробной, например 81,67 px у фрейма 1280 с 12 колонками, промежутком 20 и полями 40, края блоков в макете начнут попадать между пикселями.
CheckroiПодборка курсов по веб-дизайну132 курса • 46 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Строки и базовая сетка 8 pt
Строки (Rows) задают вертикальный ритм: одинаковые отступы между блоками и строками текста. В справке Figma описаны два способа работать с системой 8 pt:
- жёсткая сетка: квадратная сетка с Size 8, объекты стоят по её клеткам;
- мягкая сетка: колонки или строки с размерами, кратными 8, а расстояния между объектами тоже кратны 8.
Мягкий вариант удобнее в интерфейсах: текст редко встаёт ровно в клетку, а отступы 8, 16, 24 и 32 запомнить легко.
Квадратная сетка для иконок
Квадратную сетку ставят на фрейм иконки 24×24 или 16×16 с Size 1 или 2. Так видно, где линия ложится на целый пиксель, а где размоется, когда вы сохраните иконку в PNG или SVG. Для макета страницы квадратная сетка почти не нужна: колонки дают больше.
Какую сетку выбрать под задачу
Новички часто ставят 12 колонок на всё подряд, от сайта до баннера. Сетка должна повторять то, как макет будут собирать дальше, поэтому выбор зависит от задачи.
| Задача | Сетка | Почему так |
|---|---|---|
| лендинг или сайт | колонки Stretch, 12 на десктопе и 4 на телефоне, плюс строки по 8 px | 12 делится на 2, 3, 4 и 6, поэтому на одной сетке собираются блоки в две, три и четыре колонки |
| мобильное приложение | 4 колонки Stretch с полями 16 px | экран узкий, больше четырёх колонок дают слишком мелкие доли |
| иконка | квадратная сетка 1 или 2 px | видно, где линия ляжет на целый пиксель |
| дашборд, каталог карточек | grid в автолейауте внутри фрейма с колонками | карточки сами перестроятся при смене ширины |
| баннер, обложка, пост в соцсети | 2–3 колонки Center или одна строка-поле по краям | важнее оставить поля у краёв, чем делить площадь на доли |
Сетку стоит договорить с разработчиком до того, как вы нарисуете первые экраны. Если вёрстка пойдёт на 12 колонках с промежутком 24 px, а в макете стоит 20, каждый блок потом придётся пересчитывать. Как договариваться с разработкой о сетке и отступах, учат на курсах по дизайну интерфейсов.
Отдельно про привязки (constraints). Сетка сама не меняет поведение объектов при растягивании фрейма, за это отвечают привязки в правой панели. Если сетка стоит в режиме Stretch, Figma, по справке о сетках и привязках, считает привязки объекта от ближайшей колонки или строки. Колонки растягиваются вместе с фреймом, а блок, привязанный к краям колонки, растягивается вместе с ней.
CheckroiПодборка курсов по Figma352 курса • 55 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Несколько сеток на одном фрейме и стили
На один фрейм можно повесить сколько угодно сеток. Типичная связка: 12 колонок и строки по 8 px. Колонки задают ширину блоков, строки задают высоту и отступы между ними. Чтобы добавить вторую сетку, снова нажмите плюс в разделе Layout guide и выберите тип.
Если одна и та же сетка нужна на десятке экранов, не настраивайте её каждый раз заново. Есть два способа:
- Скопировать сетку. Выделите фрейм, кликните по строке сетки в правой панели, нажмите Ctrl+C (на Mac Command+C), выделите другой фрейм и нажмите Ctrl+V (Command+V). Вставили не туда: отмените действие через Ctrl+Z.
- Сохранить стиль. Выделите фрейм с готовой сеткой, в разделе Layout guide нажмите Apply styles, затем Create style, дайте стилю имя и снова Create style. Потом на любом новом фрейме тот же Apply styles и выбор стиля из списка.
Стиль лучше копирования тем, что его правка меняет сетку на всех фреймах, где он применён. Для команды это способ договориться об одной сетке на весь проект, с этого обычно начинается дизайн-система, которую ведёт продуктовый дизайнер.
Как включить, выключить и скрыть сетку
Скрыть сетку и удалить её — разные действия. Скрытая сетка остаётся на фрейме и, как уточняет справка Figma, продолжает работать, даже когда её не видно.
Все сетки файла сразу
- Откройте меню Zoom/view options: оно спрятано под значением масштаба в верхней части правой панели.
- Кликните по пункту Layout guides: галочка включает сетки, без галочки они скрыты.
Горячие клавиши здесь путают все, и справка Figma в том числе: в двух её статьях указаны разные сочетания.
| Источник | Windows | macOS |
|---|---|---|
| статья о layout guide | Shift+G | Shift+G |
| статья о настройках вида | Ctrl+Shift+4 | Control+G |
Попробуйте оба. Какое сочетание стоит в вашей версии, проверьте в панели горячих клавиш (о том, как вообще быстрее работать с горячими клавишами, у нас есть отдельный разбор): она открывается по Ctrl+Shift+? (на Mac Control+Shift+?).
Одна сетка на одном фрейме
Выделите фрейм и в разделе Layout guide нажмите на значок видимости у нужной строки. Так удобно, когда на фрейме две сетки, а сейчас мешает одна. Если сетка не нужна совсем, удалите её строку из раздела.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналПиксельная сетка и привязка к пикселям
Пиксельная сетка не связана с layout guide. Каждая её клетка равна одному пикселю при экспорте в масштабе 1x, и видна она только при увеличении от 400 %. Отсюда частый вопрос «включил, а сетки нет»: на обычном масштабе её не видно.
- включить или выключить: меню Zoom/view options → Pixel grid, или Ctrl+’ (на Mac Command+’);
- привязка к пикселям: там же пункт Snap to pixel grid, или Ctrl+Shift+’ (Command+Shift+’).
Привязка работает и без видимой сетки: при перемещении объекты встают на целые пиксели, а иконка не размывается при экспорте. Фреймы, секции и компоненты, по справке Figma, всегда встают на целые пиксели, даже если привязка выключена.
Направляющие и линейки
Когда нужна одна линия, а не сетка на весь фрейм, берите направляющую. Например, чтобы выровнять базовую линию заголовков на трёх соседних экранах.
- Откройте главное меню (Main menu) → View → Rulers. По краям холста появятся линейки.
- Потяните мышью от верхней или левой линейки на холст, получится направляющая.
- Чтобы увидеть расстояние от направляющей до края фрейма, выделите фрейм и тяните линию с зажатым Alt (на Mac Option).
Убрать направляющую можно тремя способами из справки Figma: утащить обратно на линейку, выделить и нажать Delete или кликнуть правой кнопкой и выбрать Remove guide. Направляющие бывают на холсте и внутри фрейма; та, что пересекает фрейм, показана пунктиром.
CheckroiПодборка курсов по дизайну интерфейсов и UX/UI144 курса • 46 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Сетка в автолейауте
Grid в автолейауте раскладывает объекты по ячейкам, линий поверх макета она не рисует. Figma в справке отдельно оговаривает, что это другая функция: layout guide помогает рисовать, а автолейаут определяет, как содержимое перестраивается при изменении размера.
- Выделите фрейм или несколько слоёв и нажмите Shift+A, чтобы включить автолейаут.
- В разделе Layout правой панели выберите вариант Grid.
- Задайте число колонок в поле Number of columns. Число строк по умолчанию стоит на Auto: строки добавляются и исчезают вместе с содержимым.
- Расстояния задайте в полях Gap between rows и Gap between columns, поля от края фрейма задаются в Horizontal padding и Vertical padding.
Такая сетка подходит для дашбордов, карточек каталога, бенто-блоков и таблиц. Ширину колонок можно задать в долях (fr), как в CSS Grid: три колонки по 1fr делят место поровну. Для разметки страницы под вёрстку по-прежнему нужен layout guide, а grid в автолейауте ставят внутри неё на конкретный блок.
Почему сетка не появляется
Шесть причин, из-за которых сетки не видно, и что с каждой делать:
| Что видите | Причина | Что сделать |
|---|---|---|
| нет раздела Layout guide | выделена группа или фигура, а не фрейм | выделить фрейм или обернуть группу во фрейм |
| сетка добавлена, но её не видно | все сетки выключены в меню Zoom/view options | поставить галочку Layout guides или нажать сочетание из таблицы выше |
| видно на одних фреймах и нет на другом | сетка скрыта значком видимости у этого фрейма | снова включить её в разделе Layout guide |
| фрейм на месте, сетки нет | фрейм повёрнут | поставить поворот 0° |
| Pixel grid включена, но не видна | масштаб меньше 400 % | приблизить холст |
| сочетание не срабатывает | в вашей версии другое сочетание или его перехватывает система | сверить сочетание в панели Ctrl+Shift+? или включить сетки через меню |
Если файл открыт только на просмотр, менять сетки не получится: нужен доступ на редактирование. Попросите владельца файла выдать его или сделайте копию себе в черновики. Как создать аккаунт и войти, если у вас его ещё нет, мы разобрали в инструкции по регистрации в Figma.
Ещё одна частая ошибка уже не техническая: сетку поставили, а блоки расставили на глаз. Сетка подсказывает края, а ставит блоки по ним дизайнер. Тяните объекты, пока край не прилипнет к колонке, и проверяйте ширину блока в поле W.
Где освоить Figma системно
Включить сетку можно за минуту. Подобрать сетку под продукт, собрать на ней адаптивный макет и передать его разработчику без вопросов — это уже работа веб-дизайнера, о которой подробно рассказано в статье кто такой веб-дизайнер, а путь с нуля разобран в материале как стать веб-дизайнером.
Бесплатного тарифа Starter для работы с сетками хватает. Платные тарифы, по справке Figma, новым клиентам из России не продают, поэтому при выборе курса смотрите, чтобы программа не требовала функций платных тарифов.
Ниже пять курсов по Figma из нашего каталога. Полный список с ценами и сроками есть в каталоге курсов по Figma, отдельно есть курсы по дизайну интерфейсов и по веб-дизайну.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Основы дизайна в Figma Перейти на сайт курса | Bonnie & Slide | 42 800 ₽ | 2366 ₽/мес. | 4 недели | Обзор курса |
| Figma 2.0 Перейти на сайт курса | Skillbox | 29 394 ₽ | 4899 ₽/мес. | 2 месяца | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса | Академия Синергия | 31 836 ₽ | 2653 ₽/мес. | 2 месяца | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса | Skillbox | 39 334 ₽ | 1091 ₽/мес. | 2 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по Figma
