Иногда макет в Figma выглядит идеально, но после вёрстки результат сильно отличается: что-то съехало, элементы выглядят не так, текст «поехал». Почему? Чаще всего — дизайнер не подготовил макет для вёрстки.

Вот как сделать, чтобы ваш макет поняли правильно и без лишних вопросов:

✅ 1. Используйте автолэйаут и сетку
Макет должен быть собран на системе: контейнеры, колонки, отступы. Верстальщик не должен угадывать, где и почему именно такой отступ. Задали 24px — значит 24, а не «примерно так».

✅ 2. Подписывайте блоки и группы
Никаких «Frame 13», «Group 98». Названия должны быть понятными: header, hero, card, footer. Это помогает навигации и экономит время.

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

✅ 4. Указывайте шрифты, размеры и цвета
Используйте стили! Пусть у всех заголовков h2 будет один стиль, у параграфов — другой. Не создавайте 15 похожих оттенков серого. Это упрощает верстку и поддержку.

✅ 5. Готовьте адаптивные версии
Хорошая практика — добавить макеты для планшета и телефона. Если у вас только десктоп — дайте хотя бы текстовое описание, как должно перестраиваться.

✅ 6. Используйте компоненты и не дублируйте вручную
Если у вас 10 одинаковых карточек — используйте компонент. Это поможет избежать визуальных расхождений, а разработчику — понять, что повторяется.

✅ 7. Показывайте поведение при переполнении
Что будет, если текст длиннее? Он обрезается, переносится, скроллится? Особенно важно для карточек и кнопок.

✅ 8. Проверяйте отступы, размеры и консистентность
Разный отступ в двух идентичных блоках — это ошибка. Используйте плагины вроде Stark или Design Lint, чтобы проверить чистоту макета.

✅ 9. Добавляйте технические пояснения
Если в каком-то месте есть нестандартная логика — поясните. Например: «этот блок исчезает на мобильных», «это не текст, а SVG».

✅ 10. Проверьте масштаб и сетку по 1440 или 1280 px
Лучше всего отдать макет в сетке, которую реально использовать. Без «фантастических» разрешений 1700 px и ширины контейнера в 1623 px.

💡 И помните: хороший макет — это не просто красиво. Это понятная, структурированная схема для вёрстки, где нет места догадкам.

Хотите, чтобы сайт получился точь-в-точь как задумано? Подготовьте макет правильно 🙌