首先，说说《原子设计理论》。在网上搜了一圈关于搭建UI组件库的文章，基本上百分之八十都会搬出这套理论。每篇文章都会告诉你，原子设计是什么，有多好，却很少有文章说怎样做才能达到高效的原子化。
原子设计不就是抽取最小的设计元素，然后对这些小元素进行拼合，形成一个个组件么？
没错，这是原子设计最基础的理论。根据这个我们搭建出了这样一个庞大的style guide。
但是，这套设计规范真的好用吗？怎样才能提高这套规范的利用效率，让它升级成一个设计系统呢？
1."设计系统"与"设计规范"
设计系统是什么？模块化，组件化，原子化 。当你改动任何一个原子，跟他相关的组件是会全部自动更新的，只有满足了这一点，才能够达到提升效率，解放生产力的目的，这也是原子设计理论被提出的初衷。
先来看一下，目前各大厂公开对外分享的设计系统。
ant-design 可以看出来，并不是所有的组件都通过 library 共享了样式。也许是通过其他方法实现同步的？
还有非常受前端欢迎的 element ，基本上对设计师提效没啥太多作用，只提供了一个style guide罢了
saleforce 大概80%的样式都是共享的，修改一个地方，基本上会同步更新到所有组件。
我认为一个灵活的设计系统需要做到
- 全局更新样式
- 调整整体尺寸不影响元件布局，以便在调整组件尺寸时不会乱
以上两点已经有比较多的文章说过怎样实现了，链接我放到末尾。
这里我说一下关于颜色覆盖的问题，目前基本上实现全局更新颜色的方法分为两种。
- 将颜色设置为symbol，然后通过mask覆盖到元件上。达到选取全局更换颜色的效果。
- 利用sketch自带的“共享图层样式“功能，实现全局更新颜色。
对比下这两种方法的优缺点吧：
Mask覆盖
通过mask的形式进行颜色覆盖，在遇到描边就会变得比较复杂。
通过symbol进行颜色覆盖后，会把整个蒙版都填充颜色，而不是只覆盖有效像素部分。
复杂一点的操作方法，可以通过裁切蒙版达到效果。
如果你的系统还涉及到圆角与直角，那就需要你重新再做一份圆角的～
另外通过symbol覆盖还需要注意，mask不能填充颜色，不然在遇到透明度的时候会出现颜色污染。( 当然你也可以直接隐藏 )
共享样式
如果是通过共享样式就会比较简单，并且不需要单独画一套直角与圆角。
不过因为不是继承symbol，所以维护起来会比较麻烦。
这里我的做法是，在组件全部完成之后，设置一个专门存放色板的地方，并且罗列出有哪些地方使用了这些颜色。然后在样式库一个个更新相关的颜色，这步操作就比较繁琐了。推荐用find and replace color 一键替换。
如何让设计系统更高效？
在体验了十多套组件库之后，我发现这些组件在实际调用中，还是挺不方便的。
比如拖出来一个按钮，默认的按钮只能够支撑固定字数。但往往字数长度是不固定的，这时就会这样。
所以我需要一个能够自动调整元件边距的工具，通过sketch官网的插件库，发现能够设置padding的插件大概有这几个：
compo 已经很久不更新了，而且功能太简陋，达不到“自动调整“的效果。
kitchen 的自动排版可以支持大部分功能，但是在包含icon之后就会极大概率的出现 bug ，虽然已经反馈了，但是迟迟没有结果～
paddy 牛的一批，完美解决问题，可是傲娇的作者已经不再继续更新插件了，我用的 sketch 55 版本已经无法运行
不过paddy的作者在git上推荐了anima toolkit这个工具，可以完美解决自动调整 padding 的问题。
anima toolkit 主要功能有
- Auto-Layout ( 自动布局 ) 免费
- High-Fidelity Prototypes ( 原型 ) 收费
- Collaborate ( 协作 ) 收费
制作动态组件只需要用到Auto-Layout的功能，后面两个也很强大，有需要朋友可以尝试一下，我就不赘述了。
下面会根据 Auto-Layout 的三个主要功能，结合实际案例帮助理解。
1.通过padding制作一个可以动态调整边距的按钮
最终效果：
建立一个文字层，如果已经有定义文本使用规范的话可以直接关联上去
点击anima-layout 下的padding，输入你想要设置的padding值，会自动生成一个组，并且新增一个background形状。
如果已经有定义颜色使用规范的话可以直接关联上去，然后创建symbol。就可以直接调用了，文本可以在右侧直接修改(sketch 56版本已经支持可以直接在元件上修改，更加方便)
同理可以制作出一个带图标的按钮
因为懒，我就直接在上一步的基础上做了。如果不需要图标可以直接选择none，然后就出来了一个纯文本的图标。
另外还可以使用padding制作toggle按钮，解决有的toggle带文本，有的不带文本的问题
效果如下：
过程就不写了，跟制作按钮是同样的道理。这里需要注意一下文本的对齐方式，圆圈在文字的哪边，文本就往哪边对齐。因为stack ( 往下翻，会运用到 ) 和padding结合使用的时候，会出现一些奇怪的问题，所以我这里并没有给圆圈跟文字设置stack(固定间距)。如果设置了固定间距就不用管这个问题～
2.通过stack结合padding 制作一个可以动态排版的tab切换
跟制作按钮一样，设置一个自动调整padding的小方块。因为tab切换是有选中和未选中两种状态的，所以在这里需要弄两层文字并且重叠在一起。
然后复制几个tab元件，点击anima中的stack，可以自动排列每个元件之间的间距。
创建为symbol之后就可以直接调用啦
PS.这里可以看出这种方法比较蛋疼的地方，只是五个tab，右侧的信息列表已经非常的长了。希望以后sketch能够对symbol的信息管理进一步优化吧～
3.通过pins功能 制作带下划线的tab
延续上面的思路，画出两个文字图层和一个小短线，把小短线设置为symbol。
之所以设置为symbol是为了在外部选择是否显示小短线的时候可以直接选择none；当然也可以想上面的tabbar一样，通过设置小短线的样式来达到效果：选中时填充颜色，不选中时填充透明，结果是一样的。
选中小短线，打开pins功能版，使小短线永远距离左侧和右侧为0，这么做是为了让小短线的长度永远等于文本的宽度。这样一个tab元件就完成了。
复制几个，stack打包设置好间距。转化为symbol，完成！
如果想要把小短线设置成比文本短一些，只需要把pins左右的数值设置一下就好了。
目前想要直接通过偏移量来设置比文本长的下划线，会产生bug，不推荐。
思考：
在使用 anima 制作动态组件时，一直在思考从使用者 ( 懒癌设计师 ) 的角度出发，怎样才能通过设计系统来提升工作效率？
比如现在需要添加一个带搜索图标的搜索框，以 ant-design 为例，我需要从组件库中找到input，然后从组建分离，接着放入搜索的图标，把图标放到input里面，同时还要去查看一下图标的间距是不是正确的。特意记了一下时间，像我这种手残星人花了73s。
为了解决这种低效问题 ( 其实是因为自己懒得找 ) ，结合平时自己的操作场景和使用习惯，我将所有以 input 框为主体的组件进行归类。包括：文本框、时间选择框、日期选择框、搜索框、下拉选择框、登录界面常用的密码输入框 ( 就是有小眼睛的那个 ) 、以及项目中常用的几个特殊输入框。再加上图标显示位置：前、后、前+后、无图标。再加上输入框状态：正常、hover、disable、报错、提醒。
按照最大化组件的方式，做了一个包含图标、文字、状态的input框，朴素的它长这样：
但是从这个 original 框到将它变成一个搜索框，只用了 15s。
同样的，我还把各种形式的tab、按钮、气泡弹窗、radio、checkbox、面包屑全都做成了动态组件甚至是可通过一个original组件简单几步快速变化得到的symbol。
最后
在利用 sketch 做组件时，最好用 sketch 本来就提供的功能来解决问题。除非是像自动调整边距这种无法解决的问题，再考虑用插件。因为本身sketch版本迭代就挺频繁的，插件不一定跟更上，有可能会导致非常严重的后果。( 我就是因为 sketch 版本升级之后 paddy 完全失效，导致重新来过 ) 希望 sketch 能多看看人家 Axure ~
关于如何通过 sketch 搭建组件库：
Sketch 进阶教程！利用Symbol 建立一套设计规范组件库？www.uisdc.com
最最后，悄悄放一个我做好的demo。想要个赞也是不容易
https://pan.baidu.com/s/1mz910IKdshaYfbOad44Rdwpan.baidu.com提取码: 78ru
8034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
