Sketch杂谈 - 效率上天! Dynamic button插
2017-01-13 本文已影响1456人
D2开源组
插件项目地址
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再次选中文字图层,按下 command + J 会发现按钮的尺寸发生了变化 改变文字的长度,可以看到文字已经超出了按钮形状的区域 选中文字,按下 command + J ,按钮尺寸再次自适应 UI设计的福音有没有!效率提升几倍,而且改变内容还可以保持精确的内边距 - end -20:20代表padding属性,如果你了解一些CSS知识,这个属性你会很容易接受。
在CSS属性中,padding: 10px 20px; 代表这个元素的上下方向的内边距是10像素,左右边距是20像素,这里的20:20也是这个含义