DFC Bridge на примерах

Используйте эти короткие рецепты, когда вопрос по макету уже понятен. Каждый пример показывает одну проблему, одно исправление и короткую причину. Выберите пример под текущую задачу; читать их по порядку необязательно.

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

1. Страница и ширины

Проблема: в файле есть несвязанные корни desktop и mobile-final-2.

Используйте:

home [page=home] [route=/] [bp=1440] [view=default]
home [page=home] [route=/] [bp=375] [view=default]

Одинаковые [page] и [view] связывают подготовленные ширины. [bp] записывает ширину каждого корня.

Отдельная иллюстрация на workshop, не снимок примера home выше. Сначала прочитайте общие page и view, затем два значения bp. Они задают ширины одного вида страницы. URL задаётся отдельно через route; bp обозначает подготовленную нативную ширину, не порог CSS-медиазапроса. Открыть в полном размере.

2. Одно имя на разных ширинах

Проблема: hero-title-mobile выглядит как новый элемент.

Используйте:

hero-title

Размер и положение могут измениться. Стабильное имя помогает узнать тот же логический элемент.

Отдельная иллюстрация с двумя элементами управления, не изображение hero-title выше. Проследите линии до одноимённых элементов на обеих ширинах. Имя задаёт соответствие, а не неизменную позицию. Здесь оба элемента также сохраняют родителя hero-actions; смену смыслового родителя нужно объявить как преобразование. Открыть в полном размере.

3. Секция страницы

Используйте [section] для секции, собранной прямо на странице:

product-results [section=product-results]
  product-grid [collection=products]

Экземпляр из библиотеки Page Sections уже имеет исходный компонент. Не повторяйте ключ секции, если локальный фрейм не является её границей.

Отдельная иллюстрация секции hero, не дерева product-results выше. Читайте вложенные рамки снаружи внутрь: hero содержит текстовую группу, действия и визуал; текст и элементы управления имеют смысловых родителей. Это схема структуры, не сравнение ширин и не снимок Figma. Открыть в полном размере.

4. Ссылка или действие

Используйте [href] для перехода и [action] для изменения текущего интерфейса:

catalog-link [href=/catalog]
filter-button [action=state:filters-open]

Не используйте фальшивый href для кнопки и фальшивое действие для обычной ссылки.

Отдельная иллюстрация с якорем и окном, не примером маршрута и состояния выше. Читайте два пути отдельно: href задаёт переход к якорю FAQ, action — открытие окна в текущем интерфейсе. Это объявленные намерения, не настроенный прототип Figma и не доказательство работы перехода, фокуса или закрытия окна. Открыть в полном размере.

5. Кнопка и модальное окно

Действие ссылается на стабильный идентификатор модального окна:

contact-button [action=modal:contact-modal]

contact-modal [modal=contact-modal]
  modal-title
  close-button

Одна и та же кнопка из UI Kit может выполнять разные действия в разных местах. Действие задаётся экземпляру на странице, а не общему имени компонента.

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

6. Осмысленная структура

Проблема: соседние слои сгруппированы только потому, что их выбрали вместе.

Используйте:

hero
  hero-copy
    hero-title
    hero-subtitle
  hero-actions
    contact-button

У каждой обёртки должна быть настоящая задача: содержимое, раскладка, обрезка, фон или область взаимодействия. Подробности — в правилах подготовки макета и правилах обёрток.

Расширенная схема структуры, не изображение сокращённого дерева выше. Проследите вложенность: hero-copy содержит связанный текст, hero-actions — связанные элементы управления. У каждой обёртки есть задача в раскладке. Показана одна осмысленная структура, не сравнение хорошего и плохого и не требование добавлять обёртки везде. Открыть в полном размере.

7. Реальный контент

Показывайте данные, которые могут изменить раскладку:

product-card
  product-title
  product-price
  product-image

Проверьте короткий, длинный, пустой, загружаемый и ошибочный варианты. Не заменяйте изменяемый контент картинкой готовой композиции.

Сравните один текст сверху и снизу: в этом примере высота Hug сохраняет последние строки и сдвигает следующую карточку. Фиксированная высота, прокрутка и сокращение не запрещены вообще: для них нужна явная, подходящая политика переполнения. Открыть в полном размере.

8. Контент, декор и экспорт

Используйте самое короткое понятное правило на точном визуальном слое:

product-image
hero-glow [decor]
campaign-illustration [asset]

[decor] описывает визуальную роль. [asset] означает, что визуал передаётся одним ресурсом. Один слой может использовать оба тега, если верны оба утверждения.

Отдельная иллюстрация на hero-title, hero-glow и workshop-art. Читайте каждую строку от роли к границе передачи: текст остаётся редактируемым; метка декора задаёт визуальное назначение; метка ресурса — передачу одним целым. Это разные решения, поэтому метки совместимы. Схема не относит все продуктовые изображения к декору. Открыть в полном размере.

Как пользоваться каталогом

Найдите похожую задачу и примените минимальный подходящий пример. Затем пройдите чеклист дизайнера для выбранной области передачи.

Имя слоя не заменяет описание всего поведения. Решения о данных, реакциях, движении и доступности записывайте в структурированном контракте переноса. Начните с проверяемого файла validator/examples/bridge-contract.valid.json в репозитории. Иллюстративный пример в статье и отдельные фрагменты модулей не являются полной передачей.