134 lines
8.6 KiB
Markdown
134 lines
8.6 KiB
Markdown
# Чеклист приёмки макета (Figma)
|
||
|
||
## 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` или принятый набор)
|
||
- [ ] Размер шрифта адаптируется между брейкпоинтами (если это предусмотрено)
|
||
- [ ] Line-height задан осознанно (в % или по принятому стандарту)
|
||
- [ ] Ограничение количества строк соблюдено там, где это критично
|
||
- [ ] Правила для текста определены: перенос или обрезка (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
|
||
|
||
---
|
||
|
||
## ✅ Итоговое решение
|
||
Макет считается **готовым к разработке**, если выполнены все пункты чеклиста и ресайз работает корректно во всех диапазонах.
|