Sketch杂谈 - 效率上天！ Dynamic button插件

插件项目地址

https://github.com/ddwht/sketch-dynamic-button

先从一个按钮说起

我想要这样的一个按钮

首先，我用Photoshop画了一个：

恩，没毛病

之后，我想这个按钮叫“Button”不太合适，就像管小孩叫小红小王似的...改个名吧

...打声招呼

然后出于我的强迫症原因，我又重新调节按形状的尺寸，并把它居中

关键是，我没有办法精确设置按钮的padding，而且这个问题在我更改了按钮内的文字后更为严重，我没有办法保持和之前设计中一样的padding，除非画额外的辅助线。

坑爹啊

别忘了今天的主角是谁！

打开sketch，随手就是一个button，轻松自在！

还是改个字：

Hi~

上动图，看看过程多么简单：

作为一个多年的PS党，当我第一次使用Dynamic button的时候，我是哑口无言的...

好，下面我们正式认识一下这个插件 - Dynamic button

官方的使用说明

从头来一遍：

首先按T，创建一个字符图层

然后选中这个图层，按一下 command + J ，可以看到创建了一个按钮

文字图层被重命名为20:20，我们改为5:20

20:20代表padding属性，如果你了解一些CSS知识，这个属性你会很容易接受。

在CSS属性中，padding: 10px 20px; 代表这个元素的上下方向的内边距是10像素，左右边距是20像素，这里的20:20也是这个含义

再次选中文字图层，按下 command + J 会发现按钮的尺寸发生了变化

改变文字的长度，可以看到文字已经超出了按钮形状的区域

选中文字，按下 command + J ，按钮尺寸再次自适应

UI设计的福音有没有！效率提升几倍，而且改变内容还可以保持精确的内边距

- end -