# Чеклист приёмки макета (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, Mobile Wide, Tablet, Laptop, Desktop (диапазоны соблюдены) - [ ] Границы диапазонов трактуются единообразно (например: `Mobile ≤ 479`, `Mobile Wide 480–767`, `Tablet 768–1023`, `Laptop 1024–1439`, `Desktop ≥ 1440`) - [ ] Фреймы логически и визуально связаны - [ ] Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента --- ## 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/Mobile Wide/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 --- ## ✅ Итоговое решение Макет считается **готовым к разработке**, если выполнены все пункты чеклиста и ресайз работает корректно во всех диапазонах.