Интерфейсная сетка в программе Figma

Интерфейсная сетка (Interface Grid)

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

Чтобы создать интерфейсную сетку

  • выделите Артборд;
  • затем справа на панели свойcтв найдите заголовок Layout Grid и нажмите справа от него на изображение знака «+». Под заголовком появится строка с только что созданной сеткой;
  • нажмите на иконку в левой части строки. Затем в верхнем переключателе выберите «Grid»;
  • в поле Size (Размер) введите 20. Если у вас слабый монитор, то можете указать значение прозрачности 20%.

Затем повторите те же самые действия, чтобы создать еще одну сетку, но теперь:

  • в поле Size укажите значение 10 вместо 20;
  • значение прозрачности укажите 10%, если в прошлый раз вы указывали 20%;
  • если не изменяли значение прозрачности на 20%, то ввидете значение 5%.

Старый способ создания интерфейсной сетки

Прежде всего необходимо, с помощью инструмента Frame Tool создать арт-борд шириной (Width) 1080 и высотой (Height) 2000, эти параметры можно указать на панели свойств.

Для того, чтобы создать интерфейсную сетку, необходимо найти на панели свойств заголовок Layout Grid и создать новую сетку с помощью нажатия на иконку со знаком плюс напротив заголовка Layout Grid (макет сетки) и ввести ей следующие параметры (кликнув на иконку сетки расположенную слева от надписи с только что созданной сеткой):

  • в верхнем переключателе выберем Columns (колонки);
  • потом найдем выпадающий список Type (тип) и веберем в нем значение Left;
  • далее в поле Count (Количество столбцов) укажем 200;
  • а в поле Width (ширина) введем значение 20;
  • в поле Gutter (желоб или расстояние между колонками) поставим значение 0;
  • для тех, у кого слабые мониторы, могут указать значение прозрачности 15-20% вместо 10%;

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

Теперь давайте создадим горизонтальное, для этого создадим еще одну сетку нажатием на знак плюс, рядом с заголовком Layout grid, затем:

  • в верхнем переключателе выберем Rows (строки).
  • потом в выпадающем списке Type веберем значение Top ;
  • далее в поле Count укажем 200 ;
  • а в поле Height введем значение 20 ;
  • в поле Gutter укажем значение 0;

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

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

для вертикального членения следующие настройки:

    • columns;
    • type: left;
    • count: 200 (если ширина макета больше 2000, то ставьте значение большее двухсот);
    • width: 10;
    • gutter: 0;
    • значение прозрачности 5% (если вы увеличивали, например до 20%, то оставьте значение 10%).

для горизонтального членения следующие настройки:

    • rows;
    • type: top;
    • count: 200 (если высота макета больше 2000, то ставьте значение большее двухсот);
    • height: 10;
    • gutter: 0;
    • значение прозрачности 5% (если вы увеличивали, например до 20%, то оставьте значение 10%).

Обратите внимание — этот урок является частью бесплатного курса «Веб-дизайн это просто».