Сетка – это важный инструмент для создания качественного дизайна сайта. С ее помощью расчеты становятся более простыми, а все объекты будут расставлены по местам. Сетка применяется только к фреймам. Поэтому сначала создаем фрейм и выделяем его. В правой панели инструментов находится раздел «Layout Grid», кликнув на который вы сможете активировать сетку. В этом же разделе вы можете выбрать размер пикселя сетки. По умолчанию он будет составлять 10px.
Чтобы сменить стандартный размер сетки можно перейти в меню основных настроек в правой верхней части интерфейса, и выбрать в разделе «Preferences» пункт «Nudge amount». Далее появится строка, в которой вы можете изменить стандартный размер сетки 10, на другой, который вам необходим.
В дополнительных настройках сетки вам будет доступна смена ее цвета. Это позволит выбрать любой цвет, а также определить прозрачность сетки, благодаря чему она может стать более насыщенной, или наоборот менее заметной.
Помимо сетки вы можете расчерчивать фрейм на колонки и строки. Для этого в дополнительных настройках есть функция «Columns» и «Rows».
Выбрав функцию «Columns» фрейм разделится на колонки, размер и количество которых вы также можете выбрать.
Инструмент «Rows» позволит разделить фрейм на строки.
Фигма позволяет применять все эти инструменты одновременно, разделяя фрейм на сетку, столбики, и строчки, комбинируя необходимый размер. Кроме того, можно выбирать расположение разметки, например, используя ее только по центру, или только по краям.
Дополнительные настройки:
- Count — количество колонок;
- Width — ширина колонки;
- Gutter — отступ между колонками;
- Margin — отступ сетки от правого и левого края макета;
- Stretch – резиновая сетка, благодаря которой ширина колонки задается автоматически программой. Часто бывает так, что размер фрейма не делится поровну, а высчитывать полупиксели может быть сложно и долго. В таком случае данная функция будет полезной.
Теперь рассмотрим, как влияют сетки на позиционирование объекта. Для примера возьмем два фрейма с прямоугольниками. В одном фрейме будет разметка, а в другом нет. Так как прямоугольник был скопирован, то его расположение одинаковое в двух фреймах. Если выделить эти два объекта, и начать перемещать, то они будут находиться на одинаковом расстоянии.
Однако если выделить два фрейма и начать изменять их размеры, например, стягивая их по правой стороне, то объект, который находится в сетки не будет менять свое расположение, относительно расстояния от края холста, в отличии от объекта, которых находится не в размеченном фрейме. В втором случае объект, не привязанный к сетке плавно смещается. То же самое касается и масштабирования. По такому принципу устроен приоритет сетки в Фигме.
Уникальность сетки в том, что при изменении размеров фрейма, автоматически меняется и размер сетки, так как она будет тянуться вслед за макетом. Это намного удобнее, чем сетка в фотошопе, которая часто была отдельным слоем, что приводило к разным проблемам – потере сетки, трудностям в добавлении и перемещении новых элементов.
Помимо сетки в программе есть дополнительный инструмент – «направляющие». Он также применим для разметки фрейма, и для более точного размещения объектов. Как мы уже рассмотрели в 3 уроке, в Фигме есть инструмент линейка. Он находится в разделе «Yiew», пункт: «Rulers». Выбрав эту функцию в верхней и левой части появится линейка. Горячие клавиши этой функции «Shift+R». Линейка позволяет не только увидеть расстояние от объекта до края холста, но и вывести направляющие линии. Для этого наведите курсор мышки на линейку сверху или сбоку, и зажимая левую кнопку перетяните линейку на территорию фрейма.
Это можно сделать со всех сторон, создав своего рода поля или рамку для ориентира, чтобы не выходить за эти пределы.
Как видно направляющие имеют свойства магнита, и все объекты легко к ним прикрепляются.
Итак, в этом уроке мы рассмотрели основные инструменты разметки в Фигме, которые позволяют распределять объекты в фрейме не на глаз, а придерживаясь точных размеров, что сделает ваш дизайн привлекательным на вид и точным.
Сообщить об ошибке