Валидация и автоматические проверки

Проверка подготовленного макета показывает замечания и нерешённые вопросы. Сначала выберите область — страницу или секцию, затем исправьте замечания, повторите проверку и отдельно оцените то, чего инструмент не охватывает. Эта страница объясняет границы инструмента и общую модель проверки, а не обещает запуск всех правил плагином.

Локальный отчёт: две настоящие ошибки, переход к слою и повторная проверка. Настоящий снимок локальной сборки, не опубликованного интерфейса. Открыть в полном размере.

Визуальный экскурс показывает, зачем эти решения нужны команде.

Группы проверок

Это группы правил всей методологии. Текущее покрытие отделяет реализованные проверки макета от тех, которым нужны структурированные данные, готовая реализация или оценка человека.

1. Синтаксис — теги, значения, ключи, действия и контрольные ширины записаны корректно.
2. Идентификаторы — ключи уникальны, стабильны и не зависят от ширины.
3. Адаптивы — состав элементов, вложенность, видимость, порядок и содержимое согласованы.
4. Структура — Auto Layout страниц, секций и контейнеров содержимого, запрет GROUP вне ресурсов, обёртки, обрезка, позиционирование и фиксированные размеры.
5. Интерактивность — ссылки, действия, цели, модальные окна, состояния и формы образуют полный граф.
6. Содержимое — текст согласован между адаптивами и выдерживает локализацию.
7. Экспорт — назначение сложных визуалов и настройки экспорта определены.
8. Доступность — проверяются подписи, контраст, области взаимодействия и декоративные слои.
9. Возможности адаптера — используемые функции поддерживаются выбранной средой реализации.

Способы проверки

• Автоматический — результат однозначно определяется по извлечённым данным.
• Эвристический — валидатор находит вероятную проблему, но решение подтверждает человек.
• Ручной — вопрос требует содержательной оценки человека.

Уровни серьёзности

• error — ошибка блокирует готовность в проверяемой области;
• warning — предупреждение нужно исправить или объяснить;
• info — справочная заметка для дизайнера, ревьюера или адаптера.

Как работает валидатор

извлечь дерево макета
  → нормализовать имена, теги, ключи и метаданные Figma
  → найти корни среди прямых потомков страницы Figma и только через нативные организаторы SECTION Figma
  → сгруппировать корневые фреймы по странице, состоянию и контрольной ширине
  → построить карту идентификаторов и типов
  → проверить значения идентификаторов на зависимость от ширины
  → сравнить состав элементов и родителей внутри одной группы страницы и состояния
  → сравнить видимость, порядок и назначение визуальных слоёв
  → сравнить продуктовое содержимое, исключив корневые декоративные ресурсы
  → классифицировать страницы, секции, обычные контейнеры, примитивы/конечные слои, экземпляры компонентов и непрозрачные ресурсы
  → проверить нативный тип узла и режим раскладки; потребовать Auto Layout и отклонить GROUP вне ресурсов
  → проверить назначение абсолютного декора/наложения на точном узле, не считая [decor] структурным исключением
  → проверить остальные обёртки и позиционирование
  → построить граф действий и целей
  → проверить геометрию, переполнение и фиксированные размеры
  → проверить экспорт и состояния компонентов
  → создать отчёт с идентификаторами правил, серьёзностью, местом и способом исправления

Нативные Section Figma прозрачны только на этапе поиска корней страницы. Валидатор не наследует их имена/теги, не переносит их в дерево страницы DFC Bridge и не использует для подавления правил раскладки. Поиск не проходит через обычные внешние FRAME/GROUP; после обнаружения проверяются только размеченные корни и их собственные поддеревья.

Проверка выбранной секции

Check selected section — отдельный режим аудита новой секции DFC Bridge внутри унаследованного хоста без DFC Bridge. Он не запускает конвейер страницы с придуманными метаданными.

прочитать явный выбор
  → разрешить каждый выбранный узел до ближайшей собственной/родительской границы [section=<stable-id>]
  → отклонить пустой выбор, узел без тега, корень страницы, разные идентификаторы секций или секцию под унаследованным [asset] как Blocked
  → удалить повторяющиеся нормализованные корни; обойти только их и потомков
  → считать [asset] непрозрачным, дочерний INSTANCE — доверенной атомарной границей, а [decor] — проверяемым намерением
  → выполнить локальные проверки идентичности, синтаксиса, структуры, содержимого и внутренних целей
  → сравнить только явно выбранные варианты одной секции при наличии двух и более пригодных корней
  → отложить только ссылки, требующие поиска вне выбранных корней, и файловые/страничные/интеграционные вопросы
  → выдать относящийся к области Ready, Partial или Blocked и постоянную матрицу покрытия

Редактируемый корень FRAME или COMPONENT проверяется вместе с поддеревом. Выбранный GROUP может нормализоваться, чтобы отчёт показал существующую блокирующую ошибку layout.group-outside-asset; вне непрозрачного ресурса Ready для него невозможен. Если сам нормализованный выбранный корень секции является INSTANCE, он показывает только границу и результат имеет Partial. Обычные дочерние экземпляры являются доверенными атомарными границами: их внутренность не применима к этому обходу и они не снижают Ready. Точный корень [section=id] [asset] допустим и непрозрачен, поэтому проверка внутренней раскладки неприменима. Секция под другим родительским ресурсом получает Blocked до обхода; унаследованная непрозрачность не является исключением. Один [decor] никогда не останавливает обход.

Один нормализованный корень объявляет один запрошенный контекст и может иметь Ready, если этот контекст чист. Отсутствие вариантов, которые пользователь не запрашивал, получает статус «не запрошено», а не Partial или ошибку отсутствующего адаптива. Два или больше явно выбранных корней используют один идентификатор секции и становятся объявленными выбранными вариантами. Подпись контекста, выведенная из ширины корня/контейнера, помечается как выведенная; валидатор не ищет соседние унаследованные фреймы ради искусственного покрытия.

Класс покрытия	Значение для выбранной секции
Локальное	Выбранное поддерево позволяет проверить собственный синтаксис тегов/идентичности и действий/ссылок, структуру источника, содержимое, цели внутри корней и полные допустимые адреса http:, https:, mailto: или tel:. Неполные/некорректные внешние значения блокируют результат, а не откладываются.
Выбранные варианты	Идентичность/тип, логическое дерево/состав, родители, продуктовый текст и визуальное назначение сравниваются только между явно выбранными пригодными вариантами.
Отложенное	Внутренние маршруты/якоря и цели действий/компонентов/данных, требующие поиска вне выбранных корней, а также корень страницы, полнота страницы/вида/маршрута, обязательные адаптивы страницы, глобальная уникальность, размещение в хосте, семантика страницы, рабочая среда, доступность реализации и соответствие WCAG требуют отдельных свидетельств.

Точные реализованные идентификаторы правил и применимость находятся в манифесте покрытия выбранной секции. Этот точный набор учитывается независимо от Page Check; числа двух проверок нельзя складывать.

Каталог правил

Машиночитаемый каталог находится в ../../validator/rules.json.

Группа	Пример правила	Серьёзность	Проверка
Идентификаторы	identity.missing-stable-identity	error	автоматическая
Идентификаторы	identity.same-identity-different-type	error	автоматическая
Идентификаторы	identity.breakpoint-specific-id	error	автоматическая
Синтаксис	syntax.duplicate-tag	error	автоматическая
Структура	layout.page-root-missing-auto-layout	error	автоматическая
Структура	layout.page-root-cannot-be-asset	error	автоматическая
Структура	layout.section-missing-auto-layout	error	автоматическая
Структура	layout.container-missing-auto-layout	error	автоматическая
Структура	layout.group-outside-asset	error	автоматическая
Структура	layout.positioned-without-intent	warning	автоматическая
Секции	section.component-source-unclassified	warning	эвристическая
Компоненты	component.ui-kit-used-as-section	warning	эвристическая
Адаптивы	responsive.identity-missing-in-required-breakpoint	error	автоматическая
Адаптивы	responsive.tree-cardinality-changed	error	автоматическая
Адаптивы	responsive.parent-changed-across-breakpoints	error	автоматическая
Содержимое	content.text-changed-between-breakpoints	error	эвристическая
Структура	layout.one-child-wrapper-without-role	warning	эвристическая
Интерактивность	interaction.clickable-without-action	warning	эвристическая
Интерактивность	interaction.modal-target-missing	error	автоматическая
Маршруты	routing.page-root-required	error	автоматическая
Высота	height.fixed-height-without-reason	warning	автоматическая
Переполнение	overflow.text-clipping-risk	error	эвристическая
Экспорт	asset.raster-text-without-reason	error	эвристическая или ручная
Доступность	accessibility.decorative-layer-exposed	warning	автоматическая

Полный список и точные параметры определяются JSON-каталогом.

Для layout.section-missing-auto-layout автоматическая проверка означает, что в проверяемом дереве присутствует узел FRAME или COMPONENT с [section], не являющийся корнем страницы. Размещённый экземпляр проверяется как единый объект: Page Check не переходит к его исходному компоненту и не выдаёт ошибку раскладки на сам экземпляр. Выберите и проверьте редактируемое дерево источника отдельно.

Формат отчёта

{
  "methodology": "DFC Bridge",
  "status": "not-ready",
  "summary": {
    "errors": 3,
    "warnings": 8,
    "info": 4
  },
  "issues": [
    {
      "ruleId": "interaction.modal-target-missing",
      "severity": "error",
      "nodeId": "contact-cta",
      "breakpoint": 320,
      "message": "Button references modal `contact-modal`, but no modal target exists.",
      "fix": "Create `[modal=contact-modal]` or change the action."
    }
  ]
}

Поля данных и идентификаторы правил остаются английскими. Пользовательские message и fix локализуются в интерфейсе валидатора.

Для отчёта области секции записывайте границу и незавершённые свидетельства, а не сводите результат к числу замечаний:

{
  "methodology": "DFC Bridge",
  "mode": "section",
  "status": "partial",
  "scope": {
    "kind": "section",
    "rootIdentity": "checkout-summary",
    "boundary": "selected-subtree",
    "readinessClaim": "section-source-only"
  },
  "coverage": {
    "evaluated": ["local-structure", "local-syntax"],
    "notRequested": ["selected-variant-comparison"],
    "deferred": ["file-resolved-targets", "host-integration"]
  },
  "issues": []
}

Для Ready в объявленной выбранной области не остаётся ошибок, предупреждений/задач, пробелов источника выбранного корня или отложенных проверок; доверенные дочерние экземпляры и незапрошенные варианты его не снижают. Partial не имеет блокирующей локальной ошибки, но сохраняет выбранный корень INSTANCE, неразличимый выбранный контекст или другой предупреждающий/отложенный пробел. Blocked означает отсутствующую/недопустимую границу с тегом, вложенные/смешанные корни секций или блокирующее замечание. Эти статусы не подтверждают готовность страницы, реализации или продукта и не являются заявлением о соответствии WCAG.

Режимы проверки

Быстрая проверка дизайнером

До обсуждения файла достаточно проверить:

• отсутствующие идентификаторы;
• неизвестные действия;
• фиксированную высоту текста;
• отсутствующие цели модальных окон и состояний;
• отличия текста между адаптивами.

Полная проверка ревьюером

Перед началом реализации пройдите применимые пункты указанным для них способом: автоматически, эвристически или вручную. Это не одна команда плагина «проверить всё»:

• весь каталог правил;
• пограничные случаи;
• покрытие состояний;
• доступность;
• предупреждения о возможностях адаптера.

Проверка возможностей адаптера

Чтобы подтвердить поддержку DFC Bridge конкретной средой, нужно описать:

• поддерживаемые теги и действия;
• неподдерживаемые визуальные функции;
• запасное поведение для экспортируемых ресурсов;
• правила преобразования адаптивов.

Что блокирует передачу

• У важного элемента нет стабильного идентификатора.
• В одной области сравнения повторяются идентификаторы.
• Идентификатор содержит текущую ширину или тип устройства.
• Один идентификатор используется для разных логических типов.
• На корне страницы выключен нативный Auto Layout; ноль/один потомок, [asset], [decor] или метаданные исключения на корне не подавляют правило.
• Корень страницы содержит [asset]; это отдельная блокировка, которая не создаёт непрозрачную границу и не останавливает проверку потомков.
• На секции-фрейме выключен нативный Auto Layout, кроме точной секции, которая действительно является непрозрачным цельным [asset] без живого контентного потока.
• У обычного контейнера с поддержкой Auto Layout есть два или более видимых значимых прямых элемента потока, но Auto Layout выключен.
• GROUP Figma находится вне непрозрачного поддерева [asset]. Manual-layout с причиной документирует предлагаемое отклонение, но не подавляет структурную ошибку.
• Обязательный элемент отсутствует на одной контрольной ширине.
• Между адаптивами меняется назначение [decor] или [asset].
• Финальный интерактивный элемент не имеет известной ссылки или действия.
• Действие ссылается на отсутствующую цель.
• Для модального окна не описано закрытие.
• Текст имеет фиксированную высоту без правил обработки переполнения.
• Динамический текст зависит от ручного переноса строки.
• Скрытый слой используется как источник правды.
• Редактируемый текст экспортируется изображением без причины.

Отсутствующий известный маршрут — черновая задача routing.page-route-missing, а не блокирующая ошибка. [link] и [control] тоже допустимы как отметки незавершённых решений, но не подтверждают готовность взаимодействия.

Ложные срабатывания допустимы

Валидатор должен предпочитать полезное предупреждение молчаливой поломке. Если необычное решение принято намеренно, отчёт должен объяснять, как оформить исключение:

[bridge-exception=overlay] [reason=decorative-layered-composition]

Структурные ошибки Auto Layout/GROUP остаются в отчёте даже при [bridge-exception=manual-layout] [reason=...]: эти теги дают основание для отдельного рассмотрения отклонения, а не успешный Page Check. [bridge-exception=overlay] [reason=...] может подтвердить назначение конкретного абсолютно позиционированного узла наложения.