本文档介绍设计师、项目经理如何使用 Semi Figma 插件快捷创建表格、更新表格。
遵循下面的使用方式可以让设计稿中的 Table 具有转代码能力。
插入表格到画布
- 方式一：从 Assets 中拖拽 Table
- 方式二：使用
cmd + /命令唤起 Semi 插件，选中生成表格，回车后表格会快速插入到画布上。
温馨提示
社区版此功能受限，请使用你已发布的设计组件库，采用方式一拖拽表格组件到画布上。
切换表格变体
通过切换变体选择不同尺寸、带边框的表格。
新增列
Step1. 选中表格图层，右键解绑。
Step2. 选中任意 TableColumn，复制粘贴。
更新表格内容
小提示
Semi 提供了「拓展单元格」功能帮助快速更新表格内容。
Step1. 解绑 TableColumn 后，更新每一列的第一个 TD。
Step2. 其他列如果也需要更新，重复上述操作。TD 是否是解绑状态都可以，如果 swap TD，需要保留 TD 图层名。
Step3. 打开插件，运行「拓展单元格」，插件会自动将每列第一个单元格的内容拓展到其余行
实现原理
「拓展单元格」将第一个单元格作为基础，复制到其他行，减少手动复制成本。
自定义表格
如果你需要在不解绑 TableColumn 的情况下更新表格内容，可以自定义表格列 TableColumn 或自定义单元格 TD。
然后通过 swap 功能将默认的 TableColumn 或 TD 替换为自定义组件。
自定义 TableColumn
- Step1. 复制 Semi Variants TableColumn，粘贴到自己的组件库或空白文件
- Step2. 添加新的 TableColumn 变体，或根据 TableColumn 结构从 0 到 1 创建组件集
如果你是从 0 到 1 创建 TableColumn 组件集的，建议将 TableColumn 的一个变体作为模板开始拓展。
拓展时，将 TH 和 TD swap 为自己维护的 TD 和 TH。
- Step3. 发布组件，将 TableColumn 发布以便使用
注意
TableColumn 应该保留原来的变体属性，如 Size、Align、fixedToLeft、fixedToRight、rowSelect。这些变体属性在 D2C 时会识别为 Table.Column 组件的 props。
使用 TableColumn 组件
在构建 Table 组件或使用默认 Table 组件时，选中 TableColumn，swap 为自己维护的 TableColumn 组件。
Table 使用规范
设计师请留意，使用默认 TableColumn 和自定义 TableColumn 需要遵循下图中的限制。
为什么有这些限制？
D2C 需要根据相关的信息找到需要识别的内容。例如识别单元格需要知道单元格在哪，因此 TableColumn、TH、TD 的名字不能修改。