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

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

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

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

Различные параметры ограничения Figma
Различные параметры ограничения

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

Как реагирует кнопка с различными ограничениями в Figma
Как реагирует кнопка с различными ограничениями при изменении размера объекта

Не знаете, как применять их на практике и вам нужна помощь? Мы собрали пять способов ограничения, которые могут заметно облегчить вашу жизнь. Они расположены по уровню владения программой от начального до среднего уровня.

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

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

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

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

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

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

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

Магия компонентов и ограничения - Figma

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

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

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

Магия ограничений и сетки - Figma

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

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

Магия ограничений и сетки - Figma, адаптивность

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

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

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

Ячейки таблицы - Figma

5. Забавные иллюстрации

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

Забавные иллюстрации - Figma

Огромное спасибо Крису Хамамото, Йохану Прагу и Расмусу Андерссону за их помощь и иллюстрации для этой статьи.