Как сделать адаптивный дизайн в Figma под разные экраны

Заказчик просит сделать сайт «под все устройства». Дизайнер в растерянности: разрешений сотни, а времени в обрез. Частая ситуация.

По данным исследования НИУ ВШЭ, в России 92,5% пользователей выходят в интернет, из них 84,6% делают это почти ежедневно. Мобильный трафик растёт на 13% ежегодно, фиксированный — на 27%. Игнорировать адаптивность макетов — значит потерять половину аудитории.

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

Начнём разбираться, как сделать адаптивный дизайн в «Фигме».

Зачем нужна адаптивность и какие экраны учитывать

Три стандартных брейкпоинта покрывают 90% устройств: 320-375px (мобильный), 768px (планшет), 1440px (десктоп). Делать отдельный макет под каждое разрешение нереально — работаем с диапазонами.

Заказчик говорит «под все» — уточняйте конкретику. Обычно достаточно двух версий: мобильная (375px) и десктопная (1440px). Если бюджет позволяет — добавляете планшетную (768px). Верстальщик работает с диапазонами, вы фиксируете ключевые точки.

В Figma встроены инструменты для адаптивности: Constraints (ограничители) и Auto Layout (автолейаут). Первый привязывает элементы к сторонам фрейма, второй создаёт динамические блоки. Разберём оба.

✅Запомните!

Три ключевых размера (320px, 768px, 1440px) покрывают 90% устройств.

Constraints: привязка элементов к сторонам фрейма

Constraints — ограничители, управляющие поведением объектов при изменении размера родительского фрейма. Работают только в обычных фреймах (без Auto Layout).

Четыре типа горизонтальной привязки:

• Left — элемент прилипает к левому краю.
• Right — к правому.
• Center — остаётся в центре.
• Scale — масштабируется пропорционально.

Вертикальная привязка работает аналогично: Top, Bottom, Center, Scale. Комбинируя их, фиксируете позицию элемента. Логотип слева, кнопка справа — при изменении ширины экрана оба остаются на своих позициях.

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

Учитывайте ограничение. Constraints не работают с вложенными Auto Layout-фреймами. Если применили автолейаут — используйте его настройки.

💡Это интересно!

Constraints работают только в обычных фреймах — в Auto Layout используются другие настройки.

Auto Layout: динамические блоки под любой контент

Auto Layout — умный фрейм, который автоматически подстраивается под содержимое. Добавили текст — блок расширился. Удалили пункт меню — сжался. Это основа адаптивного дизайна в Figma.

Применяйте для кнопок, карточек, списков, меню и форм — везде, где содержимое меняется. Горячая клавиша: Shift+A. Выделяете элементы, жмёте комбинацию — получаете Auto Layout-фрейм.

Ключевые настройки:

• Direction — направление: горизонталь (столбец) или вертикаль (строка).
• Padding — отступы внутри фрейма от краёв.
• Spacing — промежутки между объектами.

Resizing — как ведёт себя элемент при изменении размера:

• Hug content — сжимается под контент (для кнопок, тегов).
• Fill container — растягивается на всю ширину (для баннеров, шапок).

Вложенность — сила Auto Layout. Создаёте строку внутри столбца, столбец внутри строки. Так собираются сложные UI-структуры. Каждый уровень — свои настройки Direction, Padding, Spacing. Прототип становится гибким, как резиновая вёрстка.

Одна из последних новинок — Suggest Auto Layout. Выделяете элементы, жмёте Ctrl+Shift+A — Figma сама расставляет вложенные фреймы. Экономит время, но требует понимания логики: проверьте направление и отступы после применения.

📍Это важно!

Hug content — для кнопок и меток, Fill container — для блоков, которые должны занять всю ширину.

Таблица параметров Auto Layout:

Брейкпоинты и версии макета для разных устройств

Сколько версий делать? Минимум две: мобильная (375px) и десктопная (1440px). Оптимально три, добавив планшетную (768px). Зависит от бюджета и аудитории проекта.

Стандартные размеры фреймов: 375px — iPhone (большинство смартфонов), 768px — iPad (планшеты), 1440px — ноутбуки и мониторы. Эти три точки покрывают основную массу устройств.

Как создавать версии? Дублируете основной фрейм (Cmd+D или Ctrl+D), меняете ширину, проверяете поведение Auto Layout. Элементы с Fill container растянутся, с Hug — останутся компактными. Constraints удерживают фиксированные блоки на местах.

Точки слома (брейкпоинты) — места, где меняется структура интерфейса. На десктопе — горизонтальное меню, на мобильном — бургер. На планшете — две колонки, на смартфоне — одна. Фиксируйте эти переходы в макете.

Для тестирования используйте Preview (правый верхний угол Figma) или Figma Mirror (приложение на смартфоне). Проверяете реальное поведение на устройствах — видите, что «поехало». Правите, снова проверяете.

Держите совет!

Не делайте макет под 320px — на современных устройствах минимум 375px.

Проверка адаптивности: типичные ошибки и чек-лист

Три частые ошибки:

1. Фиксированная ширина текста. Если текст длинный, он вылезает за границы на узких экранах. Решение: оберните в Auto Layout с Fill container.

2. Не настроенные Constraints. Кнопка должна быть справа, а при изменении ширины уезжает влево. Установите Right для горизонтали.

3. Элементы наезжают друг на друга. Забыли Spacing между объектами в Auto Layout. Задайте промежутки 8-16px.

Лайфхак

Перед передачей в вёрстку протестируйте все три версии на изменение контента: добавьте длинный текст, больше пунктов меню, лишнюю карточку. Если макет «сломался» — дорабатывайте настройки.

Чек-лист перед передачей разработчику:

• Все тексты обёрнуты в Auto Layout?
• Constraints настроены для фиксированных элементов (логотип, иконки)?
• Кнопки с Hug content не растягиваются?
• На мобильной версии читается весь текст?
• Отступы одинаковые на всех версиях?
• Проверили поведение при добавлении контента?
• Экспортировали все три версии для разработчика?

Для экспорта выделяете фреймы, Export → PNG или PDF (для презентации заказчику). Разработчику даёте ссылку на Figma-файл с правами на просмотр. Он видит все размеры, отступы, цвета — копирует код через Dev Mode.

❗Это важно!

Перед передачей в разработку протестируйте все три версии на изменение контента (длинный текст, больше пунктов меню).

Компоненты и варианты: как ускорить адаптацию в Figma

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

Как создать адаптивный компонент

1. Выделите кнопку или карточку, нажмите Ctrl+Alt+K (Создать компонент).
2. Дублируйте компонент дважды, измените ширину на 375 пикселей, 768 пикселей, 1440 пикселей.
3. Выделите все три элемента, нажмите правой кнопкой мыши — Объединить как варианты.
4. Получите один компонент с тремя вариантами.

На правой панели появляется свойство Breakpoint (или Size). Значения: Mobile, Tablet, Desktop. Теперь в макете вы создаёте экземпляр (instance), переключаете свойство — компонент меняет форму. Не нужно создавать три отдельных элемента.

Для чего использовать?

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

Настройка Auto Layout для каждого варианта

Каждый вариант настраивается отдельно.

• Для мобильных устройств: направление — вертикальное, отступы — 12 пикселей.
• Для компьютеров: направление — горизонтальное, отступы — 24 пикселя.

Масштабирование происходит автоматически при переключении варианта.

Библиотека компонентов

Создали набор адаптивных компонентов — сохраните как шаблон. Публикуете библиотеку (правый верхний угол → Опубликовать). Теперь в новых проектах подключаете её через Assets, переносите готовые компоненты. Экономите часы на каждом макете.

Это основа респонсива в Figma на уровне дизайн-систем. Настроили один раз — и используете везде.

Сетки и направляющие: структура для разных экранов

Сетки — основа порядка в адаптивном дизайне. Без них элементы «плавают», отступы разные, выравнивание на глаз. Как правильно сделать адаптивный дизайн в Figma? Начните с сеток.

Настройка сетки макета для трёх версий

Выделите фрейм, на правой панели выберите «Сетка макета» → «+». Появится сетка. Настройки зависят от устройства.

Мобильный (375 пикселей):

• Столбцы: 4 столбца.
• Поля: 16 пикселей (отступы по бокам).
• Междустрочный интервал: 16 пикселей (промежутки между столбцами).
• Тип: растяжка (столбцы растягиваются).

Планшет (768 пикселей):

• Столбцы: 8 столбцов.
• Поля: 24 пикселя.
• Отступ: 20 пикселей.

Десктоп (1440 пикселей):

• Столбцы: 12 столбцов.
• Отступ: 80 пикселей (или 120 пикселей для широких мониторов).
• Поля: 24 пикселя.

Элементы привязываются к колонкам. Текстовый блок занимает 3 колонки на десктопе, 2 — на планшете и все 4 — на мобильном устройстве. Сетка видна только в редакторе (включается/выключается сочетанием клавиш Ctrl+G), в прототипе не отображается.

Baseline Grid для текстов

Для вертикального ритма добавьте вторую сетку — строки. Шаг 8 пикселей (или 4 пикселя для небольших интерфейсов). Заголовки и абзацы выравниваются по линиям. UX улучшается: текст легче читается, визуальный порядок очевиден.

Настройка: сетка макета → тип: строки → высота: 8 пикселей. Цвет сетки измените на полупрозрачный (чтобы не мешала). Текстовые блоки расположите так, чтобы базовая линия шрифта совпадала с линией сетки.

Направляющие (Guides) для точной привязки

Нажимаете на линейку (Вид → Линейки или Shift+R), перетаскиваете направляющую на холст. Фиксируете положение элемента. Логотип всегда находится на 40 пикселей выше, кнопка — на 60 пикселей правее. Ставите направляющие, привязываете объекты.

Адаптация в «Фигме» с помощью направляющих: для каждой версии (мобильная, планшет, десктоп) свои направляющие. Дублируете фрейм — направляющие копируются, корректируете позиции под новую ширину.

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

1. Сетки (Columns) — для общей структуры страницы, раскладки блоков, выравнивания карточек и разделов.
2. Базовая сетка (Rows) — для текстового контента, вертикального ритма.
3. Направляющие — для точечной привязки уникальных элементов (логотипа, фиксированной кнопки).

Комбинируете все три — получаете железобетонную структуру. Макет не «расползётся» при изменении контента. Этому учат уроки дизайна в «Фигме» на продвинутом уровне: не просто расставлять блоки, а закладывать систему.

Шаблон с сетками

Создаёте три фрейма (375 пикселей, 768 пикселей, 1440 пикселей) с настроенными сетками — сохраняете как шаблон.

Дублируете для нового проекта, сразу работаете по системе. Экономите 15–20 минут на каждом новом макете.

Мини-FAQ

1. Сколько версий макета нужно делать? Минимум две (мобильный 375px + десктоп 1440px), оптимально три (+ планшет 768px).

2. В чём разница между Constraints и Auto Layout? Constraints — для обычных фреймов, фиксируют позицию элемента. Auto Layout — умный фрейм, который сам подстраивается под контент.

3. Можно ли использовать Auto Layout для всех элементов? Да, но иногда проще использовать Constraints для простых элементов (логотип, иконка).

Заключение

Auto Layout + Constraints = полный контроль над адаптивностью. Первый инструмент управляет динамическими блоками, второй — фиксированными элементами. Комбинируете — получаете гибкий макет.

Главное — планировать структуру заранее. Не переделывать дизайн под каждый экран, а создавать один гибкий, который сам подстраивается. Три версии (мобильный 375px, планшет 768px, десктоп 1440px) — это уже стандарт.

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

Вам интересна фриланс-работа или требуются услуги веб-дизайна?