设计规则

DFC Bridge 只补充 Figma 没有保存的含义。文件本身仍然是布局、尺寸、样式、层级和组件数据的唯一来源。

从外向内阅读嵌套框：hero 包含文字组、动作组和插图；文字与控件分别属于有意义的父级。这是结构示意，不是宽度对比，也不是 Figma 截图。 查看原图。

图解入门说明这些决策为什么对团队重要。

1. 不要重复 Figma

不要把尺寸、间距、颜色、布局方向或组件变体写进图层名称和标签。只有在回答产品问题时才添加标签：这是哪个页面、元素会做什么，或需要导出什么。

2. 建立清晰结构

使用画框和组件表达真实关系。每个容器都应有实际作用：组织内容、控制布局、裁剪、提供背景或创建交互区域。

主要内容流应使用 Figma 的原生布局。GROUP 不是内容容器，只能在确实作为一个整体视觉资源交付的 [asset] 子树中使用。“不透明”是指不重建内部组合，也不将其内部按内容布局检查。哪些容器应保留，见容器规则。

3. 一个根图层对应一个上下文

页面根图层说明一个页面、状态和准备好的宽度：

home [page=home] [bp=1440] [view=default]

其他宽度使用相同的 [page] 和 [view]。原生 Figma Section 可以组织画布，但不能替代页面根图层，也不会自动添加页面含义。

4. 区分内容、装饰和导出

• 可编辑的文本、数据和图片属于内容；
• [decor] 标记具体的装饰图层，而不是包围它的内容容器；
• [asset] 表示整个视觉作为一个资源交付。

不要为了保持构图而把可编辑文本变成图片。

5. 把溢出当作设计决定

文本和数据应能承受真实值、本地化和中间宽度。如果内容会裁剪、滚动、截断或改变高度，应展示或记录预期行为。参见高度与溢出。

6. 保持组件可编辑

使用正确库中的组件。实例可以拥有页面专属内容和动作，但不要为了让文件看起来完整而解除关联或隐藏旧版本。

7. 不绑定具体平台

DFC Bridge 描述含义、关系和限制，不要求特定前端框架。实现细节放入结构化契约或实现记录。

交付就绪

当其他人无需询问作者就能找到页面、宽度、重要关系、动作、内容规则和待解决问题时，设计就可以交付。