Чек-лист подготовки макетов в Figma для верстки на Тильде и Webflow
Это наш внутренний чек-лист. Он помогает навести порядок в макетах перед их передачей верстальщикам, разработчикам. Будет очень круто если закрыть его больше 80%. Но и не закапывайтесь сильно.
1. Стили и структура
Все цвета, шрифты, радиусы вынесены в Styles.
На каждом макете есть сетка (если предусмотрена дизайном).
Все страницы — на отдельных страницах Figma.
Устаревшие версии макетов удалены или архивированы.
2. UI-кит и айдентика
UI-кит обновлён и содержит все актуальные элементы.
Айдентика и UI-кит находятся на отдельной странице в проекте.
Используются компоненты и автолэйауты для удобства масштабирования и адаптации.
3. Формы, ошибки и доп. элементы
Для форм проработаны состояния: ошибка, успех, активное/неактивное поле.
Сделан дизайн политики конфиденциальности и страницы 404.
Фавикон и бейджик разработаны.
4. Адаптивность и анимации
Сделан дизайн всех адаптивных версий страниц.
Все поп-апы с их состояниями оформлены и включены в UI-кит.
Показаны состояния ховеров, нажатий и активных элементов.
Приложены примеры анимаций или ссылки на рефы.
5. Контент и текстовые блоки
Проверено отсутствие висячих предлогов в тексте.
Для изменяемых клиентом страниц предусмотрены варианты длины текста (от 1 до 5 строк и больше).
Даны рекомендации по ограничениям длины текста и поведению при превышении лимита (скрывать, переносить и т.д.).
6. Дополнительные элементы и комментарии
Дополнительные хэдеры снабжены описанием условий их появления.
На кнопках и интерактивных элементах четко обозначены кликабельные зоны.
В макете проставлены комментарии к сложным элементам и поведению.
Организованы и подписаны страниц, ключевые фреймы.
Если нужно — добавлен комментарий о необходимости скейла (масштабирования) для верстальщика.
7. Экспорт и ассеты
Все нестандартные иконки и графика подготовлены к экспорту.
Фотографии выгружены в архив и подписаны по человечески.
В названия фрейма добавляется «v1.0»
8. Изменения в дизайне который уже сверстан
Предыдущая версия макета сохраняется.
Новая версия макета меняет версию в названии фрейма v1.0 →v1.1 или v2.0.
Изменения размещаются в отдельном блоке справа от основной версии с обязательными комментариями к каждому изменению.
К каждому измененному элементу добавляется комментарий.