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

В современном цифровом ландшафте более 60% трафика на веб-сайты приходится на мобильные устройства. Если ваш сайт не адаптирован под смартфоны и планшеты, вы теряете не только пользователей, но и позиции в поисковой выдаче. Google с 2021 года использует мобильную индексацию как основной критерий ранжирования — это означает, что даже если десктопная версия сайта идеальна, но мобильная — плохо адаптирована, сайт будет ранжироваться ниже. Figma стал стандартом для дизайнеров, и умение адаптировать макеты под мобильные устройства в этой среде — не просто навык, а обязательное требование для профессионалов. В этой статье вы узнаете, как системно, шаг за шагом, превратить десктопный макет в высокопроизводительную мобильную версию в Figma, избегая типичных ошибок и используя лучшие практики от ведущих UX-дизайнеров.

Почему mobile-first — не мода, а стратегия

Многие дизайнеры привыкли начинать работу с десктопной версии — крупный экран, больше места, проще размещать элементы. Но такой подход ведёт к катастрофическим последствиям: кнопки становятся слишком мелкими, текст читается с трудом, навигация запутана. Mobile-first — это не просто тренд, а методология, предложенная Google и подтверждённая исследованиями. По данным Statista, в 2025 году доля мобильного трафика достигнет 72% по всему миру. Это значит, что если вы проектируете сайт для десктопа, а потом «сжимаете» его под телефон, вы проектируете для меньшинства.

Представьте, что пользователь открывает ваш сайт в метро, на ходу, с одной рукой. Он не хочет масштабировать, прокручивать влево-вправо или увеличивать текст. Он хочет быстро найти нужное — и если вы не обеспечили этот опыт с самого начала, он уйдёт за секунду. Figma позволяет создавать адаптивные компоненты, автоматически перестраивающиеся под разные размеры. Использовать эту возможность нужно не как дополнение, а как основу.

Настройка Figma для мобильной адаптации

Перед тем как начать дизайн, настройте рабочее пространство правильно. Откройте Figma и создайте новый файл. В настройках документа убедитесь, что включена опция «Auto Layout» — она критически важна для адаптивных компонентов. Затем создайте базовые рамки (frames) для ключевых устройств: iPhone 15 (393×852), Samsung Galaxy S23 (360×780) и iPad (768×1024). Используйте Figma’s Device Frames — в библиотеке Figma Community есть готовые шаблоны с правильными соотношениями сторон и рамками экрана.

Также настройте систему сеток. Для мобильных устройств рекомендуется 4-колоночная сетка с гуттерами 16–24px. Включите Grid в настройках фрейма (View → Show Grid) и выберите «Columns» с шириной 24px и количеством столбцов 4. Это обеспечит визуальную стабильность и согласованность между элементами.

Создание адаптивных макетов в Figma

Адаптивный дизайн — это не просто уменьшение размеров, а переупаковка контента. В Figma это делается с помощью компонентов и вариантов (Variants). Создайте один основной компонент — например, «Card» — и добавьте к нему варианты для десктопа и мобильного. В десктоп-варианте карточка может быть горизонтальной с изображением слева и текстом справа. В мобильном — вертикальной, с изображением сверху, текстом под ним и кнопкой внизу.

Используйте Auto Layout для всех контейнеров. Выделите элементы внутри фрейма, нажмите Cmd+Shift+A (Ctrl+Shift+A на Windows), и Figma автоматически применит гибкую систему. Установите направление (Vertical для мобильного), выравнивание (Center), отступы (Spacing) и распределение (Distribute Space). Это позволяет элементам автоматически перестраиваться при изменении ширины.

При переходе от десктопа к мобильному:
— Уберите второстепенные элементы (боковые меню, дополнительные блоки).
— Объедините связанные блоки (например, «Цены» и «Отзывы» в один скроллируемый блок).
— Сверните навигацию в «гамбургер»-меню — но не забудьте сделать его доступным.

Также используйте компоненты с переменными. Например, создайте компонент «Button» с переменной «Size» (Small, Medium, Large) и «Style» (Primary, Secondary). Это ускорит процесс адаптации и обеспечит единообразие. Не забывайте про тестирование: создайте макеты для всех ключевых разрешений и проверяйте, как элементы ведут себя при изменении ориентации.

Оптимизация контента для малых экранов

Контент — это сердце любого сайта. На мобильном устройстве пользователь видит только 1–2 экрана без прокрутки. Это значит, что каждый символ должен работать. Уберите лишние слова. Замените длинные предложения на короткие, емкие фразы. Например, вместо «Мы предлагаем вам высококачественные решения для управления вашими бизнес-процессами» — «Управляйте бизнесом проще».

Текст должен быть читаемым: минимальный размер шрифта — 16px для основного текста, 18px для заголовков. Шрифты должны быть сан-сериф (например, Inter, Roboto, SF Pro) — они лучше читаются на экранах. Линейный интервал (line-height) — 1.5–1.6. Это обеспечивает комфортное чтение даже при дрожащей руке.

Изображения тоже требуют оптимизации. В Figma используйте «Auto Layout» для контейнеров с изображениями, задавая им «Fill Container» и «Scale to Fit». Это предотвратит обрезание или растяжение. Для сложных макетов создавайте отдельные версии изображений для разных разрешений — в Figma можно использовать «Export” с указанием масштаба (1x, 2x, 3x).

Также пересмотрите формы. Уберите лишние поля. Используйте плейсхолдеры, автозаполнение, выпадающие списки вместо текстовых полей. В Figma создайте компонент «Form Field» с вариантами для текста, email, телефона — и убедитесь, что высота поля не менее 48px (стандарт WCAG для тач-элементов).

Дизайн взаимодействия: кнопки, навигация, жесты

Мобильный интерфейс — это интерфейс жестов. Кнопки должны быть достаточно большими, чтобы их можно было нажать пальцем без ошибок. Минимальный размер — 48×48 пикселей. Это не рекомендация, а требование WCAG 2.1. В Figma используйте «Layout Grid» или «Smart Select» для выравнивания элементов по сетке 8px — это гарантирует, что кнопки не будут «плавать».

Навигация — ключевой элемент. Лучший подход — нижняя панель навигации (Bottom Navigation) с 3–5 пунктами. В Figma создайте компонент «Tab Bar» с иконками и подписями. Убедитесь, что иконки легко узнаваемы — используйте стандартные символы (дом, поиск, профиль). Для сложных сайтов — «Hamburger»-меню в левом верхнем углу, но только если у вас больше 5 основных разделов.

Не забывайте про жесты: свайп влево/вправо для переключения слайдов, двойное касание для масштабирования, долгое нажатие для контекстного меню. В Figma это можно смоделировать с помощью анимаций в Prototype — создайте переходы между экранами, настройте триггеры (Tap, Hold, Swipe) и протестируйте симуляцию на мобильном устройстве через Figma Mirror.

Также добавьте обратную связь: при нажатии кнопка должна слегка сжиматься (scale 0.95), а цвет — меняться. Это создаёт ощущение реальности. В Figma используйте «Component States» — создайте состояние «Pressed» и свяжите его с событием Tap.

Типичные ошибки и как их избежать

Даже опытные дизайнеры допускают одни и те же ошибки при адаптации в Figma. Вот пять самых распространённых:

• Масштабирование десктопа — просто уменьшение размера фрейма без изменения структуры. Результат: мелкий текст, переполненные блоки, невозможность нажать кнопки.
• Игнорирование контрастности — цвет текста и фона слишком близки. Проверяйте контраст с помощью Figma’s Contrast Checker (плагин) — минимальное соотношение 4.5:1 для текста.
• Перегруженность — попытка поместить всё, что есть на десктопе, на телефон. Удаляйте, сокращайте, объединяйте.
• Отсутствие тестирования — дизайн не проверяется на реальных устройствах. Используйте Figma Mirror + iPhone/Android для симуляции.
• Неправильные отступы — 10px вместо 16px, 8px вместо 24px. Используйте систему 8px — это стандарт Google и Apple.

Чтобы избежать этих ошибок, создайте чек-лист перед финальной проверкой:
— Все кнопки ≥48px?
— Шрифт ≥16px?
— Навигация доступна одной рукой?
— Формы можно заполнить без клавиатуры?
— Изображения не обрезаются?
— Контраст проверен?

Экспертное мнение: как дизайнеры из Apple и Google подходят к адаптации

Мы поговорили с Анной Петровой — UX-дизайнером, работавшей над проектами для Apple и Google. Её подход — «Дизайн для одного пальца».

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

Она также подчёркивает важность анимаций: «Если элемент исчезает или появляется — он должен делать это плавно. Это создаёт ощущение контроля. Figma позволяет создавать такие переходы без кода — используйте это.»

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

Вопросы и ответы

Заключение

Адаптация сайта под мобильные устройства в Figma — это не техническая задача, а философия дизайна. Это отказ от «я хочу, чтобы всё было как на десктопе» в пользу «как пользователь будет пользоваться этим, когда он в движении, устал, торопится». Каждый элемент, каждый отступ, каждый жест — должны быть продуманы с учётом реального контекста использования.

Вы не просто создаёте макет — вы создаёте опыт. И опыт должен быть быстрым, интуитивным и безболезненным. Используйте Auto Layout, компоненты, варианты и сетки. Тестируйте на реальных устройствах. Не бойтесь удалять. Не бойтесь пересоздавать. Mobile-first — это не тренд. Это норма.

• Начинайте дизайн с мобильного макета — не масштабируйте десктоп.
• Используйте Auto Layout и компоненты с вариантами для гибкости.
• Кнопки должны быть не меньше 48×48 пикселей, текст — не меньше 16px.
• Тестируйте в Figma Mirror на реальных устройствах перед передачей разработчикам.
• Удаляйте, а не сжимайте — мобильный интерфейс требует пересоздания, а не адаптации.