分享个小工具，有点怀疑有没有必要写这个，所以拖拖拉拉很久，碰巧这工具有了重大的更新，终于还是写出来了，纯粹自己瞎鼓捣。如果你有更好的方法或方向，欢迎指正。如果对你有帮助，写文不容易支持一下吧。
下面视频是演示接下来能get到的技能，插件我会放在附件里，安装一次以后直接在sketch更新就好。我把做好的组件放在源文件里供大家参考，接受能力较强的甚至可以忽略文章看源文件就好了。
如果出现布局错误请重启一遍Sketch。
软件：Sketch 5.25
插件：Anima Toolkit 2.4.9
不论是个人还是团队，在界面设计中，总会提炼组件，包括图标、按钮、控件等。一套完整的软件界面，页面中很多组件是高度复用的。所以组件在设计侧意义不仅是提高效率，也能很好的规范了界面的一致性。还有上线后也存在迭代过程中的修改，如果不是Sketch的symbol系统，设计的修改怕是要比开发都辛苦不少，重复劳动·真搬砖。
在搭建组件库的过程中，找到了好玩的东西，很大的提升Sketch组件可用性。完全用Symbol的设置项实现动态响应布局，同时支持拉伸被动响应，支持多层嵌套，大多数的组件都可以制作~
并非全部都能做成动态symbol，还是有很多技术限制的，不过已经完成度很高了。
//教程相对进阶，但有必要的地方尽量详细。没必要的地方，比如标注可能是不完整的~
什么是
动态响应
，不是很严谨的概念，但为了简化暂且用这个词。一般来说，移动端的UI设计都是自适应的，因为要去适配各种机型。当然Sketch在迭代过程中也为我们准备了这个功能，也就是Resizing，但这种响应是被动的。看名字就明白，Resizing是拉伸后仍适应指定的布局规则，是被动的。
这个功能其实足以让人兴奋，做的界面居然能随着拉伸适应布局，在PS时代想都不敢想。
那
动态响应
呢？是随着元素内容改变，主动调整响应布局。所谓的动态响应几乎都是针对文本的，文字字数变化对布局的影响，当然也不全是。其实这个功能Sketch本身也有，举下面这个例子就明白了。如果你没发现，可以马上试试，但是效果仅限如此。
新建一个文字画两个矩形(文本不能使固定宽度)，矩形分别作为图标和背景，背景要比文字和图标加起来都宽，像下面这个图一样。全选生成symbol，神奇的事要来了，在symbol设置项里，修改文本，你会看到图标位置也变了，两者间距保持不变。
这种平铺的布局，多排些东西，或者把图标换成文字，效果都是有的。甚至右对齐也可以，这种效果只有在symbol里才能看到。可是，不是所有布局都这么简单，不过这个功能也常被用到。
* 自适应的动态组件
动态(主动)和被动响应都是需要的。
所以我也要安利这个插件了？不不不，如果不用嵌套Symbol，Paddy确实能做很多事，但组件需要嵌套symbol。嵌套后，Paddy的很多功能将失效。而且Paddy的可视化不够，即使是beta版也是。
Beta版Paddy会升级symbol的功能，支持嵌套，但和接下来的插件有致命冲突，不可混用。
所以Paddy可以直接放弃，接下来的神器包含Paddy所有功能，并且更强大。即使你非要等paddy升级完善，思路也是一致的，不防了解下。
话说搭建组件后，大家是怎么用的呢。很多时候是直接修改里面Symbol（Library是先解除链接修改）。为什么？因为某些布局不会随内容变化，导致不可用，必须手动修改。当然，在做组件的时候可以避免这个问题，绕开动态布局。但我希望工具能尽可能的还原设计，减少被工具约束，减少为了做组件而刻意绕开的布局。
看名字就是知道这是一套工具包，包含Auto-Layout、Launchpad和Timeline，后面两个是建站和交互动画的工具，不在今天讨论的范畴。
主角是
Auto-Layout
，自动布局。诶~ 这个很眼熟哦，早在sketch还没有Resizing的功能时，这个插件出现了，当时蛮有名气，但sketch自带了这个功能后，就被遗忘了。不安装插件就有的功能，干嘛要安装插件呢。
废话了这么多，来认识一下Anima Auto-Layout，以下简称AL。先介绍功能，然后演示实际案例。
其实收起状态已经露出了大部分的功能，所以真的很简单，当然一般是在展开使用的。
就是固定间距的功能，让边锁定在一个位置。也是Sketch Resizing的主要功能，AL或许更方便，但效果其实差别不大，区别在于AL更偏主动响应，Resizing更适合被动自适应。有些时候还是要用Resizing的，互补，如果可以优先用Resizing。
百分比感觉很牛逼是不是，其实自带的resizing也支持百分比，默认状态下也就是不设置pin的时候。内部元素拉伸是按照比例来的，只不过不止间距，宽高也按比例拉伸了。
定位功能基于父级容器的，简单的说就是上一级的组或Symbol，边界和百分比的基数也是。当指定了数值后，布局会自动发生变化。之后也可以移动，数值也会自动实时发生变化（这和Resizing一样）。需要时可以设置为百分比，记得切换。
注：Sketch的默认情况下子层的宽高是固定比例的，所以会随着父级拉伸而被拉伸。要定位元素需要先锁定宽高。
功能5：自动填充padding
这个功能更新也就近几个月的事，修复到可用实在2.4.2版本上，也就11月，新鲜出炉。为了解决无法和Paddy兼容，AL自己做了这个功能。当然，支持嵌套symbol。
没有这个功能时，做填充也是可以的，但是比较麻烦，效果也有局限。
说白了，这个功能就是操控组内最底子层形状的宽高，从而组的宽高也发生变化。
padding的嵌套目前也是有局限性的，相比而言完成度是最高的，具体在后面实例中说。
标签栏是App中最常见的了，样式类型比较多，并非所有都需要动态响应。
看下这几类tab，类型2是MD的样式，用的很多，Rezizing就可以完成。演示类型3的做法，其他也都做好放在源文件里了。
说下类型四，如果这种组件也能做成动态symbol，那么….没什么控件是不能做的了，涉及太多变量计算，短时间内也不太可能实现，乖乖使用普通图层吧，摊手~
