设计稿检查

设计稿检查可以发现设计稿中不符合转码规范的图层,如没有使用 Semi 组件、实例没有标记等问题,解决问题后可以获得更加可用的代码产物。
如果你不了解设计稿规则,可以查看 设计稿规范

开始检查

在「设计转代码」 Tab,点击开始转码检查设计稿。

查看检查

检查包括 info、warning 和 error 类型。
一般来说,只需要关心 error 和 warning 类型,info 是提示信息。
一个🌰,下图展示的检查结果中,有 10 个 Semi 组件以及 1 个图片节点 info,有 1 个没有标记的实例节点 warning。

检查详情

点击检查卡片进入检查详情页面,点击「定位节点」找到定位到对应节点。
如果有修复操作,会在问题详情页展示出来。

重新检查

如果需要重新检查,点击选择新的图层后,点击开始转码。

继续转码

确认没有问题后,点击「检查完毕并转码」进行下一步,转译设计稿。

默认支持的检查

检查名检查描述检查类型建议
tableInvalidTable 中包含无法识别的内容error使用 Semi Table 组件,查看 Table 文档
instanceNoMark该节点为实例节点,无法识别为 Semi 组件warning使用 Semi 最新 UI Kit,替换该节点或进行自定义标记
semiComponent该节点是合法的 Semi 组件或 Semi Iconinfo
customMark该节点经过了自定义标记info
image该节点转代码后会转译为 imginfo查看 哪些情况会转成图片
autoWrapper该节点会被创建父级节点info查看 如何自动分组

自定义检查插件

通过自定义检查插件实现自定义提示。插件暂未开放此能力,敬请期待。

插件类型定义

编写一个检查插件

以图片检查插件为例。

自定义插件的打包

建议将插件打包为 UMD 格式。

在插件中使用

TODO

© 2021 - 2023 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题