Sketch画表格的详细说明
在没有了解本片文章之前，用sketch画表格，真的是要很扎心。
本文章中的内容是个人在工作中的经验，并沿用至今，不一定是最优的方法，欢迎同行讨论。
----------------直接杀入主题----------------
以下是某原型图的某片段(举例说明)
如果你是ps玩家，单纯用ps画表格，那工作量是相当大的； 如果你是sketch玩家，单纯用sketch画表格，似乎也轻松不到哪里去。
我 也很 好奇，sketch公司为什么一直没有做能生成表格并任意修改表格各种样式的功能
当然，sketch有百家插件支持着他，到目前为止，能在sketch中稍微部署，就能快速生成表格的插件是 “Kitchen”。
那我们先用该插件来试验：
1.安装并打开kitchen插件中的组件功能。
2.按照原型图上的内容部署好，并生成表格。
最终生成的表格，边框，背景，颜色，对齐方式等等都已经定死了样式，每一列的宽度也不够灵活，比如 性别这一列，只会有一个字，宽度可以适当缩小。
当然，kitchen给出了 自行调整的功能，你可以在部署的时候拖动表格边框，来大概调整列宽
最终得到的结果似乎也不太理想：
---------------------------用sketch自身功能老老实实做表格，做出的表格灵活性更高---------------
从原型图和设计师自己的经验来看，有以下设计注意点
字体颜色有灰色，黑色，蓝色，关于金额的 内容一般还会用红色字体
文案的对齐方式有居中对齐，左对齐
文案后面可能会跟着图标，并且图标会随文案的字数个数增多而后移。
解决问题：
1 建立单元格，尺寸随意，因为我们会用到sketch的 Resizing功能，今后单元格尺寸都可以任意变化的。
2 对单元格中的各个对象建立组件
3 把整个单元格也建立组件
4 回到Sym文档中，可以看到 一个单元格是有三个嵌套关系组成，根据前面提到的，我们把单元格文案复制多个出来，各自设置各自的样式，并命名区分。
5 这里要注意的是，如果按照上图的命名方式，最终在设计稿里插入sym对象的时候，sketch会以以下方式列举给你以供选择。
6 回到sym文档，在命名的时候 以 "/ " 隔断相同前缀不同后缀。 这样一来，你在使用过程中就更方便管理选择。
7 回到画布中插入制作好的单元格，并 灵活 调整 好 每一列的宽度。
8 利用override为每一项写入不同文案，为了方便管理，对每一项命名。
9 可以将一类对象放置在一个文件里以方便管理
10 插入单元格制作表体
在职位那一列，我们是希望 文案能左对齐的，所以我们 要修改sym文档里的 黑色文案对齐方式。
为了方便管理，我们从“单元格文案/黑” 复制一个出来，将其文案对齐方式设置为左对齐。
然后将两个黑色文案命名好区分开来。
然后在画布插入的sym里选择黑色文案左对齐的即可
同理可得：薪资那一列的红色文案，也一定是预先设置好左对齐的。
11 编辑图标会跟随文案个数而右移的，所以将 编辑图标 方式在 文案对象中。
！注意，别放在单元格对象中！
！注意，如图设置好该图标的Resizing属性！ (关于Resizing属性的介绍请查看我的其他文章)
12 再回到画布，你就已经看到了你想要的结果。
13 这个操作图标可能是会变化的，所以将其组件化
14 复制一个出来，并画其他的所要用到的图标，然后命名好以区分
15 同样的方式，对灰色文案 也做这样的组合，然后再到画布里选择 一下表达方式，你就得到了想要的结果。
16 接下来，我们将“单元格背景” 复制几个出来，命名好名，你完全可以依照自己的爱好命名，在形状上做不同的调整，如图
17 到画布中，把表格的宽度稍微缩小一些，这样看起来，不会表格直接挨着屏幕左右而显示 很生硬。
18 找到左上角，左下角，右上角，右下角四个单元格，然后在右侧去 选择不同的背景形状
最终使得表格看起来更加不会生硬
最后提一下，也许会碰到一个单元格占两行高度，实际上你只有注意在部署单元格样式的时候，设置好 Y轴上的 Resizing属性即可。
有了以上思路，你还可以针对表格背景做出不同的样式。
------------总结--------------
用sketch自带的 组件嵌套，及Resizing功能，制作出来的表格 比起 Kitchen 来说，更加灵活，方便修改文案，方便做各种样式，方便各种布局。
传一个粗糙的源文件 供大家剖析。
如果你知道更加牛逼的表格制作插件，或者画表格的方法，欢迎留言。
