智能布局可以说是Sketch的又一个大利器，某种程度上再次解放了设计师的劳动力，非常棒！

Sketch58 版本带来的变化，估计不少团队都在阵痛中吧？特别是维护设计规范的小伙伴，估计是痛苦并快乐着～哈哈 ;P

在没有自动布局功能之前，都是用Anima 插件的Padding 来实现组件基于内容的变化自动适应尺寸的，如下图 ↓

简单的效果演示，如下图 ↓

那本次的更新是不是显得特别鸡肋？多此一举？Anima 插件是不是就此放弃？额～

相信一些朋友都有不少疑问，本人尽量解疑，也会说明几个例子，实验一些场景，OK，废话不多说，开干～

1. 先初步了解一下Sketch“智能布局”功能及特性

其一，布局功能目前 只针对组件；

看起来还是比较简单的，如果具备一些Flexbox 之类的一些基础认知，对这些布局相关的内容应该很好理解。

其二，组件中的文件夹，具备布局功能设定；

其三，即使设置了智能布局，也可改变尺寸；

其四，组件中的子组件即使替换，也同样具备相应的布局设定；

其五，“调整尺寸”& “布局”互相影响，需要注意根据自己的需要进行配置；

其六，字体的“对齐方式”一定要和布局相应匹配，一般情况下，水平布局对应水平调整字符；

上面的按钮示例就是这样

看到这里，方便的朋友不妨自己先去尝试一下，方便更好吸收下面的内容～

2. 需要简单认知一下“结构”的重要性

相信到今天也还是有不少PS、AI设计UI的朋友，确实很无奈。

PS时代，为了让设计文件看起来更整洁，相关的模块会编成一组，相应的图层也会命名，但这更多的是为了工作上修正和查找的便利，实际对设计过程产生的效益并没有什么特别大的影响，所以相信还是有很多懒一点的设计师都不想去维护文件的结构和图层命名。

Sketch，如果不整理结构，那智能布局只是无稽之谈。

Chrome浏览器，右键“检查”，即可看到WEB中的常见布局结构，每一个需要进行封装的组件，包括页面的小模块，大模块，都是需要严谨布置结构的，不然页面的适配也无从说起；

这里要改变的一个思维模式，就是PS时代，设计的更多的还是“图片”，但在Sketch，更多的是高模拟的最终实现稿了，所以要非常注意命名，以及相应的模块结构划分。

3. 一些常规的例子

A. 基础元素-Button

这可以说是最基本的结构，由此出发熟悉智能布局的一些特性

B. 基础元素-Label(可删除)

希望大家保留一个小习惯，所有元素最好都设定合理的“调整尺寸”属性，在后续如果有复合组件情况，会产生一些帮助，当然，如果你的团队也使用Zeplin 作为协作工具，更是有必要了。

--------------------------------------------

插播一下问题解答：

本次的更新是不是显得特别鸡肋？多此一举？

如果你用Zeplin，就知道有很多我们使用插件完成的效果，是会错乱的，如下图 ↓

原因是Sketch的数据传输到Zeplin，并不包括插件变更的部分，详细的原理就不展开了，虽然简单和技术沟通也是没问题，但毕竟很不爽啊！

但，现在只要组件以Sketch 自带的智能布局实现，Zeplin 的显示就正常了。

是否鸡肋？其实还真的看情况而定，对有些人来说也许真没什么用～

Anima 插件是不是就此放弃？

请看下面的案例，你就明白，Anima 插件是不可能放弃的，而且，在后面一些复杂的结构中，也会更凸显Anima 插件的重要性，手动什么的是很讨厌的～

Anima 插件是什么？召唤 传送门

--------------------------------------------

C. 基础元素-Tooltips

D. 复合组件-评论

在较为复杂的组件结构中，大家一定要注意设定每个元素的“调整尺寸”属性

例如文案

设定后，正常 ↓

大家要记住一个点：“调整尺寸”属性设定，就是给Sketch 一个明确的Class属性。

E. 复杂结构-Tables

智能布局的功能并不复杂，只是其中有些问题大家需要了解，有一些问题，不妨看看是不是哪里出问题了，检查下“调整尺寸”或者 文案的“对齐方式”等。

总之新东西，都需要一个适应的过程，Sketch 确实不断在进步，加油～共勉～