Дизайн-макет в Figma: что проверить до передачи в вёрстку
Дизайн-макет готов к вёрстке, когда в нём есть мобильная и компьютерная версии всех уникальных страниц, все состояния кнопок и форм, реальные тексты, шрифты с кириллицей и лицензией для сайта и описанные отступы. Если чего-то нет, верстальщик додумает сам, и результат будет не таким, как вы утвердили. Проверка макета по списку ниже занимает 1–2 часа и экономит неделю переделок на вёрстке.
Почему макет «как картинка» не годится для вёрстки
Красивая картинка главной страницы на 1440 пикселей — это треть работы дизайнера. Сайт открывают на телефонах шириной 360–430 пикселей, планшетах, ноутбуках с экраном 1280 и больших мониторах. На каждом из них блоки должны перестраиваться по понятным правилам. Если в макете есть только одна ширина, верстальщик решает за дизайнера, как всё будет выглядеть на телефоне, а именно с телефона приходит большая часть посетителей.
Чек-лист приёмки макета
| Пункт | Как проверить | Если нет |
|---|---|---|
| Мобильная версия всех шаблонов | Есть фреймы шириной 360–390 | Верстальщик придумает сам |
| Компьютерная версия 1280–1440 | Есть основная ширина и правила для больших экранов | Сайт «расползётся» на широком мониторе |
| Состояния кнопок и ссылок | Обычное, наведение, нажатие, неактивное | Кнопки без обратной связи |
| Состояния форм | Пустое поле, фокус, ошибка, успешная отправка | Непонятно, что произошло после нажатия |
| Реальные тексты | Длинные заголовки, длинные названия товаров | Вёрстка ломается на реальном контенте |
| Шрифты | Есть кириллица, лицензия разрешает веб | Замена шрифта, претензия правообладателя |
| Контраст текста | Серый текст на фоне читается | Текст не видно на солнце и людям со слабым зрением |
| Сетка и отступы | Отступы повторяются, есть система | Разные отступы на каждой странице |
| Иконки и картинки | Экспортируются в SVG или с исходниками | Мутные иконки, лишний вес страницы |
| Пустые состояния | Нет товаров, нет результатов поиска | Пустой белый экран |
Тексты: самая частая причина переделок
Дизайнер рисует заголовок «Ремонт под ключ» в одну строку. Потом приходит реальный текст «Ремонт квартир в новостройках под ключ с гарантией 3 года», и он занимает три строки, выталкивая кнопку за край первого экрана на телефоне. Требуйте, чтобы в макете были реальные тексты или хотя бы тексты реальной длины. Проверьте самые длинные: название услуги, имя товара в карточке, адрес филиала.
Шрифты: кириллица и лицензия
Многие красивые шрифты не содержат кириллицы — в макете дизайнер видит латиницу, а на сайте браузер подставит другой шрифт. Проверьте, что все начертания (обычное, жирное, курсив) есть с русскими буквами.
Вторая проблема — лицензия. Шрифт, купленный для печати, не всегда разрешено использовать на сайте. Бесплатные шрифты с открытой лицензией (например, OFL) можно встраивать в сайт. Коммерческие требуют веб-лицензию, иногда с ограничением по числу посетителей. Спросите дизайнера, какая лицензия у каждого шрифта.
Контраст и читаемость
Светло-серый текст на белом выглядит изящно в макете на дорогом мониторе и не читается на телефоне при дневном свете. Ориентир — требования доступности WCAG 2.1: контраст основного текста не ниже 4,5:1, крупного — не ниже 3:1. Проверить можно плагином в Figma или любым онлайн-калькулятором контраста. Подробнее, в том числе про полупрозрачный текст, — в статье о проверке контраста.
Формы и сценарии
Форма в макете — это не только поля. Нужно видеть:
- Как выглядит ошибка: неверный телефон, пустое обязательное поле.
- Галочку согласия на обработку персональных данных — отдельную и неотмеченную по умолчанию.
- Что происходит после отправки: сообщение на странице, отдельная страница «спасибо», что написано и что дальше.
- Кнопку в состоянии загрузки, чтобы человек не нажимал её трижды.
- Поведение на телефоне: правильная клавиатура для телефона и почты, поля не прячутся под клавиатурой.
Как проверить макет на телефоне
Откройте прототип или макет в мобильном приложении Figma или по ссылке в браузере телефона. Это занимает пять минут и показывает то, чего не видно на мониторе: мелкий текст, кнопки, в которые трудно попасть пальцем, первый экран без предложения и кнопки. Пройдите главный сценарий одной рукой — так большинство людей пользуется телефоном в транспорте. Если до кнопки заявки приходится долго листать, вынесите её выше или сделайте закреплённой внизу экрана.
Что передать верстальщику вместе с макетом
- Ссылку на файл с правами просмотра и комментирования, экспорт ресурсов включён.
- Описание интерактивных элементов: анимации, слайдеры, раскрывающиеся блоки, как они работают.
- Список шрифтов с файлами и лицензиями.
- Цвета и размеры текста как переменные или стили, а не разрозненные значения.
- Фото в исходном качестве — верстальщик сам подготовит лёгкие версии в WebP или AVIF.
Сколько правок допустимо после утверждения
После утверждения макета любые изменения структуры — это изменение объёма работ. Замена текста или фото — нет. Чтобы не спорить, зафиксируйте в переписке версию макета, которую вы приняли, и договоритесь, что правки после утверждения оцениваются отдельно. Обычная практика — два круга правок на дизайн до утверждения входят в цену.
Материалы для проверки
Если нужна реализация
Состав работ зависит от текущего проекта и подтверждённой причины. Можно обсудить диагностику или разработку подходящего решения.
Вопросы и ответы
Сколько стоит дизайн-макет сайта?
Лендинг — от 20 до 80 тысяч рублей, сайт компании на 10 страниц — от 60 до 200 тысяч, в зависимости от числа уникальных шаблонов и уровня проработки. Мобильная версия и состояния элементов должны входить в эту цену.
Нужна ли мобильная версия в макете, если сайт адаптивный?
Да. Адаптивность — это правила перестройки, и их задаёт дизайнер. Без мобильного макета верстальщик сам решит, как переставить блоки, и это может не совпасть с вашими ожиданиями.
Можно ли использовать любой шрифт из Figma?
Нет. В Figma доступно много шрифтов, но лицензия на использование на сайте у каждого своя. Также проверьте наличие кириллицы во всех начертаниях.
Кому принадлежит макет после оплаты?
Это зависит от договора. Если в нём не сказано об отчуждении исключительного права или лицензии, права остаются у дизайнера. Пропишите передачу прав на макет вместе с правами на сайт.
Что делать, если верстальщик говорит, что макет «неверстабельный»?
Попросите перечислить конкретные места. Обычно это отсутствие мобильной версии, непродуманные анимации или элементы, которые сильно замедлят страницу. Такие места решают дизайнер и верстальщик вместе.