5 основных способов использования ограничений дизайна

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

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

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

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

Различные варианты ограничений

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

Как реагирует кнопка с различными ограничениями при изменении размера кадра

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

1) Прикрепление кнопки в углу

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

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

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

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

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

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

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

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

Установите ограничения навигационной панели слева и справа и снизу. Оставив выбранную рамку навигационной панели, выберите сетку макета на правой панели свойств и установите тип «Растянуть».

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

4) Таблица клеток

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

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

5) Прикольные иллюстрации

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

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