跳转到内容

复杂情况与边界案例

真实设计超出简单示例时,请在本页找到对应情况,将决定写入源设计或契约,并为相关阶段附上验证证据。“自动检查”列描述可采用的检查方法,不代表当前 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。各目标平台用自己的原生机制实现同一能力配置。安全、隐私、无障碍和必要任务的完成优先于媒体视觉精度。

稳健设计不是没有例外,而是每个例外都有名称、理由和可验证的证据。

放大后滚动查看细节。按 Esc 关闭。