gromov/figma-adaptive-standards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
65fbf7cf6f2b2ee8e18f6f6208b579a55cc31a9f
figma-adaptive-standards/adaptive-layout-requirements.checklist.md
S. Gromov 65fbf7cf6f sync
2026-01-13 14:02:37 +03:00

8.6 KiB
Raw Blame History

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

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

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