Что такое сетка макета и какие сетки бывают
Сетка макета — это полупрозрачные колонки, строки или ячейки поверх фрейма. По ним выравнивают блоки, чтобы края и отступы совпадали на всех экранах. На сам макет сетка не влияет: это подсказка для глаз.
На одном фрейме может быть несколько сеток сразу. Поэтому модульную сетку собирают из двух: колонок и строк. В таблице — какие сетки бывают и как задать каждую в Morfa.
| Сетка | Как выглядит | Для чего | Как задать в Morfa |
|---|---|---|---|
| Колоночная | Вертикальные колонки с промежутками | Сайты и приложения | Вид «Колонки» |
| Строчная (базовая) | Горизонтальные полосы одной высоты | Вертикальный ритм, строки текста | Вид «Строки» |
| Модульная | Колонки и строки вместе делят экран на модули | Дашборды, каталоги, галереи, вёрстка журнала | «Колонки» и «Строки» на одном фрейме |
| Квадратная | Клетки одного размера | Иконки, шаг 8 px | Вид «Сетка», поле «Размер» |
| Пиксельная | Каждый пиксель холста | Чёткие линии и края | «Пиксельная сетка» (⇧'), видна при масштабе от 800 % |
Как сделать сетку на фрейме
Сетка принадлежит фрейму: при типе «Растянуть» колонки меняют ширину вместе с ним. Раздел «Сетка макета» есть у фреймов, компонентов, наборов вариантов и экземпляров. У групп и фигур сетки нет.
Создайте фрейм
Нажмите F и выберите готовый размер справа: Desktop (1440×1024) для сайта, iPhone 16 (393×852) для телефона. Остальные размеры собраны в таблице размеров экранов.
Добавьте сетку
Во вкладке «Дизайн» найдите раздел «Сетка макета» (он ниже эффектов) и нажмите «+». На фрейме появится квадратная сетка 10 px.
Откройте настройки
Нажмите на значок слева в строке сетки. В списке наверху окна выберите «Колонки». По умолчанию это 5 колонок, тип «Растянуть», промежуток 20 px, поля 0.
Задайте колонки
Впишите «Количество», «Поля» и «Промежуток». Для сайта на 1440 px подойдут 12 колонок, поля 120 px и промежуток 24 px — так устроен шаблон «Сайт».
Добавьте строки, если нужны модули
Нажмите «+» ещё раз и выберите вид «Строки». Значок глаза в строке скрывает одну сетку, «−» удаляет её.
Настройки колонок: количество, поля, промежуток
Поля окна «Настройки сетки» одинаковые для колонок и строк. У строк вместо ширины — высота, а типы называются «По верхнему краю» и «По нижнему краю».
| Поле | Что задаёт |
|---|---|
| «Количество» | Сколько колонок. Пустое поле — «Авто»: колонок заданной ширины помещается столько, сколько влезет во фрейм |
| «Тип» | «Растянуть» делит ширину фрейма между колонками. «По левому краю», «По центру» и «По правому краю» ставят колонки фиксированной ширины к краю или к центру |
| «Ширина» | Ширина одной колонки. При типе «Растянуть» считается сама, в поле стоит «Авто» |
| «Поля» или «Отступ» | При «Растянуть» — поля от краёв фрейма до крайних колонок. При других типах — отступ от выбранного края |
| «Промежуток» | Расстояние между колонками (gutter) |
| «Цвет» | Цвет в HEX и непрозрачность. По умолчанию красный, 10 % |
При типе «Растянуть» ширина колонки = (ширина фрейма − 2 × поля − промежуток × (колонок − 1)) ÷ колонок. В шаблоне «Сайт» это (1440 − 240 − 264) ÷ 12 = 78 px.
Сколько колонок брать для сайта, планшета и телефона
Это частые значения, а не правило Morfa. Главное — одинаковые поля и промежутки на всех экранах одного размера.
| Фрейм | Колонки | Поля | Промежуток |
|---|---|---|---|
| Desktop, 1440×1024 | 12 | 120 px (как в шаблоне «Сайт») | 24 px |
| iPad mini 8.3, 744×1133 | 8 | 32 px | 24 px |
| iPhone 16, 393×852 | 4 | 16 px | 16 px |
12 колонок берут потому, что это число делится на 2, 3, 4 и 6: на них ровно ложатся половины, трети и четверти экрана. Как собрать страницу на такой сетке, рассказано в гайде макет сайта.
Стиль сетки: одна сетка для всех экранов
Чтобы не настраивать колонки на каждом фрейме, сохраните сетку как стиль. Если потом изменить стиль, сетка поменяется на всех фреймах, где он стоит.
Создайте стиль
Выделите фрейм с настроенной сеткой. В заголовке раздела «Сетка макета» нажмите значок «Стили сетки» и выберите «Создать стиль из сетки».
Примените к другим фреймам
Выделите другой фрейм, откройте «Стили сетки» и выберите стиль из списка. Вместо списка сеток в разделе появится название стиля.
Отсоедините, если нужен особый случай
Кнопка «Отсоединить стиль» возвращает сетки фрейма в обычный список: их можно менять, не трогая стиль.
Когда ничего не выделено, стили сетки видны во вкладке «Дизайн» вместе с остальными стилями файла. Через «Файл → Опубликовать библиотеку…» стиль уходит в библиотеку команды вместе с цветами и текстом — об этом гайд для дизайн-систем. В шаблоне «Сайт» уже есть стиль «Сетка/Десктоп 12».
Как включить и скрыть сетку: ⌃G и пиксельная сетка
Если сетка задана, но не видна, проверьте две вещи: значок глаза в строке сетки и команду «Вид → Сетки макета». Она показывает и скрывает все сетки макета на холсте сразу. Клавиша на Mac — ⌃G, на Windows и Linux — Ctrl+Shift+4. По умолчанию сетки показаны, и выбор запоминается в браузере.
«Пиксельная сетка» (⇧') рисует границы пикселей, когда масштаб холста 800 % и больше. «Привязка к пиксельной сетке» (⇧⌘') ставит слои на целые пиксели, чтобы края не размывались. Обе включены по умолчанию и есть в меню «Вид».
- ⌃G
- Сетки макета (на Windows и Linux — Ctrl+Shift+4)
- ⇧'
- Пиксельная сетка
- ⇧⌘'
- Привязка к пиксельной сетке
- ⇧R
- Линейки
- ⇧M
- Измерение
Как выравнивать блоки по сетке
Слои не прилипают к колонкам сетки макета. Привязка при перемещении работает к соседним слоям, краям фрейма и направляющим. Поэтому края колонок удобно продублировать направляющими.
Включите линейки
Нажмите ⇧R: линейки появятся сверху и слева от холста.
Вытяните направляющие
Потяните мышью из линейки и отпустите на краю колонки, например на 120 и 1320 px для шаблона «Сайт». К направляющим слои прилипают при перемещении.
Выровняйте блоки клавишами
Выделите блоки одной колонки и нажмите ⌥A, чтобы выровнять их по левому краю. ⌃⌥V делает интервалы по вертикали одинаковыми, на Windows и Linux это Alt+Shift+V.
Повторите сетку автолейаутом
Внутри секции задайте автолейауту отступы, равные полям сетки, и интервал, равный промежутку. Тогда блоки встанут по колонкам и не съедут при правках.
Как устроены интервалы и отступы автолейаута, описано на странице автолейаута, все клавиши выравнивания — в списке горячих клавиш.
Чего в сетках Morfa нет
Колонки, строки, квадратные и пиксельные сетки работают. Вот чего нет:
- Привязки слоёв к колонкам сетки макета: выравнивайте направляющими и клавишами.
- Сетки автолейаута (Grid auto layout): сложные раскладки собирают из вложенных автолейаутов.
- Сетки в экспорте и в коде: в PNG, SVG и PDF она не попадает, во вкладке «Код» и в проекте React её тоже нет.
- Сеток на «Доске»: там нет ни сеток макета, ни точечной сетки.