如何在Figma中创建复杂数据表格- Svitla Systems - Medium
创建电子表格的想法始于1979年的哈佛大学。工程师丹尼尔·布里克林和他的朋友罗伯特·弗兰克斯顿正在使用分类账进行经济计算。他们共同开发了第一个电子表格程序。它允许用户更改任何单元格，并自动重新计算整个表格。借助这个软件，20小时的工作可以在15分钟内完成。
数据表的结构 #
数据表的结构非常简单。行和列使文件更易于扫描，并且每个单元格可以被分割。行按照对应列的顺序具有相同数量的单元格。数据表的最突出示例是 当然，Microsoft Excel和Google Sheets。数据表可以分为三个主要部分和三个附加部分：
主要部分
- 标题行包含列的标题；
- 数据行将组成数据对象的有序数据单元格组合在一起；
- 数据单元格是表格中显示实际数据的最小组件。
附加部分
- 页脚通常用于总结、汇总和聚合相应列的信息；
- 分页可以分为页面；
- 数据表可以包含按钮、菜单、图标等交互组件，以及徽章或标签等非交互元素；其他用于操作数据的工具包括过滤器、排序功能等。
在Figma中基于CSS构建数据表
如果你是开发人员，你可以将数据表的设计与HTML和CSS集成。如果你是在Figma中工作的设计师，你可以使用CSS属性做同样的事情。让我们来看看主要属性，并讨论一下 ## 边距
单元格边距用于控制单元格边框与内容之间的间距；我使用8像素格栅，因此将padding-left设置为16像素，其他所有边距设置为8像素。
对齐方式 #
如果您在进行从右到左（RTL）的语言脚本的用户界面（UI）设计时，您需要镜像布局并使用RTL方向；除此之外，请使用从左到右（LTR）的文本对齐方式。标题应与相应列中的内容以相同方向对齐。如果将数字进行加法运算，请将数值数据右对齐。图标和徽章应居中对齐。
边框和分隔线 #
边框是指水平分隔线的属性。它在数据表中将每个表格行分割开来。虽然边框可以用于划分数据，但并非必需。空白区域经常被用来代替边框，以避免设计过于压迫。这完全取决于数据的饱和度。 以下是数据表中的Markdown，并删除一级标题：
状态 #
当光标悬停、点击或选择元素/单元格/行/列区域时，悬停、焦点和活动状态会改变背景和/或图标颜色。您可以通过在Figma的变体中添加一些状态来轻松设置数据表的不同部分的高亮显示。
响应式表格的方法 #
如果列在水平方向上被压缩，表格就会表现出响应性。这通常在单元格内容很少的情况下使用。如果内容和确切的列宽度很重要，解决方案将是使用水平滚动。对于小屏幕，应该减少和折叠行和列的数量。我将使用谷歌联系人表格的浏览器版本（“舒适视图”）并在Figma中复制它。列将被压缩和响应。此外，我还将添加默认和悬停状态，添加添加更多列的可能性，并即时更改屏幕大小。要更改内容，我将创建尽可能多的 自定义数据表格单元格
在示例中，表格有六列。行数可以任意设置。悬停状态会显示更多的图标，并将头像替换为复选框和拖动图标。
我需要创建以下内容：
- 一个足够长的文本的表头单元格组件，该组件将与列的内容相链接；
- 一个带有图标的表头单元格组件（第6列）；
- 一个带有头像占位符和姓名的表格单元格；
- 一个足够长的文本的表格单元格，该单元格会根据列标题进行响应；
- 一个带有标签的表格单元格；
- 一行的默认状态；
- 一行的悬停状态。
为了更改和更新组件中的元素，我将在本地文件中创建一个小型库。对于头像，我将创建具有不同照片的变体。对于标签，将有朋友、同事和家人等变体。
包含不同电子邮件地址、电话号码等内容的内容可以根据需要添加。 首先，创建一个标题单元格并给它加框。然后，将自动布局应用于它，属性设置为固定：宽度为420像素，高度为48像素。标题应居中，左边距设置为16像素。如果您想要分隔标题行，可以使用效果。我应用了内阴影，属性为：X坐标为0像素，Y坐标为-1像素，没有模糊，颜色为黑色的5%。这会给出一个漂亮的分隔线。
接下来，让我们复制现有组件，将其分离并创建一个带有“dots-vertical”图标的新组件。它应该对齐到右边。内边距应设置为8像素。
现在，让我们继续添加另外两个组件！我要构建一个包含头像、标签和之前创建的内容单元格的单元格。最快的方法是复制主要组件，将其分离，并使用实际数据更新它。然后创建一个新的组件！属性应设置为宽度420像素和高度 56像素。最后一个组件将与第一个组件完全相同，唯一的区别是字体颜色不同；在这种情况下，它将更加深色。对于悬停状态，图标将替换文本。我建议使用Iconify插件。大部分材料设计图标都放在那里。此外，你还可以找到一堆其他适合你口味的图标。
现在剩下的就是将单元格分组成行。我将把单元格放到一个新的组件中，然后将其命名为Header。不要忘记检查单元格的调整大小设置。将单元格设置为填充容器，以使行完全响应。
在示例中，你可能已经注意到第一列的宽度最大，最后一列的宽度最小。为了实现这种效果，我将第一列的宽度设置为624像素大小-固定。我使用了Hug contents来包裹图标容器的最后一列。我还添加了默认和悬停状态。
更新和更改数据表组件中的元素 #
要更改内容，我 在这里，我将使用我之前创建的本地组件库。首先，我将在Header和Content之间进行选择。然后，我将更新特定人员的头像、电子邮件地址、电话号码、职位和标签。
为了实现自适应效果，我将把所有的行组件设置为填充容器。主数据表组件的宽度应设置为固定。结果应该是这样的。
现在，如果我想要一个数据表在列内是灵活的怎么办？例如，我想要使用6列，并在某些情况下切换到4或3列。为了做到这一点，我将使用数据表组件作为基础创建3个更多的变体。
现在，让我们看看它是如何工作的。
结论 #
截至今天，数据表仍然是显示大量数据的最佳选择之一。因此，数据表可能会变得混乱且难以理解的大块信息。网格和水平线、斑马纹、字体和背景对比、适当的填充和列对齐是必要的。 ent可以帮助解决可读性差的问题，提高感知度并将设计提升到更高的水平。如果你对在Figma中使用自动布局和变体创建设计感兴趣，请查看我们的之前的文章 (opens new window)。