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

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

Почему mobile-first — это не мода, а необходимость

Представьте, что пользователь открывает ваш сайт в метро, с одной рукой держится за поручень, а другой пытается кликнуть на кнопку. Если элементы слишком мелкие, текст не читается, а меню спрятано за трёмя кликами — он уйдет. По данным Google, 53% мобильных пользователей покидают сайт, если он загружается дольше 3 секунд. А если интерфейс неудобен — ещё быстрее. Mobile-first — это не про то, чтобы «сделать версию для телефона». Это про то, чтобы начать проектирование с минимального экрана и постепенно масштабировать функциональность, а не наоборот.

В 2025 году средний размер мобильного экрана составляет 6,1 дюйма, а доля мобильного трафика в России достигает 67%. Это значит, что если вы проектируете сайт с десктопа и потом «сжимаете» его под телефон — вы проектируете с ошибкой. Figma позволяет работать с несколькими фреймами одновременно, и именно это — ваш ключ к успеху. Не пытайтесь «подогнать» десктоп под мобильный — начинайте с мобильного.

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

Первое, что нужно сделать — создать правильную базовую сетку. Для мобильного сайта используйте фрейм 375×812 пикселей — это стандартный размер iPhone 13/14, который покрывает более 80% мобильных устройств в России. Не используйте 320×480 — это устаревший формат. Также добавьте фреймы 414×896 (iPhone 12 Pro Max) и 360×640 (Android-устройства), чтобы проверить кросс-платформенную совместимость.

Включите сетку: в панели Design выберите “Layout Grid” → “Columns” и установите 12 колонок с отступами 16 пикселей по бокам. Это обеспечит единообразие при размещении элементов. Затем настройте “Auto Layout” для всех повторяющихся компонентов — кнопок, карточек, заголовков. Это сэкономит часы при изменениях.

Не забудьте о масштабировании текста. В Figma включите опцию “Text Scaling” в настройках компонентов. Это позволит тексту автоматически подстраиваться под размер контейнера без потери читаемости. Особенно важно для кнопок и форм — если текст переносится некорректно, пользователь не поймёт, что делать.

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

Адаптивные компоненты — это основа эффективного мобильного дизайна в Figma. Вы не можете каждый раз пересоздавать кнопку, форму или карточку. Вместо этого — создайте один компонент, который будет вести себя по-разному в зависимости от ширины.

Для этого: выделите элемент, нажмите “Create Component”, затем в панели “Instance” выберите “Constraints”. Установите для левого и правого краёв — “Pin to edge”, для высоты — “Hug contents” или “Fill container”, в зависимости от задачи. Для кнопки с иконкой и текстом — сделайте так, чтобы иконка оставалась слева, а текст сжимался при уменьшении ширины.

Используйте “Variant” для разных состояний: основная кнопка, нажатая, отключённая. Создайте варианты для мобильного и десктопного отображения. Например, на десктопе — кнопка широкая, на мобильном — круглая с иконкой. Это позволяет быстро переключаться между версиями без потери целостности дизайна.

Оптимизация макета под мобильный экран

Мобильный экран — это ограниченное пространство. Здесь не место для боковых сайдбаров, громоздких баннеров и 5-уровневых меню. Оптимизация начинается с приоритизации контента. Используйте метод “MoSCoW”: Must have, Should have, Could have, Won’t have. Что критично для пользователя в мобильной версии? Контакты? Поиск? Кнопка “Купить”? Вынесите это наверх.

Сократите количество элементов на экране до 3–5 основных. Используйте вертикальную компоновку — это естественно для пальцев. Горизонтальные списки (например, карусели) должны быть редкостью и только с чёткими индикаторами прокрутки. Текст должен быть не менее 16 пикселей — иначе он нечитаем. Заголовки H1 — 24–28 пкс, H2 — 20–22 пкс.

Проверяйте контрастность текста и фона: минимальное соотношение — 4,5:1 для обычного текста, 3:1 для крупного. Figma не имеет встроенной проверки контраста, но плагин “Contrast” от Figma Community поможет быстро оценить доступность.

Переосмысление навигации

Мобильная навигация — это не уменьшенная десктопная. Это другой язык. Меню “гамбургер” — не панацея, но часто — необходимость. Однако его нельзя оставлять без индикации. Всегда добавляйте значок с текстом “Меню” или “Навигация”, особенно если ваша аудитория — люди старше 45 лет.

Лучшие практики:
— Используйте нижнюю навигационную панель (tab bar) для 3–5 ключевых разделов. Это легко достать большим пальцем.
— Для второстепенных разделов — сделайте “Смотреть всё” внутри основного меню.
— Не используйте hover-эффекты — они не работают на сенсорных экранах.
— Всегда возвращайте пользователя на главную страницу через логотип или кнопку “Назад”.

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

Прототипирование взаимодействий

Дизайн без прототипа — это чертёж дома без дверей. В Figma прототипирование делается через “Prototype” в правой панели. Выделите элемент — кнопку, иконку, меню — и задайте “On Click” → “Navigate to” → выберите нужный фрейм. Добавьте анимации: “Smart Animate” — это ваш лучший друг. Он автоматически сглаживает переходы между состояниями.

Протестируйте следующие сценарии:
— Открытие формы заказа с экрана товара.
— Переключение между вкладками каталога.
— Работа с фильтрами (например, выбор цены или категории).
— Смена темы (светлая/тёмная).

Не забудьте добавить “Back”-кнопку в каждом фрейме, кроме главного. Без неё пользователь застрянет. Используйте “Auto-Animate” для плавного раскрытия аккордеонов и модальных окон. Это создаёт ощущение скорости и отзывчивости — ключевые факторы удержания.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают одни и те же ошибки при создании мобильной версии:

• Копирование десктопа — кнопки, текст, иконки без адаптации. Решение: всегда начинайте с мобильного фрейма.
• Слишком мелкий текст — менее 14 пикселей. Решение: используйте 16+ пикселей для основного текста.
• Отсутствие обратной связи — кнопка не реагирует на нажатие. Решение: добавьте цветовой или анимационный отклик.
• Перегруженные экраны — больше 7 элементов на одном экране. Решение: применяйте принцип “один экран — одна задача”.
• Неправильные отступы — 0 пикселей по краям. Решение: всегда оставляйте минимум 16 пикселей от краёв экрана.

Чтобы избежать ошибок, проведите “мобильный аудит” перед сдачей дизайна: откройте Figma на телефоне через приложение, пройдите весь путь как обычный пользователь. Задайте себе вопрос: “Я бы смог это сделать, не глядя в экран?” Если нет — возвращайтесь к дизайну.

Экспертное мнение

Елена рекомендует всегда начинать с пользовательских сценариев: “Что пользователь хочет сделать, когда открывает сайт с телефона?” Часто — это не “посмотреть все продукты”, а “найти ближайший магазин” или “позвонить сейчас”. Дизайн должен вести к этому действию, а не отвлекать.

Также она советует использовать “Design System” с разделением на “Mobile” и “Desktop” компоненты. Это позволяет разработчикам быстро понимать, какие элементы должны вести себя по-разному. Не создавайте отдельные файлы — используйте вложенные страницы в одном файле Figma: “Mobile”, “Tablet”, “Desktop”.

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

Заключение

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

Используйте Figma как систему, а не как блокнот. Создавайте компоненты, прототипируйте взаимодействия, проверяйте контрастность и читаемость. Не копируйте десктоп — перестраивайте. Помните: мобильный пользователь не хочет «сайт» — он хочет решение. Ваша задача — дать его за один клик.

• Всегда начинайте с мобильного фрейма 375×812 пикселей.
• Используйте адаптивные компоненты с Auto Layout и Constraints.
• Оптимизируйте навигацию под пальцы — не под мышь.
• Прототипируйте все ключевые взаимодействия до передачи разработке.
• Проверяйте читаемость, контраст и размеры кликабельных элементов.