Каталог бесплатных курсов по it-специальностям freetutorials.ru!

х
Наверх

Сетки и направляющие в Figma

Сетка – это важный инструмент для создания качественного дизайна сайта. С ее помощью расчеты становятся более простыми, а все объекты будут расставлены по местам. Сетка применяется только к фреймам. Поэтому сначала создаем фрейм и выделяем его. В правой панели инструментов находится раздел «Layout Grid», кликнув на который вы сможете активировать сетку. В этом же разделе вы можете выбрать размер пикселя сетки. По умолчанию он будет составлять 10px.

включение сетки в FigmaЧтобы сменить стандартный размер сетки можно перейти в меню основных настроек в правой верхней части интерфейса, и выбрать в разделе «Preferences» пункт «Nudge amount». Далее появится строка, в которой вы можете изменить стандартный размер сетки 10, на другой, который вам необходим.  

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

смена цвета сетки в FigmaПомимо сетки вы можете расчерчивать фрейм на колонки и строки. Для этого в дополнительных настройках есть функция «Columns» и «Rows».

добавление колонок в сетку в FigmaВыбрав функцию «Columns» фрейм разделится на колонки, размер и количество которых вы также можете выбрать.

разделение сетки на столбики в FigmaИнструмент «Rows» позволит разделить фрейм на строки. 

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

комбинирование столбиков и строчек в сетке в FigmaДополнительные настройки:

  • Count — количество колонок;
  • Width — ширина колонки;
  • Gutter — отступ между колонками;
  • Margin — отступ сетки от правого и левого края макета;
  • Stretch – резиновая сетка, благодаря которой ширина колонки задается автоматически программой. Часто бывает так, что размер фрейма не делится поровну, а высчитывать полупиксели может быть сложно и долго. В таком случае данная функция будет полезной.

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

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

приоритет сетки в FigmaУникальность сетки в том, что при изменении размеров фрейма, автоматически меняется и размер сетки, так как она будет тянуться вслед за макетом. Это намного удобнее, чем сетка в фотошопе, которая часто была отдельным слоем, что приводило к разным проблемам – потере сетки, трудностям в добавлении и перемещении новых элементов.  

Помимо сетки в программе есть дополнительный инструмент – «направляющие». Он также применим для разметки фрейма, и для более точного размещения объектов. Как мы уже рассмотрели в 3 уроке, в Фигме есть инструмент линейка. Он находится в разделе «Yiew», пункт: «Rulers». Выбрав эту функцию в верхней и левой части появится линейка. Горячие клавиши этой функции «Shift+R». Линейка позволяет не только увидеть расстояние от объекта до края холста, но и вывести направляющие линии. Для этого наведите курсор мышки на линейку сверху или сбоку, и зажимая левую кнопку перетяните линейку на территорию фрейма. 

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

боковая и верхняя направляющая в FigmaКак видно направляющие имеют свойства магнита, и все объекты легко к ним прикрепляются.

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

Полезные ссылки:


Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Пройдите, пожалуйста, защиту от спама.