DFC Bridge examples

Use these short recipes when a design question is concrete. Each example has one problem, one correction, and one reason. Choose the example that matches your current problem; you do not need to read them in order.

A visual introduction to handoff decisions: team questions, reasons and real Figma captures.

1. Page and widths

Problem: the file has unrelated desktop and mobile-final-2 roots.

Use:

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

The same [page] and [view] connect the prepared widths. [bp] records the width shown by each root.

Separate illustration using workshop, not a screenshot of the home snippet above. Read the shared page and view first, then the two bp values. They identify widths of one page view. A route supplies its URL separately; bp records a prepared native width, not a CSS media-query threshold. Open full size.

2. One name across widths

Problem: hero-title-mobile looks like a new element.

Use:

hero-title

The size or position can change. The stable name keeps the same logical element recognizable.

Separate illustration using two buttons, not a rendering of hero-title above. Follow each connector to find the same named control at both widths. Names identify correspondence; they do not freeze position. Here both controls also keep hero-actions as their parent; a different meaningful parent requires a declared transformation. Open full size.

3. A page section

Use [section] for a section built directly in the page:

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

An instance from the Page Sections library already has a source component. Do not repeat the section key unless the local frame really is the section boundary.

Separate illustration of a hero section, not the product-results tree above. Read the nested frames from outside in: hero owns the copy, actions and artwork; the text and controls have their own meaningful parents. This is a structure diagram, not a comparison of widths or a Figma capture. Open full size.

4. Link or interface action

Use [href] when the user navigates and [action] when the current interface changes:

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

Do not use a fake href for a button or a fake action for a normal link.

Separate illustration using an anchor and modal, not the route/state example above. Read the two paths separately: href names the FAQ anchor destination; action names the modal to open in the current interface. These are declared intentions, not a wired Figma prototype or proof of working navigation, modal focus or closing behavior. Open full size.

5. Button and modal

The action points to the modal’s stable identifier:

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

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

The same UI Kit button can have different actions in different contexts. The action belongs to the instance in the page, not to the shared component name.

Local Assistant: button, actual modal and jump to destination. Real capture of a local development build, not the published UI. Open full size.

6. Meaningful structure

Problem: nearby layers are grouped only because they were selected together.

Use:

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

Each wrapper has a real job: content, layout, clipping, background, or interaction area. Detailed layout policy is in design rules and wrapper policy.

Expanded structural illustration, not a rendering of the abbreviated tree above. Follow the containment: hero-copy owns related text and hero-actions owns related controls. Each wrapper has a layout job. The diagram shows one meaningful structure, not a good-versus-bad comparison or a rule to add wrappers everywhere. Open full size.

7. Real content

Show the data that can change the layout:

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

Check short, long, empty, loading, and error states. Do not replace changing content with a picture of the final composition.

Compare the same text above and below: in this example, Hug height preserves the final lines and moves the next card down. Fixed height, scrolling and truncation are not universally forbidden; each needs an explicit, appropriate overflow policy. Open full size.

8. Content, decoration, and export

Use the smallest clear policy on the exact visual layer:

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

[decor] describes visual purpose. [asset] says that the visual is transferred as one resource. A layer can use both when both statements are true.

Separate illustration with hero-title, hero-glow and workshop-art. Read each row from role to transfer boundary: text stays editable; decor identifies visual purpose; asset transfers one opaque visual. These are separate decisions, so decor and asset can coexist. This illustration does not classify every product image as decoration. Open full size.

How to use this catalog

Find the question that matches your file and apply the smallest relevant pattern. Then use the designer checklist to review the chosen handoff scope.

Layer names are not the place for an entire behavior specification. When the design needs data, reactions, motion, or accessibility, describe those decisions in the structured transfer contract. Use the executable validator/examples/bridge-contract.valid.json file in the repository as the starting point; the article’s illustrative excerpt and individual module fragments are not a complete handoff.