在Figma中轻松构建和支撑表格的教程

2,399 阅读7分钟

表格是设计师在日常设计生活中必须处理的最痛苦的组件之一。表格元素通常是文本组件、线条、矩形、图标等的复杂组合。它很快就可能成为工作的噩梦,尤其是当你还想支持不同的屏幕分辨率,改变列的顺序,以及使用真实的内容时。

在我的项目中,大约有一半的用户界面设计是表格。这就是为什么在这篇文章中,我想分享我在 Figma 中以更简单、更精简的方式管理表格的方法。

我不喜欢冗长的阅读和太多不必要的细节,所以我将马上 "跳 "入这个主题。我的指南由几个部分组成;因此,当您了解到目前所学的内容已经涵盖了您目前的需求时,您可以在任何时候停止阅读,而当您想复习记忆或了解更复杂的工作流程时,您可以返回/或跳到任何部分。我们走吧

注意: 这篇文章针对的是有一些使用Figma Design经验的人。如果您是 Figma 领域的绝对初学者,我建议首先查看一些基本的 Figma 教程。为了让您更方便,在文章的最后(检查Figma 设计文件部分),我提供了我的 Figma 设计,您可以用它来解构和学习。

单元格和表格结构

我经常在我的项目中使用Ant Design System。让我们以他们的表格组件为例。

首先,我们只需要在Figma中制作两个简单的组件:

  • 一个标题单元。
  • 一个行单元。

使用LeftCenter ,在Constraints ,将文本对齐。

关于键盘快捷键:

Ctrl/Cmd - Win/Mac
Alt/Option - Win/Mac
Shift - Win和Mac

Figma是一个可以在Windows和Mac上使用的工具。例如,下面的键盘快捷键组合Ctrl/Cmd + D意味着,"在Windows上按Ctrl + D,或在Mac上按Cmd + D"。

然后我们需要为我们未来的表格复制这些组件。

  • 按住Alt/Option + Shift + 鼠标左键进行复制
  • 并按住Ctrl/Cmd + D重复Figma中的最后一个动作。

如何创建表格线条?从这里开始:

  • 按住Alt/Option + Shift + 鼠标左键进行复制。
  • 并按住 Ctrl/Cmd+ D 在 Figma 中重复上次的操作。

我是怎么做的?以下是步骤:

  1. 将表格中的行元素分组为一个框架。
  2. 设置角的半径为15px
  3. 设置轮廓描边为1px,#49E36B
  4. 设置框架的填充颜色为#278EEE

为了帮助你更好地想象它是如何工作的,这里有一个我做的快速插图。

框架是用来给行与行之间的表格线条和表格描边(外面的表格边界)着色的。而你需要添加 "裁剪框架内容 "和 "角落半径 "来塑造表格。

如果你添加了 "自动布局",就会像这样工作。

结果,你会得到这样的行为。按住Shift键,双击突出显示,然后调整列的大小。

对于固定尺寸的单元格,我们在水平方向上应用Fixed

对于响应式单元格,我们需要在水平方向上设置Fill

然后我们把这个表格变成一个Frame ,在Frame 里面的每一行都应该把水平Constraints 设置为Left and right

瞧,我们现在已经完全响应了!

套件的结构

  • 我们在表格中使用的图标。
  • 基本的页眉状态。
  • 基本单元格状态。

图标

使用任何图标库,你可以有几百个图标。结果是,这可能会把你推向不一致(例如,对相同的目标使用不同的图标),特别是当你的团队中有不止一个设计师时。表图标作为一个单独的库,将帮助你管理和支持大项目的一致性。

组合

我们有几个主要的组合:

  • 单元格中只有文本。
  • 一个单元格中只有一个图标或一组图标。
  • 各种文本、图标和其他对象(复选框、切换、动作、选择,等等)在一个单元格中以不同的顺序排列。

避免隐藏图层!你会知道你在建立设计系统时使用了它们,而你以后肯定会忘记它们。此外,将要使用你的设计系统的人可能根本不知道这些隐藏的层。

根据上面的插图 (构建一个基本的表格套件),你会对如何创建它们有一个概念,但我将为初级设计师指定一些更复杂的组件。

而我们在第二个组件的例子中使用Auto layout ,参数如下。

那么,还记得我们只用两个组件构建的表格吗?现在是时候更新它了!

此外,您还可以使用 "Figma Properties "来使它变得紧凑。所有的说明你都可以在以下Figma团队在Figma配置2022期间制作的教程视频中找到:"跳入组件属性"。

这只是我在本文中构造基本表格套件的一个例子。你可以使用类似的工作流程,或者创建你自己的工作流程。在我的项目中,套件要复杂得多,所以我把这个选择权留给你。

Figma 设计文件

我准备了一个 Figma 设计文件这可能有助于你完成我的教程中的一些步骤。如果你有问题或需要帮助,请在文章末尾的评论区发表你的问题。

总结

我在 Figma 中处理表格的方式并不像黑与白那样。这种方法主要取决于您所设计的产品,当然,也有几种可能的方法可以实现同样的目标。

下面是我从自己的实践中可以提出的几个一般性建议:

  • 在设计系统一侧保留线条组件提供了一个从一个地方为整个项目更新表格的机会。但每次你想进行更新时,你都需要在设计系统层面上发布修改。
  • 如果你在不同的文件中保留任务,不要忘记将该文件与设计系统断开。这将有助于避免不受控制的更新,你会错过。
  • 起初,使用可调整大小的组件似乎太诱人了......直到你需要开始支持各种大小的不同风格。如果你有行高不同的表格,最好为每个表格创建单独的组件。
  • 有一种方法是包括使用尽可能少的组件。但大多数时候,你并不看你的组件--相反,你使用 "变体 "在它们之间切换。因此,有足够多的独立组件和 "变体",比使用隐藏层、"自动布局 "选项和其他组件内的组件要,因为这些组件以后很难管理。
  • 检查所有表格单元格是否至少支持两行文字。你可以使用16px 的行距来实现这一点。
  • 我建议使用父组件的最小宽度(每列的最小宽度)。但这些默认的最小尺寸必须与前端开发人员讨论,因为他们有时可能有自己的限制。因此,你需要确保设计中的一切都可以在后期的开发阶段实现。
  • 在你的设计系统中为表格创建一个调色板,这样你就能从一个地方控制所有的颜色。当然,你可以使用调色板中的共享颜色,但一旦你需要改变表格中的文字颜色、背景或其他东西,你就会陷入困境。
  • 为表格创建不同的文本样式。例如,我们在表格中使用的行距要比在新闻提要或文章中小。有独立的文本设置将帮助你避免未来的冲突。

谢谢你跟随我的脚步!正如我已经说过的,表格是一个复杂的组件,我可以谈论这个话题好几天。但也许最好到此为止,给你一个机会自己尝试一下这种方法。然后,如果你有问题,我很乐意回答和帮助你或者我可以再写一篇文章。"在 Figma 中使用表格:专业水平" ;-)