Как работать с модульной сеткой в Figma


12.09.2019 Время чтения - 8 минут 536

модульная сетка

Модули – это условные единицы, ячейки сетки, образующие собой систему пропорций. Что же делает эта модульная сетка? Во-первых, она ускорит работу, экономя нам массу времени на попытки гармонично расставить все элементы. Во-вторых, с помощью сетки мы сможем понять, какой кегль нам нужно применить и каких размеров должен быть каждый блок. В целом, модульная сетка это некий каркас, основной задачей которого является облегчение построения сайта.

Зачем нужна модульная сетка?

При разработке макетов вы можете столкнуться с некоторыми трудностями. Необходимы точность и гибкость, чтобы проекты могли адаптироваться под различные экраны.

Pixel Grid (пиксельная сетка) дает нам полный контроль над размещением, а Layout Grid (модульная сетка) – большую гибкость в реализации наших проектов.

В этой статье мы рассмотрим:

    1. Что такое модульные сетки
    2. Как пользоваться модульной сеткой
    3. Свойства модульных сеток
    4. Переключение видимости сеток
    5. Стили модульных сеток
    6. Работа с сетками и ограничениями макетов
 
 

Что такое модульная сетка?

Модульные сетки помогают нам выравнивать объекты во фрейме. Они обеспечивают визуальную структуру наших проектов и помогают им оставаться логичными и целостными на разных платформах и устройствах.

Модульная сетка не зависит от пиксельной. То есть, она не зависит от конкретного разрешения или размеров.

К фреймам вы можете применять только модульную сетку (Layout Grid). Это может быть фрейм верхнего уровня или фрейм на некотором уровне вложенности.

модульная сетка

Модульные сетки позволяют:

• Выглядеть проектам согласованно на разных платформах.

• Совершать меньше действий при определении макетов, что в свою очередь сохраняет вам время.

• Поддерживать различные методы компоновки, таких как галереи, иконки или макеты всей страницы.


Настройка модульной сетки

Вы можете применить модульную сетку к любому фрейму. Помните, что компоненты это тоже фреймы, так что вы можете применять сетки и к ним!

Настройки модульной сетки (Layout Grid) находятся на панели свойств:

настройка модульной сетки

Для того, чтобы применить модульную сетку необходимо выполнить следующие шаги:

  1. Выберите фрейм на панели слоев или на холсте:

фрейм

2. Нажмите на значок «+» рядом с модульной сеткой (Layout Grid) на панели свойств:

добавление модульной сетки

3. Единая сетка будет применена к фрейму по умолчанию:

добавление модульной сетки

4. Затем щелкните на значок стеки, чтобы открыть окно параметров и задайте необходимые вам:

параметры модульной сетки

Свойства модульной сетки

Существует три типа сеток: пропорциональная квадратная сетка (Uniform Grid), сетка со столбцами (Columns Grid) и сетка с рядами (Rows Grid).

Для квадратной сетки вы можете устанавливать как её размер, так и цвет. Такие сетки отлично подходят для требующих точности ситуаций, таких как разработка символов или иконок.

Для сеток со столбцами и строками вы можете установить ширину и/или высоту сетки, а также разделитель и поля. Они идеально подходят для разработки адаптивных веб-интерфейсов и для мобильных устройств.

Сетки можно использовать по отдельности или комбинировать их для поддержки более сложных макетов.

Изменение модульной сетки

Чтобы выбрать тип сетки:

  1. На панели свойств нажмите на значок сетки:

изменение модульной сетки

2. Нажмите на «Сетка» (Grid) в выпадающем списке:

модульная сетка

3. Здесь вы можете выбрать:

a. Квадратную сетку (Uniform Grid)

b. Сетку с колонками (Column Grid)

c. Сетку с рядами (Row Grid)

4. После этого вы можете продолжить настройку сетки по таким параметрам:

• Свойства квадратной сетки

• Свойства сетки со столбцами и/или рядами

Свойства квадратной сетки (Uniform Grid)

При выборе квадратной сетки можно установить её размер. Это определит количество пикселей в каждом квадрате.

Например: в сетке на 10пт по умолчанию в каждом квадрате будет содержаться 100 пикселей (10 на 10 пикселей).

  1. Нажмите на значок сетки, чтобы открыть настройки.
  2. Введите в поле «Размер» (Size) желаемый размер:

uniform grid

3. Нажмите на ×, чтобы закрыть окно и вернуться к холсту:

Свойства столбцов и рядов

Вы можете использовать модульные сетки или со столбцами или с рядами, а можете и совместить их. Такая сетка даст вам больший контроль над макетом.

Можно установить следующие свойства вашей сетки:

свойства модульной сетки

Свойства сеток

• «Количество» (Count) определяет, сколько столбцов или строк будет в сетке.

• «Разделитель» (Gutter) определяет расстояние между каждой колонкой или строкой.

• «Предел» (Margin) – расстояние от края, на котором начинается столбец или строка. Это относится только к Stretch-сеткам.

• «Смещение» (Offset) – расстояние сверху или слева от начала столбца или строки.

Типы сеток

Существует два различных типа модульных сеток: фиксированный и гибкий.

Для сеток с фиксированной разметкой вы можете определить как ширину (столбцов), так и высоту (рядов), а также их количество.

Макетная сетка может быть установлена ​​на:

• Верхнюю часть или центр фрейма для рядов

• Левый край или центр фрейма для столбцов

типы модульных сеток

Гибкие сетки будут адаптироваться под размер фрейма, что, соответственно, позволит вашим проектам реагировать на изменение его масштаба.

Ширина или высота сетки будут автоматически определены в зависимости от размера фрейма.

типы модульных сеток

Цвет

Цвет макетной сетки по умолчанию — красный (#FF0000) с непрозрачностью в 10%.

Вы можете изменить цвет и непрозрачность любой сетки:

  1. Нажмите на значок сетки на панели свойств.
  2. Нажмите на образец цвета (Color):

цвет модульной сетки

3. Используя палитру цветов выберите новый цвет:

цвет модульной сетки

4. Отрегулируйте непрозрачность, если требуется.


Комбинирование модульных сеток

Как уже было сказано выше, вы можете применить множество сеток к одному фрейму. Это удобно при разработке сложных макетов.

Например: можно применить сетки с колонками и сетки с рядами для более качественных вертикальных и горизонтальных выравниваний.

комбинирование модульных сеток

  1. ерите фрейм, к которому вы хотите добавить другую сетку макетов.
  2. Нажмите на значок «+» рядом с модульной сеткой (Layout Grid) на панели свойств.
  3. Выберите модульную сетку (Layout Grid) в выпадающем списке.
  4. Задайте любые другие свойства, то есть количество, высоту или ширину, разделитель, поле, тип и/или цвет.
  5. Повторите, чтобы добавить больше модульных сеток на фрейм.

Переключение видимости модульной сетки

Вы можете переключать видимость ваших сеток. Это удобно, когда вам нужно скрыть одну или несколько сеток, не удаляя их полностью.

Модульные сетки будут работать, даже если они невидимы.

Переключение видимости всех модульных сеток

Вы можете в один момент переключить видимость всех модульных сеток вашего проекта.

  1. Нажмите на кнопку зума в правом верхнем углу экрана. Это откроет меню просмотра настроек (View Settings).
  2. Если рядом с опцией Layout Grids нет галочки то при нажатии на это поле они станут видимыми.
  3. Если галочка уже есть, щелкните по Layout Grids, чтобы скрыть их:
  4. Или вы можете использовать сочетания клавиш для выключения и включения видимости сеток:

• Для MacOS: [Control] + [G]

• Для Windows: [Ctrl] + [Shift] + [4]

видимость модульной сетки


Переключение видимости отдельных модульных сеток

Если вы хотите включить или отключить какую-то одну сетку то можете сделать это на панели свойств.

  1. Выберите необходимы фрейм.
  2. Найдите раздел Layout Grids на панели свойств.
  3. Щелкните по значку «открытого глаза» рядом с сеткой, чтобы отключить ее:

видимость модульной сетки

4. Щелкните по значку «закрытого глаза» рядом с сеткой, чтобы включить его:

видимость модульной сетки


Стили модульной сетки

После того, как вы подобрали себе идеальную модульную сетку, вы можете создать стиль для использования в своих проектах.

Создание стиля

  1. Выберите фрейм на холсте с примененной сеткой.
  2. На панели свойств щелкните по значку Style (четыре точки) рядом с Layout Grid:

стиль модульной сетки

3. В окне стилей сетки (Grid Styles) нажмите на «+«:

добавление стиля модульной сетки

4. Дайте стилю модульной сетки запоминающееся имя:

имя стиля модульной сетки

5. Нажмите на Create Style, чтобы завершить процесс.


Применение стиля

  1. Создайте или выберите фрейм на холсте.
  2. На панели свойств щелкните по Layout Grid Style:

применение стиля модульной сетки

3. Выберите стиль модульной сетки в окне:

стиль модульной сетки

4. Модульная сетка будет применена к выбранному фрейму:

модульная сетка фрейм


Совет! Вы также можете копировать и вставлять сетки между фреймами. Но такую операцию нельзя проделать для фреймов с примененными стилями.

  1. Выберите фрейм, который вы хотите скопировать.
  2. Нажмите на Layout Grid на панели свойств.
  3. Используйте сочетания клавиш для копирования модульной сетки:

a. Для MacOS: [⌘] + [C]

b. Для Windows: [Ctrl] + [C]

4. Выберите фрейм, к которому вы хотите применить сетку.

5. Используйте комбинацию клавиш для вставки:

a. Для MacOS: [⌘] + [V]

b. Для indows: [Ctrl] + [V]


Работа с сетками и ограничениями

Для более сложных конструкций нам нужна точность и гибкость, чтобы гарантировать правильное поведение проектов при изменении масштаба.

Ограничения хороши для понимания базовой структуры того, где находится объект внутри фрейма. В сочетании с модульны сетками они обеспечивают основу мощной системы.

Сетка с 8 точками

8-точечная сетка является популярным инструментом для разработки макетов пользовательского интерфейса. Он являет собой использование сеток с количеством ячеек кратных 8 для определения размещения объектов в вашем дизайне.

Вы можете использовать эту систему при проектировании для фиксированных ограничений, например, в мобильном приложении. Но это также полезно при разработке адаптивных макетов.

Существует два распространенных метода реализации 8-точечной системы:

  1. Жесткая сетка: включает в себя размещение объектов на фиксированной сетке с шагом в 8 пунктов. В Figma это будет включать в себя применение квадратной сетки к фрейму с размером в 8пт.
  2. Мягкая сетка: включает в себя размещение объектов на расстоянии друг от друга, кратное 8. Будет включать в себя применение таблицы и/или столбца сетки со свойствами, кратными 8.

Часто задаваемые вопросы

Могу ли я переключать видимость всех сеток в Figma одновременно?

Да, можете! Это можно сделать из меню View Settings в верхнем правом углу Figma.

Почему не отображаются мои сетки в Figma?

Есть несколько причин, по которым модульная сетка может не отображаться:

• Сетка была отключена на панели свойств.

• Все сетки в проекте отключены.

• Выбранный слой не является фреймом. Модульные сетки можно применять только к ним.

• Фрейм был перевёрнут. Убедитесь, что поворот ваших объектов = 0º, прежде чем применять макетную сетку.

Как мне скопировать модульную сетку в Figma?

Вы можете скопировать сетку с одного фрейма и применить ее к другому. Или же вы можете создать стиль модульной сетки, который можно будет использовать повторно.

Статья в оригинале.

Читайте так же: Cancel vs Close: разница в дизайне