Files
figma-adaptive-standards/checklist.md
2026-01-13 13:15:45 +03:00

108 lines
5.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Чеклист приёмки макета (Figma)
## 1. Брейкпоинты
- [ ] Все якорные брейкпоинты созданы в виде отдельных фреймов
- Mobile, Tablet, Laptop, Desktop (диапазоны соблюдены)
- [ ] Фреймы логически и визуально связаны
- [ ] Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента
---
## 2. Адаптивность и ресайз
- [ ] Ресайз фрейма вручную до минимального значения диапазона
- [ ] Ресайз фрейма до максимального значения диапазона
- [ ] Макет корректно меняется во всём диапазоне без создания дублирующих фреймов
- [ ] Сетка ведёт себя предсказуемо (колонки, отступы, порядок элементов)
- [ ] Карточки и блоки тянутся или сжимаются корректно
- [ ] Текст переносится и не выходит за пределы контейнеров
- [ ] Навигация корректно адаптируется под устройство
---
## 3. Auto Layout и Constraints
- [ ] Все контейнеры, списки, карточки, кнопки, хедеры, футеры, сайдбары используют Auto Layout
- [ ] Padding задан со всех сторон
- [ ] Spacing между элементами через Auto Layout
- [ ] Constraints заданы корректно (Left / Right / Top / Bottom / Center / Scale)
- [ ] Нет ручного позиционирования или абсолютных размеров без причины
---
## 4. Компоненты
- [ ] Все повторяющиеся элементы оформлены как Components
- [ ] Используются Variants вместо копий
- [ ] Компоненты корректно тянутся и меняют высоту по контенту
- [ ] Адаптивное поведение проверено во всех контейнерах
---
## 5. Типографика
- [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button`)
- [ ] Размер шрифта адаптируется между брейкпоинтами
- [ ] Line-height задан в %
- [ ] Ограничение количества строк соблюдено
---
## 6. Цвета и стили
- [ ] Все цвета через Color Styles
- [ ] Семантические названия соблюдены (`Primary / Secondary`, `Text / Background / Border`, `Success / Error / Warning`)
---
## 7. Контент и состояния UI
- [ ] Текст проверен на короткие / длинные варианты
- [ ] Проверка переполнения и переноса строк выполнена
- [ ] Состояния UI присутствуют: Default, Hover, Active, Disabled, Focus, Loading, Empty, Error
---
## 8. Изображения и медиа
- [ ] Fill / Fit задан корректно
- [ ] Safe area для обрезки изображений соблюдена
- [ ] Поддерживаются разные соотношения сторон
- [ ] Форматы и размеры соответствуют требованиям проекта
---
## 9. Навигация
- [ ] Desktop → горизонтальное меню
- [ ] Tablet → сокращённое меню
- [ ] Mobile → бургер / bottom bar
---
## 10. Accessibility (A11y)
- [ ] Контраст ≥ WCAG AA
- [ ] Минимальный размер клика 44×44 px
- [ ] Focus states проверены
- [ ] Логичный tab order соблюден
---
## 11. Прототипирование
- [ ] Основные пользовательские флоу представлены
- [ ] Переходы между брейкпоинтами реализованы
- [ ] Поведение при ресайзе проверено
---
## 12. Передача в разработку
- [ ] Dev Mode включён
- [ ] Все комментарии с логикой адаптивности оставлены
- [ ] Брэйкпоинты, поведение блоков, скрытие/появление элементов описаны
---
## 13. Запрещено
- [ ] Фиксированные ширины без причины
- [ ] Дубли компонентов под каждый экран
- [ ] Текст как вектор
- [ ] Ручные отступы
- [ ] Отсутствие Auto Layout
---
## ✅ Итоговое решение
Макет считается **готовым к разработке**, если выполнены все пункты чеклиста и ресайз работает корректно во всех диапазонах.