真实设计超出简单示例时,请在本页找到对应情况,将决定写入源设计或契约,并为相关阶段附上验证证据。“自动检查”列描述可采用的检查方法,不代表当前 Figma 插件已实现全部检查;实际边界见覆盖范围。
- 阻塞项 — 当前范围无法通过相应阶段;继续交付会迫使接收者猜测。
- 警告 — 可以继续评估,但存在风险或依赖目标平台的决策。
- 人工审查 — 工具能提示可疑情况,但需要人确认意图。
人工审查是检查方式,不是严重等级;它可能发现阻塞项,也可能确认设计是有意为之。
| 情况 |
风险 |
DFC Bridge 处理方式 |
自动检查 |
| 同一逻辑元素在不同断点使用不同标识 |
适配器创建重复元素,而不是同一元素的响应式布局。 |
保持稳定图层名或所需的 DFC Bridge 标识标签。 |
比较同组断点。 |
| 同一标识指向不同逻辑类型 |
按钮变成文本,图片变成卡片。 |
保持逻辑类型;不同实体应单独建模。 |
按标识比较类型。 |
| 多张卡片复用同一唯一标识 |
无法区分实例。 |
使用 product-card-oak-chair 等稳定样本名称;[item=product] 可以重复。运行时记录使用产品键,不使用列表位置。 |
检查设计实例的重复标识。 |
| 实例覆盖改变了组件内容 |
源组件与页面内容不一致。 |
以实例最终解析出的内容为准,并报告覆盖。 |
提取组件元数据。 |
| 当前版本藏在隐藏图层中 |
可能取错文案或状态。 |
将替代内容声明为状态、变体或存档。 |
检查带标识的隐藏层。 |
| 情况 |
风险 |
DFC Bridge 处理方式 |
自动检查 |
| 移动文案改变产品含义 |
不同设备得到不同承诺。 |
各宽度保持相同内容;语言、实验和产品变体单独建模。 |
按标识比较文本。 |
| 不同断点的元素数量变化 |
无法区分删除、隐藏、复制或产品变体。 |
保持逻辑数量;真实变化应定义集合规则、状态、变体或完整结构映射。 |
比较标识数量。 |
| 同一元素换了父级 |
组件拓扑、状态归属、ARIA 关系或分析事件可能失效。 |
保持父子关系;确需改变时声明结构转换。 |
按标识比较父级。 |
| 应隐藏的元素直接被删除 |
无法区分不可见与遗漏。 |
保留标识和父级,并说明该断点的可见性。 |
标识覆盖和可见性比较。 |
| 移动专用副本代替原元素 |
动作、状态和文案可能分叉。 |
保持同一标识,改变可见性、顺序或布局,而非复制逻辑实体。 |
重复角色或内容的启发式检查。 |
| 关键元素在移动端消失 |
主操作、价格、法律说明或错误信息丢失。 |
保留元素,或定义可达的等效入口;不得静默删除必要内容。 |
标识覆盖检查。 |
| 桌面网格变成移动轮播 |
增加了状态、动作和控件。 |
在 bridge.responsive 中声明转换、项目映射、控件、状态转移及无障碍替代方案;不要发明图层标签。 |
标识与角色变化的启发式检查。 |
| 顺序无说明地变化 |
视觉顺序可能与阅读或焦点顺序冲突。 |
声明排序策略,保留语义顺序。 |
比较同级顺序。 |
| 只准备精确宽度 |
中间宽度没有确定行为。 |
先定义宽度锚点,再定义范围和流式规则。 |
检查声明的断点集合。 |
| 忽略安全区域和系统界面 |
刘海、浏览器栏或固定导航遮挡内容。 |
说明安全边距及粘性、固定定位行为。 |
人工或适配器检查。 |
| 情况 |
风险 |
DFC Bridge 处理方式 |
自动检查 |
| 页面根或可编辑区块根没有 Auto Layout |
内容关系只剩坐标快照。 |
即使零个或一个子项也要启用;真正整体交付、无内容流的 [asset] 区块除外。 |
layout.page-root-missing-auto-layout / layout.section-missing-auto-layout。 |
页面根携带 [asset] |
整个活页面被错误地视为整体资源。 |
移除该标记,继续检查后代;根缺少 Auto Layout 时另行报告。 |
layout.page-root-cannot-be-asset。 |
| 普通容器有两个以上可见且有意义的流内子项,却没有 Auto Layout |
方向、间距、换行和尺寸无法确定复现。 |
启用 Auto Layout;图元和叶子几何对象不受此要求约束。 |
layout.container-missing-auto-layout。 |
| 资源边界外存在 Figma GROUP |
GROUP 保留几何位置,却没有可交付的布局关系。 |
替换为 Auto Layout 框架或组件;只有真实整体资源才能使用 [asset]。手工布局例外及原因不消除错误。 |
layout.group-outside-asset。 |
| 页面根位于原生 Figma SECTION 中 |
只查页面直接子项会漏掉有效根。 |
仅将原生 SECTION 作为透明的画布组织层;实际根仍是带标签的 Auto Layout 框架。不要用外层 FRAME/GROUP 替代 SECTION。 |
Page Check 根发现;合法边界不会产生错误。 |
| 包装层过深且无职责 |
结构复杂却不表达含义。 |
只保留分组、布局、裁剪、背景、语义或交互所需的层;不要发明包装层标签。 |
单子项或深层容器启发式检查。 |
| 固定高度裁剪真实内容 |
本地化或 CMS 内容破坏布局。 |
使用内容驱动尺寸、最小高度或明确的溢出规则。 |
固定高度文本和卡片检查。 |
| 脱离内容流的元素被当作普通内容 |
无法随内容流适应。 |
放回 Auto Layout,或在具体绝对定位节点上声明装饰、资源、目标或带原因的叠层意图。 |
layout.positioned-without-intent。 |
用 [decor] 标记自由摆放的容器 |
标记掩盖结构缺陷。 |
只标记具体装饰层;复杂整体装饰使用 [decor] [asset]。 |
仍执行布局规则;装饰不是豁免。 |
| 层重叠没有说明 |
不同平台可能出现不同叠放结果。 |
说明叠层、装饰、资源、目标或重叠原因。 |
边界框重叠启发式检查。 |
| 父级意外裁剪子级 |
提示、焦点环、文字或装饰丢失。 |
声明溢出处理。 |
裁剪和子级溢出检查。 |
| 负间距或约束与 Auto Layout 冲突 |
布局意图无法可靠复现。 |
优先用设计令牌和间距;特殊情况明确记录。 |
几何与布局元数据检查。 |
| 粘性或固定元素遮挡内容 |
页头、提示栏或侧栏盖住区块。 |
说明定位行为并预留空间。 |
人工或适配器检查。 |
| 情况 |
风险 |
DFC Bridge 处理方式 |
自动检查 |
| CMS 返回数量变化 |
三卡布局遇到两张或七张就失效。 |
定义最少、最多、空和加载状态。 |
集合元数据检查。 |
| 本地化使文本变长 |
文本超出英文布局。 |
使用内容驱动或最小高度,并验证文本扩展。 |
文本框风险启发式检查。 |
| 依靠手动换行排版 |
CMS 和翻译文本未带换行时布局失效。 |
按文本区域宽度换行;语义或品牌例外必须明确。 |
手动换行启发式检查。 |
| 价格或法律文本随断点变化 |
产品事实和合规信息不一致。 |
将其作为严格内容按标识比较。 |
严格文本比较。 |
| 富文本被压成普通字符串 |
链接、列表和强调丢失。 |
声明富文本结构。 |
文本节点元数据检查。 |
| 缺少空、错误或加载状态 |
无法实现真实使用场景。 |
声明动态区块需要的状态。 |
状态覆盖检查。 |
| 情况 |
风险 |
DFC Bridge 处理方式 |
自动检查 |
| 按钮没有动作 |
不知道点击结果。 |
已知动作使用 [action=...];未知时用草稿 [control]。导航用 [href=...],未知导航用 [link]。 |
检查可点击元素是否缺少动作。 |
| 模态目标不存在 |
无法构建完整流程。 |
action=modal:x 需要 [modal=x]。 |
交互图检查。 |
| 未定义模态关闭方式 |
用户可能无法退出。 |
定义关闭控件、点击遮罩和 Escape 行为。 |
模态结构检查。 |
| 表单字段没有标签 |
无障碍语义和数据映射不完整。 |
定义标签、名称、验证和提交目标。 |
字段检查。 |
| 标签页、折叠面板或轮播只有默认状态 |
无法复现交互。 |
声明所需状态及默认、当前状态。 |
状态组检查。 |
| 外部链接打开方式未知 |
隐藏了安全和体验决策。 |
声明 URL,必要时说明新标签页策略。 |
动作语法检查。 |
| 缺少悬停、焦点、禁用或加载状态 |
只展示理想状态。 |
根据组件角色定义必需状态。 |
组件状态覆盖检查。 |
| 情况 |
风险 |
DFC Bridge 处理方式 |
自动检查 |
| 文本栅格化为图片 |
无法翻译、索引和编辑。 |
保留原生文本,或说明整体导出原因。 |
图中文字启发式或人工检查。 |
| 图片未定义焦点 |
响应式裁剪切掉人脸或商品。 |
定义焦点或裁剪策略。 |
资源元数据检查。 |
| 图标只是无说明的图片 |
颜色、主题和令牌难以应用。 |
声明图标角色和主题策略。 |
资源类型检查。 |
| 视频或 Lottie 没有替代内容 |
目标平台可能不支持。 |
定义海报帧、替代内容、自动播放和控件。 |
媒体元数据检查。 |
| 混合模式或滤镜不受支持 |
目标平台显示不同。 |
记录例外或作为整体资源导出。 |
适配器能力检查。 |
| 情况 |
风险 |
DFC Bridge 处理方式 |
自动检查 |
| 颜色和间距随意设置 |
实现偏离设计系统。 |
优先使用设计令牌,并记录例外。 |
令牌覆盖检查。 |
| 暗色主题不完整 |
内容消失或对比不足。 |
声明主题覆盖范围。 |
主题覆盖检查。 |
| 组件变体缺失 |
开发阶段需要猜测按钮或卡片状态。 |
定义必需的变体和状态。 |
组件变体检查。 |
| 触控区域太小 |
移动端难以操作。 |
遵守平台及产品规定的最小尺寸。 |
几何检查。 |
| 对比度存在风险 |
内容可能无法辨认。 |
按阈值检查;复杂图像需人工审查。 |
对比度检查。 |
- 隐藏的旧移动框架与最终版本同名。
- 三个按钮复用同一模态框,但文案只适用于其中一个区块。
- 粘性页头遮住跳转后的锚点。
- Cookie 横幅、聊天控件或促销栏改变可用视口高度。
- 只有表单错误状态,没有默认状态。
- 轮播有箭头,却没有定义幻灯片。
- 重要内容只在动画中出现。
- 视觉上像按钮的图层叫
Rectangle 44,没有动作。
- 桌面使用真实卡片,移动端却使用卡片截图。
- 桌面与移动端的货币、价格或法律声明不同。
| 情况 |
风险 |
DFC Bridge 处理方式 |
负责人或检查 |
| 大图片或视频未定义交付策略 |
视觉看似一致,带宽、内存和加载却恶化。 |
说明固有尺寸、格式、质量、裁剪安全区、海报帧、优先级和懒加载策略。 |
设计定义必要媒体,实现方负责预算和测量。 |
| 数据展示只按样本数量设计 |
数据量变大后卡顿或无法使用。 |
定义预期及最大数量,以及分页、流式加载或虚拟化阈值。 |
数据与实现测试。 |
| 体验假定高速网络和充足电量 |
离线、低带宽、节省流量或省电模式下无法完成任务。 |
能力配置声明必要结果、降级状态、缓存、队列和替代行为。 |
目标环境 QA。 |
| 平台缺少定位、动画、编解码器、输入或图表能力 |
适配器静默丢失含义。 |
记录支持程度及语义等效方案;未知项须有负责人和阻塞状态。 |
适配器能力检查。 |
| 预算只有模糊愿望 |
无法验证。 |
指明指标、上限、环境、测量点和实现负责人。 |
发布证据。 |
DFC Bridge 不限于 Web。各目标平台用自己的原生机制实现同一能力配置。安全、隐私、无障碍和必要任务的完成优先于媒体视觉精度。
稳健设计不是没有例外,而是每个例外都有名称、理由和可验证的证据。