设计交付方法论

无需会议也能看懂的设计。

DFC Bridge 帮你在设计中写清：这是哪个页面、哪些元素在不同宽度下是同一个、按钮要做什么。开发者不必猜测。

准备设计在 Figma 中检查

响应式home1440 · 375

动作contact-modalcontact-button

一个页面、两个响应式版本和一个关联模态框。

什么是 DFC Bridge？

DFC Bridge（Design Frontend Contract）是一套开源的界面设计交付方法论，让实现不依赖隐含假设。在 Figma 中，它将真实设计结构、稳定名称与明确记录的决定连接起来，涵盖响应式、动作、数据和状态。

无需插件也能使用这套方法。DFC Bridge Assistant 是可选的 Figma 助手，帮助标注并检查已支持的规则。它不会生成完整应用，对源设计的检查也不能代替对运行中界面的验证。

DFC Bridge Assistant 与检查方式 · GitHub 上的官方方法论 · MIT

一份设计 — 一套清晰结构

使用 DFC Bridge 后有什么不同

例如，两个宽度下的“联系”按钮都应打开同一个弹窗。相同名称帮助识别对应元素。方括号中的内容补充其含义：它们是图层名称中的标签，不是代码。

未使用 DFC Bridge

desktop
  frame-42
    heading
    button

mobile-final-2
  group-91
    title

名称描述外观，却没有说明关系和动作。

使用 DFC Bridge

home [page=home] [bp=1440] [view=default]
  hero [section=home-hero]
    hero-title
    contact-button [action=modal:contact-modal]
  contact-modal [modal=contact-modal]

home [page=home] [bp=375] [view=default]
  hero [section=home-hero]
    hero-title
    contact-button [action=modal:contact-modal]
  contact-modal [modal=contact-modal]

可以看出哪些设计属于同一页面，以及按钮应打开哪个弹窗。标签本身不会创建布局或可运行的行为。

如何开始