figma模版_使用单单元格方法在figma中构建响应表

figma模版

Tables are often harder to prototype than to code, but taking a single cell design strategy can make them responsive and maintainable. What’s more, all you need are Components, duplication and Auto-Layout techniques. I’ve experimented with a few ways and this method seems to have the best trade-offs. I’ll give you the whirlwind tour of the core visual styles of tables, how to build the single cell design, and the reasons why I opted for this as my preferred method of prototyping tables in Figma.

表通常比原型更难原型设计，但是采用单个单元格设计策略可以使表具有响应能力和可维护性。 而且，您所需要的只是组件，复制和自动布局技术。 我已经尝试了几种方法，这种方法似乎具有最佳的权衡。 我将向您介绍表格的核心视觉样式，如何构建单单元格设计以及为什么选择此作为我在Figma中制作表格原型的首选方法的原因。

桌子的视觉风格 (Visual styles of tables)

There are a few different visual styles that are floating around on the internet today. Most tables you see are variations of one of these three.

今天，互联网上漂浮着几种不同的视觉风格。 您看到的大多数表都是这三个表之一的变体。

经典桌 (Classic table)

A simple table with a 1px, black border and basic padding keeping the content readable. 一个简单的表格，带有1px，黑色边框和基本填充，使内容可读。

This is the table you learn about in high school IT— humble and versatile to get your point across. With some minor tweaks to the vanilla HTML of good table design you can get an easily readable table. If you don’t know about how tables are created in code I recommend you read up on the w3schools documentation.

这是您在高中IT中学习的表格-谦虚而多才多艺，可以阐明您的观点。 对好的表设计的原始HTML进行一些细微的调整，就可以得到易于阅读的表。 如果您不知道如何用代码创建表，建议您阅读w3schools文档。

条纹桌 (Striped tables)

Alternative shading of rows lets the data stand out, yet still has a clear distinction between each line. 行的其他阴影使数据脱颖而出，但每行之间仍然有明显的区别。

Used in places like Apple’s Pages application, these are an eye catching alternative that let the data stand out. Again, w3schools is a fantastic resource to learn more about them.

在Apple的Pages应用程序之类的地方使用，这些是引人注目的替代方案，可让数据脱颖而出。 同样， w3schools是一个很好的资源，可让他们更多地了解它们。

“排行”表 (‘Lined’ tables)