Колоночная сетка для Web и UI/UX дизайна в программе Figma

Колоночная сетка (Column Gird)

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

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

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

  • в переключателе выберем Columns (колонки);
  • затем найдем выпадающий список Type (тип) и веберем в нем значение Center;
  • далее в поле Count укажем значение 12;
  • а в поле Width (ширина) введем значение 80;
  • в поле Gutter укажем цифру 0;
  • для тех, у кого слабые мониторы, могут указать значение прозрачности 30-40% вместо 10%;
  • Отлично, мы создали колоночную сетку шириной 960 (12*80) без желобовили без межколоночного расстояния.

    Теперь давайте создадим расстояние между колонками. Для этого откроем настройки колоночной сетки и значение ширины (width) изменим на 80, а в поле gutter укажем значение 20. Как вы могли заметит, колонки закрасились и стали очень яркими, поэтому давайте уменьшим их прозрачность до 15 %.

    Отлично, колоночная сетка создана. Теперь можно приступить к с созданиюмодульной сетки.

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