Figma入门教程20-用自动布局和组件布尔属性制作自适应表格

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

本教程主要使用到自动布局和以及组件的布尔属性

*以下内容中单选框命名应为复选框

制作元素组件

首先考虑好表格要展示的内容:比如复选框、文本、头像+文本、标签、评分、图标等常见的元素

将这些元素先制作成组件或变体组件

如下:

我们分别制作了复选框、更多图标、文本、头像+文本、标签、评分的变体组件

制作表格元组件

将子组件拉入画布中

选中所有子组件shift+a添加自动布局,填充白色,选择垂直左居中,添加16px的间距,并调整好组件之间的顺序

最后添加为组件,命名为元组件

选中元组件中的子组件添加布尔值:

在这个案例中,我们总共添加6个布尔值

将元组件垂直方向改为固定高度

制作表格

将元组件拉入画布,第一个单元格只显示单选框,复制单元格并添加垂直方向的自动布局——这就是1列。

将第一个单元格背景色修改一下制作表头。

Figma入门教程20-元组件布尔值

复制列,修改显示的布尔值内容,表头为加粗的单元格文本

选中两列再次添加自动布局

表格内容已经制作好了。

调整为填充容器

现在我们有一个外层的自动布局-嵌套两列自动布局-单元格元组件

选中嵌套的列将横向和纵向均调整为填充容器

再选中列中的单元格元组件(表头高度除外,表头为固定高度),将横向和纵向均改为填充容器,如果宽度不想拉伸的,比如单选框的单元格可选择为适应内容。

Figma入门教程20-更改为填充容器

这样自适应就制作好了。

添加表格其他列

我们已经完成了基本元素的搭建,只需要复制列更改显示的单元格布尔值和一些文字内容即可。

添加表格其他行

确定好每列要展示的内容后,就可以直接复制单元格了,每行复制相同数量的单元格就可以完成自适应表格的制作了。

点击上方前往查看→查看视频教程


源文件地址:

https://www.figma.com/community/file/1174967495029077270

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作