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

5.1 KiB
Raw Blame History

Чеклист приёмки макета (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

Итоговое решение

Макет считается готовым к разработке, если выполнены все пункты чеклиста и ресайз работает корректно во всех диапазонах.