Почему в фигме не видно сетку

В дизайне интерфейсов Figma — один из самых мощных инструментов, но даже опытные дизайнеры сталкиваются с ситуацией: «Сетка есть в настройках, а в рабочей области её не видно». Эта проблема не связана с багом программы, а почти всегда возникает из-за неправильной настройки контекста, неверного понимания логики работы сеток или технических ограничений. Сетка в Figma — это не глобальный фон, а параметр, привязанный к конкретному фрейму, и если вы не понимаете, как она работает, вы можете часами искать её там, где её не может быть. В этой статье мы разберём все причины, почему сетка не видна, как её включить, настроить и убедиться, что она работает именно там, где вам нужно. Вы получите чёткий пошаговый алгоритм диагностики, экспертные советы и ответы на самые частые вопросы.

Почему в Figma не видно сетку: 7 основных причин

Первое, что нужно понять: сетка в Figma — это не глобальный элемент, как в Photoshop. Она привязана к конкретному фрейму или группе. Если вы выделили текстовый блок, а не фрейм — сетка не отобразится. Это основная причина, по которой дизайнеры думают, что «Figma сломалась». Сетка видна только тогда, когда активен контейнер, для которого она настроена. Представьте, что вы настраиваете сетку в комнате — если вы не в этой комнате, вы её не увидите.

Вторая распространённая причина — сетка отключена визуально. Даже если вы настроили её, она может быть скрыта через меню View > Show Grid. Некоторые пользователи случайно нажимают Ctrl+Shift+G (или Cmd+Shift+G на Mac) и забывают, что это переключатель. Третья причина — сетка настроена с шагом 0 или с нулевыми полями, что делает её невидимой. Четвёртая — вы работаете в режиме «Превью» (Preview Mode), где все вспомогательные элементы, включая сетку, скрыты по умолчанию.

Пятая причина — сетка применена к родительскому фрейму, а вы смотрите на вложенный слой. В Figma сетка не наследуется автоматически, если только вы не включили опцию «Use parent grid». Шестая — вы используете компонент или варианты, где сетка отключена на уровне компонента. Седьмая — сетка перекрыта другим элементом с высоким z-index, например, полупрозрачным прямоугольником, который вы не замечаете.

Как включить сетку в Figma: пошаговая инструкция

Если сетка не видна, следуйте этому алгоритму:

1. Выберите фрейм или группу, к которому хотите применить сетку. Не кликайте на текст, иконку или фигуру — кликните по краю фрейма, чтобы он выделился с рамкой.
2. Перейдите в верхнее меню: View > Show Grid. Убедитесь, что рядом с пунктом стоит галочка.
3. Если галочки нет — включите её. Если галочка есть, но сетка всё ещё не видна — переходите к следующему шагу.
4. Нажмите View > Grid Settings или используйте сочетание клавиш Ctrl+Shift+G (Cmd+Shift+G на Mac).
5. В открывшемся окне убедитесь, что тип сетки выбран: Grid (а не Columns или None).
6. Задайте шаг сетки — рекомендуется 8px или 4px для интерфейсов. Убедитесь, что поля (offset) не установлены в 0, если вы хотите видеть сетку по краям.
7. Проверьте, не включён ли режим Preview (кнопка в правом верхнем углу). Если да — выйдите из него.

Если после всех этих действий сетка всё ещё не видна — проверьте, не находится ли фрейм внутри другого фрейма. В этом случае сетка может быть задана только для родительского контейнера. Попробуйте временно отключить родительский фрейм (правый клик > Detach from Parent) — если сетка появилась, значит, проблема в наследовании.

Почему сетка не применяется к фрейму

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

Если вы используете компоненты, убедитесь, что сетка настроена на уровне основного компонента, а не на экземпляре. Экземпляры не наследуют сетку, если не включена опция «Use parent grid» в настройках компонента. Также проверьте, не отключена ли сетка в режиме «Component Variants» — в некоторых версиях Figma при переключении между вариантами сетка может временно исчезать.

Сетка перекрыта элементом: как это исправить

Иногда сетка действительно есть, но вы её не видите — потому что она перекрыта другим элементом. Это особенно часто происходит, когда:

— На фрейм наложен полупрозрачный прямоугольник (например, для фона);
— Используется маска или clipping;
— Есть слой с высоким z-index, который полностью закрывает область сетки.

Чтобы проверить это:

1. В панели Layers временно скройте все слои (нажмите глаз рядом с каждым элементом).
2. Постепенно включайте слои по одному, начиная с нижних.
3. Когда сетка появится — вы нашли перекрывающий элемент.

Решение: либо переместите перекрывающий слой ниже сетки (вниз по стеку), либо уменьшите его непрозрачность, либо отключите его при работе с сеткой. Также можно использовать функцию Lock (Ctrl+Shift+L) для временного блокирования слоёв, чтобы они не мешали.

Настройки сетки: шаги, типы, рекомендации

Figma предлагает три типа сеток: Grid, Columns и None. Grid — это классическая сетка с линиями по горизонтали и вертикали. Columns — только вертикальные столбцы, без горизонтальных линий. Они используются для макетов текста и карточек.

Вот таблица рекомендуемых настроек для разных задач:

Чтобы сохранить настройки как шаблон, создайте фрейм с нужной сеткой, скопируйте его (Ctrl+C), затем вставляйте как базовый слой для новых проектов. Это сэкономит вам часы на ручную настройку.

Экспертное мнение: как правильно использовать сетку

Екатерина подчёркивает: многие дизайнеры включают сетку, но не используют её для выравнивания. Они просто смотрят на неё, как на фон. Это неправильно. Сетка должна быть инструментом для точного позиционирования. Используйте функцию Align to Grid (в панели Properties), чтобы элементы автоматически «прилипали» к линиям. Также активируйте Smart Guides — они помогут вам точно сопоставлять элементы с сеткой, даже если она не видна.

Частые вопросы и ответы

• Почему сетка исчезает при масштабировании? Сетка в Figma масштабируется вместе с видом. Если вы уменьшили масштаб до 25% или меньше, линии становятся слишком тонкими. Увеличьте масштаб до 100% или выше — линии станут чётче. Также проверьте настройки «Opacity» в Grid Settings — она не должна быть ниже 30%.
• Можно ли сделать сетку постоянной для всех файлов? Нет, Figma не поддерживает глобальные настройки сетки. Но вы можете создать шаблонный файл с настроенной сеткой и использовать его как основу для новых проектов. Сохраните его как Template в библиотеке.
• Почему сетка не работает в режиме “Prototype”? В режиме прототипирования (Preview) все вспомогательные элементы — сетки, гайдлайны, размеры — скрыты по умолчанию. Это сделано для того, чтобы пользователь видел интерфейс так, как он будет выглядеть в реальности. Переключитесь обратно в режим Design, чтобы увидеть сетку.
• Как сделать сетку цветной? Figma не позволяет менять цвет сетки напрямую. Но вы можете создать «имитацию» сетки с помощью повторяющихся линий (Line) с цветом и прозрачностью, а затем закрепить их как Background.
• Сетка есть, но элементы не прилипают к ней — что делать? Убедитесь, что в панели Properties включена опция “Align to Grid”. Также проверьте, не включён ли режим “Snap to Grid” — он находится в верхнем меню: View > Snap to Grid. Без него элементы не будут автоматически притягиваться к линиям.

Заключение

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

• Сетка привязана к фрейму — не к проекту или документу.
• Всегда проверяйте View > Show Grid и View > Snap to Grid.
• Сетка не наследуется автоматически между фреймами — настраивайте каждый вручную или используйте шаблоны.
• Перекрывающие элементы — частая причина, почему сетка «исчезает».
• Используйте Align to Grid и Smart Guides для точного позиционирования.