Как сделать «резиновый» дизайн в Фигме

Итак, что же такое ограничители.

Вот где их можно найти, у вас должен быть выделен объект или группа объектов

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

Фигма нам предоставляет два варианта как задать ограничения, визуальный или по названиям

Варианты назначения ограничений

Итак у нас есть 5 вариантов по горизонтали и 5 по вертикали, давайте разберем каждый из них.

Горизонтальные ограничители

Сейчас смотрим только каждый ограничитель по отдельности, после разберем как они работают в связке, рассматривая горизонтальные ограничители будем держать вертикальные на позиции «Top»

Left

Привязывает ваш объект к левой границе макета. Когда вы будете тянуть макет за правые края ваш объект не будет двигаться, а если будете тянуть за левые края то объект будет соответственно перемещаться вместе с фреймом.

Тянем там где красное, объект на месте, тянем там где синее, объект перемещается

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

Бургер меню, смена языка или валюты останутся на месте при масштабировании фрейма.

Right

Все так же как и в «Left» но прявязка идет к правому краю. Тянем фрейм там где синее объект не двигается, тянем красные, объект перемещается вместе с фреймом.
Можно так же назвать что у объекта ограничивается расстояние до границы фрейма, и при привязке к одной из сторон соответственно оно остается неизменным.

Фиксируем объекты справа, и можем менять размер фрейма не боясь за положение элементов.

Left&Right

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

Помним что у нас элементы слева привязаны к левой границе, увеличив макет слева мы видим что плашка расширилась.

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

Center

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

Центральное ограничение логотипа

Если же объект находится не по центру, например на картинке выше я так же изменил ограничители смены валюты на центр. У нас при увеличении ширины будут равномерно увеличиваться отступы от границ, добавили 100 пикселей к ширине, получили по 50 пикселей с каждой стороны.

Scale

С этим типочком както вообще неуютно, может вам все размеры в дроби выгнать при изменении размеров фрейма, кстати не только он но и Left&Right так что следите за ними.
Чтоб проще понять «Scale»(масштабирование по русски) возьмем фрейм размером 300х300 пикселей и поместим в центр квадрат 100х100 пикселей. У нас получится квадрат 100 пикселей с отступами в 100 пикселей от границ фрейма. Задав ограничитель «Scale» увеличим размер фрейма в два раза по ширине и получим фрейм 600х300 пикселей и внутри будет прямоугольник 200х100 пикселей.
Из этого получается что ограничение «Scale» равномерно увеличивает расстояние как расстояние до границ так и сам объект. Расчет идет в процентром соотношении.

Ниже пояснение как считается

Это значит что если у вас 1 объект то все пропорции будут увеличиваться или уменьшаться на 33%, если объекта 2 то на 25%. В расчете участвуют вс элементы ширина которых выше 0.
По рисунку выше слева на право у нас будет учитываться расстояния(при учете того что на обеих прямоугольника стоит ограничение «Scale»):

1. От левой границы фрейма до первого прямоугольника;
2. Ширина первого прямоугольника;
3. Расстояние от первого до второго прямоугольника;
4. Ширина второго прямоугольника;
5. Расстояние от границы второго прямоугольника до правой границы фрейма.

В итоге получается что каждый объект увеличится на 20%.
Вещица интересная, над применением нужно подумать еще, может у вас идеи есть?)

Вертикальные ограничители

То же самое что и горизонтальные, но в другую сторону, и замените Left и Right на Top и Bottom.

Комбинируя данные инстументы можно получить приличный резиновый дизайн, однако не стоит думать что так вы можете получить мобильную версию из десктопа или наоборот.
Данный способ позволяет адаптировать макет например для экранов шириной 1280-1440, а вот для 1920 будет уже смотреться пустовато, а 320 будет завален и непонятен вообще.

Надеюсь данная информация будет полезна кому то.

Все контакты есть в профиле.

Не забывайте отметить статью если она вам понравилась!