DFC Bridge tag grammar

DFC Bridge tags are short machine-readable annotations in layer names. In Figma, they are used only for transfer intent that is not present in Figma metadata.

Use this page as a lookup reference, not a checklist to fill out on every layer. Start with a stable name, then choose a tag for the meaning you need to add. For the end-to-end workflow, see the designer quick start.

Core principle

Do not write a tag if it repeats what is already authored in Figma.

Figma is the source of truth for technical layer properties:

node type: text, image/vector, component instance;
Auto Layout, constraints, dimensions, gap, padding, alignment, wrap;
hierarchy: frames, groups, components;
positioning, clipping, masks;
fills, strokes, effects;
source component, variants, component properties.

A DFC Bridge tag is only for product or transfer meaning.

Syntax

Use property tags for facts an agent or adapter must read:

[property=value]

Use boolean tags for visual-intent/policy flags and draft markers that do not need a value:

[decor]
[asset]
[link]
[control]

Stable identity inside Figma can be just the layer name:

hero-title
product-photo
close-icon
button-group

The name must be stable English kebab-case.

If a property tag has an identity-like value, the value must be English kebab-case unless the tag explicitly defines another value syntax, such as [route=/path], [href=https://...], or [action=modal:target-id].

Tags designers write

Page and route

[page=home]
[route=/]
[bp=1920]
[view=default]
[anchor=faq]

home [page=home] [route=/] [bp=1920] [view=default]
faq [anchor=faq]

[page=...], [bp=...], and [view=...] define the draftable page root. Add [route=...] or [route-pattern=...] only when the real production URL is known:

contacts [page=contacts] [bp=1440] [view=default]
contacts [page=contacts] [route=/contacts] [bp=1440] [view=default]
product-detail [page=product-detail] [route-pattern=/catalog/:slug] [bp=1440] [view=default]

Do not invent fake production routes to satisfy a checklist.

Section contract

[section=product-slider]
[section=home-hero]

[section=...] describes the stable key of the section component, not the heading of a specific block.

If the block is an instance of a component from the Page Sections library page, the page instance does not need the tag:

header
reviews
footer

In this case, the section key comes from the source component:

Page Sections / header -> section=header
Page Sections / reviews -> section=reviews
Page Sections / footer -> section=footer

If the block is a regular frame or the component is too generic, use the tag explicitly:

catalog [section=product-slider]
related-products [section=product-slider]
recommended-products [section=product-slider]
hero [section=home-hero]

Do not use prefixes such as Section /: the role is already clear from the tag or from the source component in Page Sections.

Targets

Put a target tag on the object being opened or activated; put [action] on the control that triggers it. For example, [action=modal:contact-modal] refers to [modal=contact-modal].

[modal=contact-modal]
[state=mobile-menu-open]

contact-modal [modal=contact-modal]
mobile-menu-open [state=mobile-menu-open]

Links

A known navigation destination is written as [href=...]. This tag is enough to classify the layer as a link; ordinary designer examples do not need [link=...].

[href=/contacts]
[href=/contacts#faq]
[href=#faq]
[href=https://t.me/company]
[href=mailto:sales@example.com]
[href=tel:+12025550123]

contacts-link [href=/contacts]
faq-link [href=/contacts#faq]
same-page-faq [href=#faq]
telegram-link [href=https://t.me/company]
email-link [href=mailto:sales@example.com]
phone-link [href=tel:+12025550123]

If the destination is unknown, use the boolean draft marker [link]:

contacts-link [link]

[href=#] is invalid. #faq is a real same-page anchor; # is not an unknown href placeholder.

Optional link behavior:

[open=new-tab]
[a11y-label=Telegram]

Advanced override only: use [link=...] when an explicit stable machine id is needed in addition to the layer name. Do not use it in ordinary designer examples.

contacts-cta [link=nav-contacts-primary] [href=/contacts]

Validators classify href values:

/path — internal route;
#anchor — same-page anchor;
/path#anchor — cross-page anchor;
https://... — external URL;
mailto: / tel: — external protocol.

Controls and actions

A known non-navigation action is written as [action=...]. This tag is enough to classify the layer as a control/button; ordinary designer examples do not need [control=...].

[action=modal:contact-modal]
[action=state:mobile-menu-open]
[action=submit:lead-form]
[action=reset:catalog-filters]
[action=none]

contact-cta [action=modal:contact-modal]
menu-button [action=state:mobile-menu-open]
lead-submit [action=submit:lead-form]
reset-filters [action=reset:catalog-filters]
disabled-cta [action=none]

If the action is unknown, use the boolean draft marker [control]:

contact-cta [control]

Advanced override only: use [control=...] when an explicit stable machine id is needed in addition to the layer name. Do not use it in ordinary designer examples.

contact-cta [control=contact-cta-primary] [action=modal:contact-modal]

Allowed action forms:

[action=modal:target-id]
[action=state:target-id]
[action=submit:form-id]
[action=reset:target-id]
[action=none]

Fields

Fields require stable identity and a data binding name.

email [field=email] [name=email]
country [field=country] [name=country]
message [field=message] [name=message]

Use [field-type=...] only when the type cannot be inferred from UI Kit/native metadata:

country [field=country] [name=country] [field-type=select]

Collections and repeated items

Use collection/item tags only when a dynamic list or repeated data must be explicit.

products [collection=products]
product-card-oak-chair [item=product]
product-card-wool-lamp [item=product]

The shared [item=product] value classifies a repeatable role/type; it is not identity-bearing. Use the stable layer name/bridgeKey and structured designInstance/runtimeData mappings for unique authored and runtime identity. If the card is a component instance and repetition is obvious from the Figma structure, the extra tag is not required.

Visual intent

A content image gets a stable layer name without a manual [image=...] tag.

product-photo
article-cover
author-avatar

[decor] and [asset] are boolean visual-intent/policy tags, not mandatory identity tags. They may appear together and must not be reported as “multiple identity tags”.

A decorative visual is marked with [decor].

[decor] means:

the layer is decorative;
it is not product content;
outside an opaque asset, it is the exact intended absolute visual node rather than a flow container or GROUP;
it should not enter the accessibility tree and may be aria-hidden;
it does not require alt/content semantics;
it still preserves stable responsive identity and must not disappear between breakpoints;
it never disables Auto Layout or GROUP validation for itself, an ancestor, or an arbitrary subtree.

sneg [decor]
snow-bg [decor]
hero-glow [decor]

A whole exported visual is marked with [asset].

[asset] means:

export or use the visual as one whole unit;
do not rebuild it from internal layers;
treat its internal composition as opaque for structural layout checks;
the root asset still preserves stable responsive identity between breakpoints and remains one item in its parent’s Auto Layout;
never mark an entire DFC Bridge page root [asset] to bypass layout checks.

promo-poster [asset]
lab-illustration [asset]
snow-bg [decor] [asset]

If the layer already has a stable name, prefer the boolean form:

sneg [decor] [asset]

The identity is sneg. [decor] and [asset] only add visual intent and transfer policy.

The old value form remains valid only as a fallback for poor/default layer names:

Frame 182 [decor=snow-bg]
Group 91 [asset=promo-poster]

If a value is present in [decor=...] or [asset=...], validate it as English kebab-case. Boolean [decor] and [asset] without values are valid.

Height and overflow

Use these tags only when behavior cannot be safely inferred from Figma or when dynamic content needs an explicit policy.

[height=hug]
[height=fixed]
[height=min]
[height=fill]
[overflow=visible]
[overflow=hidden]
[overflow=scroll]
[overflow=truncate]
[lines=3]

description [height=hug]
description [height=fixed] [overflow=truncate] [lines=3]

Exceptions

[bridge-exception=raster-text]
[bridge-exception=overlay]
[bridge-exception=manual-layout]
[bridge-exception=fixed-height]
[bridge-exception=manual-line-break]
[bridge-exception=unsupported-effect]
[bridge-exception=manual-transfer]
[reason=brand-lockup]

Rules:

every exception requires [reason=...];
[bridge-exception=manual-line-break] is allowed only when the line break is semantic or an approved brand lockup, not a workaround for dynamic text;
[bridge-exception=overlay] [reason=...] may satisfy positioning intent only on the exact absolute overlay node;
[bridge-exception=manual-layout] [reason=...] on an exact GROUP or manual container documents a proposed deviation but does not suppress page/section/container/GROUP structural errors;
exceptions do not make a design better, they only make complexity explicit.

Identity restrictions

An identity must describe a logical element, not a width or device. The control width already belongs to the page/root frame through [bp=...].

Bad:

reviews [control=button-reviews-box-768] [action=modal:marketplaces-modal]

Good:

reviews [action=modal:marketplaces-modal]

For optional identity-bearing values such as [link=...], [control=...], [field=...], [modal=...], [state=...], [section=...], collection/item ids, and fallback [decor=...] / [asset=...] values, a suffix matching the current breakpoint, for example -768, -375, -mobile, or -desktop, is invalid.

Tags not written in Figma

For Figma designs, do not use:

[text=...]
[image=...]
[icon=...]
[container=...]
[layout=...]
[abs]
[component=...]
[to=...]

Rules:

a TEXT node gets identity from the layer name;
a content image gets identity from the layer name;
an icon gets identity from the layer name and/or component metadata;
page roots, frame-built sections, and multi-child content-flow containers use native Auto Layout in Figma;
GROUP nodes are allowed only inside opaque [asset] subtrees; primitives and leaf geometry remain exempt from owning Auto Layout;
positioning is authored in Figma;
component source, variants, and states come from UI Kit component metadata;
navigation destination is always [href=...], not [to=...].

Component ownership

Do not mark page instances with [component=...] when Figma already knows the source component. Component source, variants, and UI states belong to the UI Kit and should be extracted from Figma component metadata.

Page instance:

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

The UI Kit component source defines states: default, hover, focus, disabled, loading, error, and so on.

See Components and UI Kit.

Invalid examples

hero-title [text=hero-title]

Invalid for a Figma TEXT node: use the layer name hero-title.

content [container=content] [layout=stack]

Invalid for Figma structure: use a content frame and Auto Layout in Figma.

Group 91 [decor]

Invalid outside an asset subtree: [decor] does not turn a GROUP into a layout contract. Replace it with an Auto Layout frame, or use artwork [decor] [asset] when the whole visual is genuinely transferred as one opaque unit.

legacy-lockup [bridge-exception=manual-layout] [reason=vendor-master-art]

Valid exception syntax, but it does not make a non-asset GROUP pass structural validation. The blocking finding proceeds to the separate deviation-acceptance gate.

snow-bg [decor] [abs]

Invalid: decor is intent; positioning comes from Figma. Use snow-bg [decor] only on the exact visual node whose native positioning is absolute.

faq [to=anchor:contacts-faq] [href=/contacts#faq]

Invalid: two destinations. Use only [href=/contacts#faq].

unknown-link [href=#]

Invalid: # is not an unknown href placeholder. Use unknown-link [link].

Previous
Validator Next
Variation