最近一位小伙伴遇到个Sketch问题，作为UI设计师的你肯定也会遇到，而且牵扯到Sketch一个神奇功能。

这个问题来自于四月份推出的Sketch课程，自己也从中总结了很多经验。

问题描述

具体问题是这样的，下面是一个常见的日期选择控件，我们都会把它整体作为一个symbol组件，以便统一调用。

日期symbol内部的结构主要分为左边的文字和右边的图标。

为了让日期组件在不同的页面环境下适应不同的宽度需求，我们一般会使用Sketch的智能缩放功能来对内部元素进行整理：让文字左侧固定，图标右侧固定。

左侧文字定位设置

右侧图标定位设置

这样设置好后，不管我们怎么拉伸，永远是两边固定，实现弹性组件的需求。

但是这位同学遇到了一个怪现象，拉伸后，图标没有固定在右侧，而是紧紧跟着文字。

这是什么原因呢？明明左右元素都已经固定好了，难道Sketch的智能缩放失效了吗？

其实什么问题都没有，而是我们无意间触发了Sketch的一个神奇功能，没有官方叫法，我把这个称作：文本右侧内容自动跟随。

Sketch的特殊机制

Sketch的这个特殊机制，简单描述就是：在symbol组件内部，文本的右侧元素始终和文字保持固定间距。

利用这个特点，我们能做出很多省时省力的效果。除了刚才的右侧固定跟随图标之外，还可以多个文字跟随，适用于导航标签的制作。

以上两个例子中，文字都是左对齐，如果是居中对齐，还可以做文字+图标整体居中的效果，

解决问题

我们回到刚开始的问题，为什么日期symbol中右侧图标没有固定？

原因就是右侧图标触发了Sketch 文本右侧内容自动跟随机制，而且这个机制的优先级是大于智能缩放的。

另外在上述机制中，只有文字和右侧内容间距≤20才可以触发，大于20就不起作用了。

如上图所示，文字和图标间距为18，这样便会触发机制自动跟随文字，而且优先级要大于已经设置好的智能缩放。

所以我们只需要把日期symbol中的文字和图标间距变大就可以解决问题，在页面中调用，需要多大的宽度再进行设置即可。

总结

利用这个机制，我们可以不借助第三方插件做很多弹性化的组件，解决很多棘手问题，大大提升设计效率，真正为设计赋能。

所以说，设计师面对的任何问题都需要从实际工作中来，解决之后再成为推动项目向前迭代的动力。

软件下载：http://www.macfans.org/thread-32122-1-1.html

[ypbtn]http://www.macfans.org/thread-32122-1-1.html[/ypbtn]