Система сеток (Layout Grid) в Figma

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

   При этом вы можете увидеть там ещё и значёк "стиль" (четыре точечки), тоесть в Figma вы можете создавать не только стили цвета, эффектов, но ещё и стили для Layout.

   Помимо этого, как и другие свойства Layout тоже может накладываться в несколько слоёв в одном фрейме. Их можно изменять как угодно, скрывать, удалять и т.д. Все эти настройки работают точно так же как и с цветом.

   Давайте подробнее  разберёмся с Layout Grid в Figma.

   По умолчанию при клике на "+" у вас появляется сетка с шагом 10x10. Вы можете её изменить (поменять шаг, цвет). Помимо сетки здесь ещё можно выбрать колонки либо строки.

   Колонки (Columns) - это самый яркий представитель вообще любой системы сеток. Все дизайнеры очень часто используют колонки.

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

   Тип колонки (Type). По умолчанию создаются колонки с типом Stretch (что означает "тянется").

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

   В типе Stretch вы не можете настраивать ширину колонок, но можете настроить Margin (отступ колонок от краёв фрейма). А так же Gutter (межколоночное расстояние) тоже можете выставить на своё усмотрение.

   Следующий тип колонок это Center (центрально ориентированные колонки). Они не изменяют свою ширину при изменении ширины родителя. При этом можно настраивать ширину колонок, межколоночное расстояние.

   Следующие два типа очень похожи друг на друга:

Left - лево-ориентированные колонки.

Right - право-ориентированные.

   При изменении ширины родителя колонки с типом Left и Right не изменяются.