Когда дизайн сайта готов, наступает важный этап — передача макета верстальщику (это называют handoff).
Если всё подготовить правильно, верстальщик быстро соберёт сайт без ошибок и уточнений.
💡 Если ты ищешь готовые макеты сайтов в Figma — посмотри каталог:
templatica.pro/makety-sajtov-v-figma
1. Полные макеты всех экранов
Передай не только главный экран, но и:
- версии под десктоп, планшет и мобильный;
- все состояния страниц — например, пустой список, ошибка, загрузка, модальное окно;
- показ, как работает сетка (колонки, отступы).
Так верстальщик поймёт, как всё должно выглядеть при разных ситуациях.
2. Гайд по стилям (Style Guide)
Это документ, где собрана вся визуальная информация:
- какие шрифты и размеры использовать;
- какие цвета — основные и дополнительные;
- какие бывают кнопки, ссылки, иконки и их состояния (наведение, клик, отключено).
Такой гайд помогает сделать сайт единым по стилю и упростить поддержку.
3. Описание интерактивных элементов
Если в дизайне есть кнопки, формы или анимации — объясни, как они должны работать:
- что происходит при наведении и нажатии;
- какие есть анимации и их длительность;
- как выглядят поля при ошибке или успешной отправке.
Это помогает избежать недопонимания и странного поведения сайта.
4. Изображения, видео и иконки
Обязательно передай все ресурсы в нужных форматах:
- картинки: PNG, JPG, SVG, WebP;
- иконки: SVG;
- видео: MP4/WebM и обложка (JPG/WebP).
Проверь, чтобы файлы имели правильные размеры и хорошее качество.
Если используешь стоковые картинки — добавь ссылки на лицензии.
5. Технические ограничения
Если проект делается на конкретной технологии — напиши об этом:
- стек (HTML/CSS/JS, React, Vue и т. д.);
- требования к скорости загрузки;
- поддерживаемые браузеры и устройства.
Так верстальщик сразу поймёт, что можно, а что — нет.
6. Контент и SEO
Передай финальные тексты, заголовки и описания:
- H1, H2, H3 — для структуры страницы;
- title и description — для поисковиков;
- alt-тексты для картинок.
Это нужно, чтобы сайт был понятен поисковым системам и хорошо ранжировался.
📌 Хочешь подсмотреть удачные структуры страниц?
Загляни в templatica.pro/makety-sajtov-v-figma
7. Адаптивность
Укажи, как сайт должен меняться при разных размерах экрана:
- какие блоки прячутся или перестраиваются;
- как меняются шрифты и отступы;
- какие картинки показывать на мобильной версии.
8. Структура файла в Figma
Сделай проект понятным:
- аккуратно назови страницы и слои;
- собери повторяющиеся элементы в компоненты;
- не оставляй лишних фреймов и слоёв;
- добавь комментарии, если что-то нужно объяснить.
9. Доступность
Чтобы сайт был удобен всем пользователям:
- делай читаемые цвета и контраст;
- кнопки — не меньше 44×44 px;
- добавляй описания для иконок и форм.
10. Типичные ошибки при передаче
Не забывай:
- делать все состояния (загрузка, ошибка, пустая страница);
- использовать единые отступы и цвета;
- экспортировать оптимизированные картинки;
- уточнять технические детали заранее;
- передавать финальные тексты, а не «рыбу».
Вывод
Передача макета — это не просто отправить Figma-файл.
Это целый пакет данных: дизайн, стили, ресурсы, интерактив, адаптив, SEO и ограничения.
Чем лучше всё подготовлено — тем быстрее и качественнее будет вёрстка.
🎨 Готовые макеты сайтов в Figma можно найти здесь:
templatica.pro/makety-sajtov-v-figma
