Давайте создадим в Figma вот такую часть сайта:

Теперь нужно сделать её адаптивной. Рассмотрим подробнее как нам этого добиться.

Начнём с карточек. В статье Constraints (Ограничения привязки) мы уже изучили привязку карточки.

Настраиваем наши шесть карточек точно также. Как мы помним нужно привязать наши карточки к своему родителю — основному фрейму.

Но как нам это сделать чтобы всё было адаптивно и правильно?

Как раз в этой ситуации нам на помощь приходит система сеток (Layout grid). Нажимаем на «+» и добавим Layout grid. Выберем колонки (Columns). Настраиваем отступ (Margin) ориентируясь на отступ на странице сайта.

Мы уже видим что под футер отлично подходит 5 колонок:

Каждая информационная колонка находится там где и нужно. Но такая система сеток не совсем подходит для остального контента. Здесь нужно немного подумать, и скорее всего вверху должно быть шесть колонок.

Что мы можем предпринять?

Футер у нас находится на отдельном фрейме. Так вот, поменяем количество колонок на шесть, а на фрейме футора добавим новую систему колонок. Чтобы её лучше было видно и мы не путались, поменяем цвет колонок на синий:

Теперь привяжем три верхних карточки — лево, верх, право. Они будут привязываться к краям колонок, это как раз то что нам нужно.

Нижние две карточки и боковую тоже сделаем также.

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

Знак копирайта — снизу и справа.

Всё, мы настроили привязки к системе сеток так как нужно, и наша страница сайта теперь адаптивна.