Макет лендинга в Figma: что проверить до вёрстки

Вы получили от дизайнера ссылку на Figma, листаете красивый длинный экран и думаете: «Отлично, отдаём в вёрстку». Через две недели выясняется, что форма заявки не умеет показывать ошибки, на телефоне заголовок не помещается в строку, а половина иконок существует только в виде картинки из чужого сайта.

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

Почему проверять нужно именно макет

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

Важное слово в определении — «не придумывая». Всё, чего нет в макете, верстальщик решит по-своему: как выглядит кнопка при наведении, куда переносится длинная строка, что показывает форма после отправки. Иногда решения окажутся удачными, но это лотерея, а не процесс.

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

Мобильная версия нарисована, а не подразумевается

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

Минимальный набор — телефон и десктоп. Для сложных страниц с таблицами тарифов или галереями полезен ещё планшет. Если какого-то блока нет в мобильном фрейме, спросите, куда он делся: нередко его просто забыли перенести.

• Первый экран на телефоне. Оффер и кнопка должны помещаться без прокрутки. Картинка, которая на десктопе стоит справа, на телефоне часто съедает весь экран.
• Длинные слова и числа. Русские заголовки длиннее английских. Проверьте, что «Индивидуальное проектирование» не вылезает за край узкого экрана.
• Таблицы и тарифы. Три карточки в ряд на телефоне превращаются в стопку или горизонтальную прокрутку — в макете должно быть видно, во что именно.

Подробный разбор мобильных ошибок — от размеров кнопок до шрифтов — есть в статье о мобильной версии лендинга.

Состояния элементов: кнопки, формы, меню

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

У кнопок минимум три вида: обычный, при наведении и нажатая или неактивная. У ссылок в тексте — обычный и при наведении. У полей формы — пустое, с фокусом, заполненное и с ошибкой. Звучит как бюрократия, но на лендинге с одной формой и парой кнопок это всего несколько дополнительных фреймов.

Самое проблемное место — форма заявки. Обычно в макете есть только пустая форма, хотя пользователь увидит минимум четыре её вида: пустую, с фокусом в поле, с ошибкой и после успешной отправки. Экран «Спасибо, мы перезвоним» — это часть воронки, и его текст тоже кто-то должен написать.

Отдельно проверьте всплывающие окна: заявка по кнопке, политика конфиденциальности, увеличенное фото из галереи. Они не видны в основном фрейме, поэтому их чаще всего забывают. То же касается бургер-меню на телефоне и выпадающих списков.

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

Стили и компоненты вместо «на глаз»

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

Хороший файл опирается на систему: ограниченная палитра, несколько уровней заголовков и основного текста, единый шаг отступов, кнопки и карточки собраны компонентами. Тогда правка цвета кнопки делается в одном месте и сразу везде, а верстальщик переносит в код именно систему, а не набор картинок.

• Шрифты. Используется ли одно-два семейства, есть ли у них лицензия для веба и нужная кириллица со всеми начертаниями. Как собрать иерархию текста, подробно описано в материале о типографике для лендинга.
• Цвета. Палитра сохранена стилями или переменными, а не разбросана по слоям HEX-кодами.
• Отступы. Расстояния кратны одному шагу, например 4 или 8 пикселям. Auto Layout в Figma помогает это соблюдать и заодно показывает верстальщику, как блок тянется.
• Сетка. Контент выровнен по колоннам, у страницы есть максимальная ширина, и понятно, что происходит на очень широком мониторе.

Реальный контент вместо «рыбы»

Текст-заглушка вроде «Lorem ipsum» или «Здесь будет заголовок» — главный источник переделок после вёрстки. Реальный оффер почти всегда длиннее или короче заглушки, и блок, идеально выглядевший в макете, ломается, когда в него попадает настоящий текст.

До передачи в вёрстку в макете должны стоять финальные или почти финальные тексты: заголовки, подписи кнопок, цены, отзывы, вопросы FAQ. Если копирайтер ещё работает — хотя бы тексты правильной длины. Это же касается фотографий: замените стоковые заглушки на реальные снимки команды, продукта или объектов.

Юридические элементы тоже часть контента: ссылка на политику конфиденциальности, чекбокс согласия в форме, реквизиты в подвале. Их удобнее предусмотреть в макете, чем втискивать в готовую страницу.

Править в макете или уже на вёрстке

Не каждую мелочь нужно возвращать дизайнеру. Смысл проверки — отделить то, что влияет на структуру и систему, от того, что верстальщик спокойно поправит сам.

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

Как передать макет верстальщику

Передача — это не только ссылка. Верстальщику нужен доступ к просмотру и экспорту, понимание, какая страница в файле финальная, и список того, что не видно на картинке: анимации, интеграции, поведение форм.

1. 1Наведите порядок в файле. Отдельная страница «Для вёрстки» с финальными фреймами, а черновики и варианты — на другой странице с понятным названием.
2. 2Проверьте экспорт. Иконки и логотип — в SVG, фотографии — в исходном качестве, без обрезки под конкретный фрейм. Для картинок задайте настройки экспорта.
3. 3Опишите поведение. Что анимируется, что липнет к верху при прокрутке, куда уходит заявка, какие цели нужны для аналитики.
4. 4Договоритесь о вопросах. Один канал связи и один человек, который отвечает за решения по макету. Иначе вопросы верстальщика повиснут.

Тяжёлые фото и лишние шрифты — частая причина медленной страницы. Если думаете о скорости ещё на этапе макета, половина задач по оптимизации решится сама. Что именно замедляет лендинг, собрано в статье о скорости загрузки.

Самопроверка за 15 минут: сценарий для заказчика

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

1. 1Откройте мобильный фрейм на телефоне. В Figma есть режим презентации, и ссылку можно открыть прямо в браузере смартфона. Прокрутите страницу пальцем: всё ли читается без увеличения, до кнопок ли легко дотянуться.
2. 2Прочитайте только заголовки. Если по одним заголовкам блоков понятно, что вы продаёте и почему у вас, структура работает. Если нет — проблема не в вёрстке, и чинить её нужно сейчас.
3. 3Найдите все кнопки. Для каждой ответьте, что произойдёт по нажатию: откроется форма, мессенджер, прокрутка к тарифам. Кнопка, про которую никто не знает, куда она ведёт, появится в вёрстке «пустой».
4. 4Сверьте цифры и факты. Цены, сроки, телефоны, адреса и названия тарифов в макете часто остаются из прошлой версии. Одна неверная цифра на первом экране обходится дороже всех опечаток вместе.
5. 5Представьте ошибку. Что увидит человек, если введёт телефон без одной цифры? Если ответа в макете нет, это повод вернуть его дизайнеру.

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

Какие ошибки стоят дороже всего

Не все пропущенные детали одинаково опасны. Удобно разложить их по двум осям: насколько заметна ошибка до запуска и насколько дорого её исправлять потом.

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

Если не хочется проверять всё это самостоятельно, можно доверить процесс команде, где дизайн, вёрстка и приёмка идут одним потоком. В FreeTeams макет проходит проверку до вёрстки, а вы согласуете результат на каждом этапе.

Частые вопросы

Что обязательно проверить в макете лендинга перед вёрсткой?

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

Нужна ли отдельная мобильная версия в Figma?

Да. Без нарисованной мобильной версии верстальщик сам решает, как перестроить блоки, и результат часто расходится с ожиданиями.

Можно ли отдавать в вёрстку макет с текстом-заглушкой?

Лучше нет: реальный текст другой длины ломает блоки, и их приходится переделывать уже в коде. Минимум — тексты правильной длины.

Как передать макет из Figma верстальщику?

Дать ссылку с доступом к просмотру и экспорту, вынести финальные фреймы на отдельную страницу, подготовить иконки в SVG и описать анимации и поведение форм комментариями.

Кто отвечает за проверку макета — заказчик или дизайнер?

Техническое состояние файла — зона дизайнера, но финальное слово за заказчиком: он подтверждает тексты, сценарии и мобильную версию до начала вёрстки.