Адаптивная вёрстка по макету Figma: что делать, если есть только десктоп
Частая ситуация: дизайнер сделал красивый макет в Figma под десктоп, а мобильной версии нет вообще — «сделайте просто адаптивно, там же всё понятно». По факту не всё понятно: без готового мобильного макета часть решений верстальщик принимает сам, а часть обязательно нужно согласовать заранее. Разберу, как это работает на практике.
Вадим ЛукьянцевВеб-разработчик, Краснодар · 5 минут на чтение
Что происходит с макетом при переходе на мобильный экран
Адаптация — это не механическое сжатие десктопной версии, а пересборка того же контента под другие пропорции экрана. Сетки в несколько колонок схлопываются в одну, горизонтальное меню превращается в бургер, крупные отступы уменьшаются, но не исчезают полностью. Главная задача — сохранить логику и приоритеты дизайнера, а не просто «уместить всё на маленьком экране».
Именно поэтому автоматическое масштабирование без участия человека не работает: пропорционально уменьшенный десктопный макет на телефоне почти всегда получается нечитаемым — мелкий текст, слишком плотные блоки, кнопки меньше размера, удобного для пальца.
Как принимаются решения без готового мобильного макета
Есть набор практических правил, которые обычно применяются, когда мобильного макета нет:
Сетки из 3-4 колонок на десктопе схлопываются в одну колонку на мобильном, элементы идут друг под другом в том же порядке значимости
Горизонтальная навигация уходит в скрытое меню (бургер), с сохранением того же порядка пунктов
Размер шрифта уменьшается не пропорционально всему макету, а по отдельной адаптивной шкале
Ключевые элементы — логотип, основная кнопка действия, контактные данные — остаются на месте по значимости, даже если физически меняют позицию на экране
Второстепенный декор может упрощаться или убираться, если на маленьком экране он мешает читаемости
Эти правила закрывают большинство типовых блоков — текст, карточки, простые сетки, формы. Но есть категория элементов, где самостоятельная интерпретация — риск, а не экономия времени.
Где нужно обязательно согласовать решение до вёрстки
Сложные элементы — многоколоночные таблицы, кастомные интерактивные виджеты, необычные карточки с большим количеством данных — нельзя адаптировать «на глаз» и просто сдать в надежде, что заказчику понравится.
На одном из проектов был прайс-лист с пятью колонками сравнения тарифов на десктопе; для мобильной версии предложил вариант с аккордеоном — раскрывающимися карточками по одному тарифу — и согласовал макет с заказчиком до того, как начал верстать, а не после. Такой подход экономит куда больше времени, чем кажется на первый взгляд: правки после сдачи готовой вёрстки почти всегда дороже и дольше, чем 15-минутное согласование скетча заранее.
Как это влияет на цену и сроки
Адаптация без готового мобильного макета обычно занимает больше времени, чем вёрстка по уже готовому дизайну для всех экранов — часть решений приходится не просто реализовывать, а сначала придумывать и согласовывать. Это стоит закладывать в сроки проекта заранее, а не считать «само собой разумеющейся» бесплатной опцией к десктопной вёрстке. Если макет вообще ещё не готов к передаче в разработку, с чего начать — в статье «Как подготовить макет в Figma перед передачей».
Есть только десктопный макет?
Посмотрю файл, отмечу сложные места и предложу варианты адаптации ещё до старта вёрстки.
Можно ли сделать адаптивную вёрстку вообще без каких-либо указаний от дизайнера? Технически да, для большинства типовых блоков сработают стандартные правила адаптации. Но для сложных нестандартных элементов лучше согласовать хотя бы черновой вариант, чтобы не переделывать готовую работу.
Сколько дополнительно стоит адаптация без мобильного макета? Зависит от количества нестандартных элементов на странице — простые текстовые блоки и карточки почти не увеличивают время работы, а сложные виджеты и таблицы требуют отдельного проектирования мобильного варианта.
Что делать, если после сдачи мобильная версия не понравилась? Если решение было заранее согласовано скетчем — таких ситуаций почти не бывает. Если адаптация делалась полностью на усмотрение верстальщика без согласования, точечные правки — это нормальная часть процесса, а не повод считать работу сделанной плохо.
Вадим ЛукьянцевОб авторе — нажмите, чтобы раскрыть
Веб-разработчик, Краснодар. Делаю сайты под ключ на Vue/Nuxt и React/Next, вёрстку по макетам из Figma и PSD, сайты на WordPress и SEO-продвижение — сам, без субподрядчиков.
Работаю с 2GIS, Яндекс.Бизнесом, самозанятость оформлена официально с 2024 года. С клиентами по всему Краснодарскому краю и удалённо по России.
