9.7 KiB
9.7 KiB
Чеклист приёмки макета (Figma)
Примечание: в этом чеклисте «обоснованно» означает: по каждому «выбору» (например:
Hug/Fill/Fixed, wrap/truncate для текста,Fill/Fit,Stretch/Center) понятно что выбрано, зачем и как это ведёт себя на min/max диапазона и при длинном контенте. Если без пояснения можно понять по-разному — добавлена аннотация/комментарий.
0. Структура файла и нейминг
- В файле есть рабочие страницы: Cover / Overview, Design / UI, Components, Styles / Tokens, Responsive / Breakpoints, Prototype (Archive / Old — при необходимости)
- Экраны названы по единому правилу (например:
Feature / Screen — Breakpoint) - Компоненты названы семантически и единообразно (без «Button 1 / Button 2»)
- На странице
Responsive / Breakpointsописаны правила перестроения для сложных зон (колонки, переносы, скрытие/появление элементов)
1. Брейкпоинты
- Все якорные брейкпоинты созданы в виде отдельных фреймов
- Mobile, Tablet, Laptop, Desktop (диапазоны соблюдены)
- Границы диапазонов трактуются единообразно (например:
Mobile < 768,Tablet ≥ 768) - Фреймы логически и визуально связаны
- Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента
2. Адаптивность и ресайз
- Ресайз фрейма вручную до минимального значения диапазона
- Ресайз фрейма до максимального значения диапазона
- Проверены промежуточные значения (минимум 3–5 точек внутри диапазона)
- Макет корректно меняется во всём диапазоне без создания дублирующих фреймов
- Нет коллизий при ресайзе (наезды, обрезания, неожиданные перекрытия)
- Карточки и блоки тянутся или сжимаются корректно
- Текст переносится/обрезается по правилам и не выходит за пределы контейнеров
- Навигация корректно адаптируется под ширину
3. Auto Layout и Constraints
- Все контейнеры, списки, карточки, кнопки, хедеры, футеры, сайдбары используют Auto Layout
- Padding задан со всех сторон через Auto Layout (без «ручных» отступов)
- Spacing между элементами задан через Auto Layout
- Режимы ресайза выбраны обоснованно (
Hug / Fill / Fixed) для ключевых контейнеров и элементов - При необходимости заданы min/max (для предотвращения поломок на крайних ширинах)
- Constraints заданы корректно (Left / Right / Top / Bottom / Center / Scale) там, где Auto Layout не покрывает сценарий
- Нет ручного позиционирования или абсолютных размеров без причины
4. Сетка / Layout Grid
- Layout Grid настроен на фреймах каждого брейкпоинта (колонки соответствуют принятому стандарту)
- Margin и gutter заданы и согласованы с версткой
- Поведение сетки выбрано обоснованно (Stretch/Center — по модели проекта)
- Основные блоки выровнены по сетке и используют согласованный шаг отступов
5. Компоненты
- Все повторяющиеся элементы оформлены как Components
- Используются Variants вместо копий
- Состояния компонентов показаны (минимум: Default, Hover, Active/Pressed, Disabled, Focus — если применимо)
- Компоненты корректно тянутся и меняют высоту по контенту
- Адаптивное поведение проверено во всех типовых контейнерах (экран, модалка, сайдбар, список/сетка)
6. Типографика
- Используются Text Styles (
H1 / H2 / Body / Caption / Buttonили принятый набор) - Используются только бесплатные шрифты (предпочтительно Google Fonts)
- Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Tablet/Laptop/Desktop — как принято в проекте)
- Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing)
- На фреймах установлен корректный Mode для соответствующего брейкпоинта
- Ограничение количества строк соблюдено там, где это критично
- Правила для текста определены: перенос или обрезка (truncate), поведение при переполнении проверено
- Проверены «экстремальные» тексты, включая одну очень длинную строку без пробелов
7. Цвета и стили
- Все цвета через Color Styles
- Семантические названия соблюдены (
Primary / Secondary,Text / Background / Border,Success / Error / Warning) - Дополнительные стили (тени/обводки/радиусы), если используются, применены единообразно
8. Контент и состояния UI
- Текст проверен на короткие / нормальные / длинные варианты
- Проверка переполнения и переноса строк выполнена
- Состояния UI присутствуют: Default, Hover, Active, Disabled, Focus, Loading, Empty, Error
- Для форм/инпутов показаны состояния ошибок и валидации (включая сочетания вроде
Focus + Error, если применимо)
9. Изображения и медиа
- Fill / Fit задан корректно
- Safe area для обрезки изображений соблюдена
- Поддерживаются разные соотношения сторон (описано поведение при изменении ratio)
- Форматы и размеры соответствуют требованиям проекта (если есть требования к экспорту)
10. Навигация
- Desktop → горизонтальное меню
- Tablet → сокращённое меню
- Mobile → бургер / bottom bar
- Описаны правила overflow/сокращения (что уходит в «ещё», что скрывается/переезжает)
11. Accessibility (A11y)
- Контраст ≥ WCAG AA
- Минимальный размер клика 44×44 px
- Focus states проверены
- Логичный tab order соблюден
12. Прототипирование
- Основные пользовательские флоу представлены
- Переходы между брейкпоинтами реализованы (если требуется)
- Поведение при ресайзе проверено/продемонстрировано
13. Передача в разработку
- Dev Mode включён
- Все комментарии с логикой адаптивности оставлены
- Брейкпоинты, поведение блоков, скрытие/появление элементов описаны
- Ассеты к экспорту подготовлены (если требуется): корректные имена, форматы, настройки экспорта
14. Запрещено
- Фиксированные ширины без причины
- Дубли компонентов под каждый экран
- Текст как вектор
- Ручные отступы
- Отсутствие Auto Layout
✅ Итоговое решение
Макет считается готовым к разработке, если выполнены все пункты чеклиста и ресайз работает корректно во всех диапазонах.