Главная » Веб-дизайн » Ограничители или как создать адаптивный дизайн в Figma

Ограничители или как создать адаптивный дизайн в Figma

Ограничители или как создать адаптивный дизайн в Figma

Хотите научиться создавать адаптивный дизайн в Figma, так, чтобы приложение смотрелось гармонично на любом устройстве? Вы даже удивитесь насколько это просто! В сегодняшней статье поговорим об инструментах, которые помогут дизайнеру решить эту задачу. Заодно продолжим работать над проектом Proper Nutrition и узнаем, что такое ограничители.

Прежде чем приступать к изучению данной статьи, рекомендую ознакомиться со следующими уроками по Figma:


Сегодня мы выясним:

  • Что такое адаптивный дизайн (п. 1)
  • Что такое ограничители в Figma (п. 2)
  • Ограничители по умолчанию (п. 2)
  • Как сделать слой адаптивным (резиновым) (п. 2)
  • Как пропорционально менять размеры и позицию блоков по отношению к сторонам экрана (п. 3.1 и 3.2)
  • Как сделать фоновое изображение адаптивным (растянуть на весь экран под разные устройства) (п. 3.3)

1. Что такое адаптивный дизайн?

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

Если речь идет о сайте, то скорее всего дизайнеру придется создавать два варианта макетов – для браузерной и мобильной версий. Так как различия в ширине существенны. Подробно о том, на что нужно обратить внимание при создании адаптивного дизайна сайта, я писала в статье «Как сделать адаптивный дизайн сайта»

Сегодня же речь пойдет о мобильных приложениях.

В Figma с помощью инструмента Ограничители можно создавать дизайн макета под любые размеры фреймов.

2. Что такое ограничители в Figma?

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

Рассмотрим работу ограничителей на следующем примере.

Создайте фрейм для устройства Android.

Создайте для него сетку Layout Grid с шагом 8 px.

Нарисуйте прямоугольник (Rectangle) размером 328×32 px и расположите его на фрейме с отступами в 16 px слева, сверху и справа. Это легко сделать, ориентируясь по клеточкам нашей сетки.

Ограничители или как создать адаптивный дизайн в Figma

На вкладке Design в группе Constraints вы увидите его ограничители со значениями Left (лево) и Top (верх) по умолчанию, которые означают, что данный слой (прямоугольник), приклеен к левой и верней сторонам фрейма и отступы от них всегда будут такими, вне зависимости от размера фрейма.


Черточки с внешней стороны квадрата с ограничителями означают склейку с границами экрана. Черточки внутри квадрата с ограничителями – размеры слоя по вертикали и горизонтали. Выделенные синим цветом черточки – включенные ограничители.


Поменяйте устройство фрейма, например, на iPhone 8 Plus, у которого экран шире и убедитесь в том, что сейчас наш прямоугольник приклеен к левой и верхней границам экрана.

Ограничители или как создать адаптивный дизайн в Figma

Давайте сделаем так, чтобы при любом размере экрана, отступы от краев фрейма до прямоугольника были 16 px. Для этого нужно добавить еще один ограничитель – справа (Right).

Это можно сделать двумя способами:

  1. Выбрать в выпадающем списке для горизонтальных ограничителей – Right&Left
  2. Зажав клавишу Shift, щелкнуть по черточке справа от квадрата с ограничителями.

Нетрудно догадаться, что если вы делаете экран, где логотип всегда должен находиться в центре, у него и по горизонтали, и по вертикали должны стоять ограничители Center

Ограничители или как создать адаптивный дизайн в Figma

3. Настраиваем ограничители для первой страницы Proper Nutrition

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

Ограничители или как создать адаптивный дизайн в Figma

Как видите, при изменении размеров экрана, положение объектов и их размеры не меняются.

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

3.1 Адаптивный логотип

Размер логотипа должен быть пропорционален размерам экрана, а положение всегда неизменным по отношению к верхней границе фрейма, поэтому его ограничителями будут Center и Top по горизонтали и вертикали соответственно!

Ограничители или как создать адаптивный дизайн в Figma

3.2 Адаптивная надпись

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

Ограничители или как создать адаптивный дизайн в Figma

3.3 Адаптивное фоновое изображение

Нередко на первом экране мобильного приложения находится фотография и она должна подстраиваться под размеры экрана. Если необходимо, изображение должно обрезаться и/или растянуться, иными словами, быть «резиновым».

Чтобы достичь данного эффекта, поставьте для фото ограничители Scale по горизонтали и вертикали.

Ограничители или как создать адаптивный дизайн в Figma

После выполненных действий, все слои страницы будут подстраиваться под размеры фрейма. То есть дизайн первой страницы приложения Proper Nutrition можно считать адаптивным.

Ограничители или как создать адаптивный дизайн в Figma

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

  • Шапки
  • Фоновые изображения
  • Логотипы
  • Сайдбары и меню
  • И многое другое.

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

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

Но сначала, разберем, как создавать иконки для приложений и сайтов в Figma и откуда брать готовые варианты, чтобы ускорить свою работу! Об этом и многом другом в статье «Дизайн иконок в Figma«. Продолжаем работать с приложением Proper Nutrition.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна

(Visited 153 times, 3 visits today)

2 комментарии на “Ограничители или как создать адаптивный дизайн в Figma

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *