Привязки (constraints)

Figma. Constraints (привязки, ограничители в Фигма) 

Содержание

1. Принцип работы ограничителей 

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

• Left
• Right
• Left & Right
• Center
• Scale

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

• Top & Bottom

2. 5 основных способов использовать ограничители

2.1. Закрепление кнопки в углу

2.2. Магия компонентов и ограничения

2.3. Магия ограничений и сетки

2.4. Ячейки таблицы

1. Принцип работы ограничителей

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

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

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

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

• Left

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

Тянем фрейм там где красное, объекты на месте, тянем там где синее, объект перемещается вместе с границей фрейма

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

• Right

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

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

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

• Left&Right

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

Поставили ограничения, тянем фрейм и получаем увеличение объектов в ширину, тянем вправо увеличивается вправо, тянем влево увеличивается влево.

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

Покрасили для наглядности фон шапки в красный, поставили ограничитель «Left&Right» и растянули фрейм по ширине. Плашка растянулась вместе с фреймом.

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

• Center

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

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

• Scale

Scale может вам все размеры в дроби выгнать при изменении размеров фрейма, кстати не только он но и Left&Right так что следите за ними.

Чтоб проще понять «Scale»(масштабирование по Русски) возьмем фрейм размером 300х300 пикселей и поместим в центр квадрат 100х100 пикселей. У нас получится квадрат 100 пикселей с отступами в 100 пикселей от границ фрейма. Задав ограничитель «Scale» увеличим размер фрейма в два раза по ширине и получим фрейм 600х300 пикселей и внутри будет прямоугольник 200х100 пикселей.

Из этого получается что ограничение «Scale» равномерно увеличивает расстояние как расстояние до границ так и сам объект. Расчет идет в процентном соотношении.

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

По рисунку выше слева на право у нас будет учитываться расстояния(при учете того что на обеих прямоугольника стоит ограничение «Scale»):

От левой границы фрейма до первого прямоугольника;

Ширина первого прямоугольника;

Расстояние от первого до второго прямоугольника;

Ширина второго прямоугольника;

Расстояние от границы второго прямоугольника до правой границы фрейма.

В итоге получается что каждый объект увеличится на 20%.

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

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

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

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

2. 5 основных способов использовать ограничители

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

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

ограничений.

2.1 Закрепление кнопки в углу

У многих мобильных пользовательских интерфейсов есть кнопки действий, всегда расположенные в одном и том же месте. Например, руководство по материал дизайну от Google рекомендует размещать кнопку снизу справа (также известную как FAB), что побуждает пользователя к действию.

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

2.2. Магия компонентов и ограничения

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

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

2.3. Магия ограничений и сетки

С помощью Figma вы можете использовать ограничения для привязки объектов к сетке. Это особенно удобно для таких элементов, как навигационная панель внизу приложения.

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

Установите ограничения на навигационную панель слева, справа и снизу. Когда этот фрейм навигационной панели все еще выделен, выберите в правой панели свойств отображение сетки и установите тип “растянуть”.

Затем поместите объект, например, круглую кнопку внутри каждого столбца сетки. Установите ограничения на центровку для каждой кнопки. Когда размер экрана изменится, ваши кнопки будут соответствующим образом адаптироваться. 

2.4. Ячейки таблицы

Вы можете использовать ограничения для создания гибких ячеек таблиц многоразового использования. Дизайнерам часто нужны ячейки таблицы для представления списков людей или информации, и добавление ограничений в базовую ячейку упрощает адаптацию. Например, я сгруппировал текст и аватар вместе (нажав кнопку управления g) и ограничил его в центре с левой стороны фрейма. Затем я сгруппировал текст и прямоугольник с закругленными углами вместе в кнопку и ограничил его в центре с правой стороны фрейма.

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