设计SketchUI交互设计

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

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

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

再次选中文字图层,按下 command + J 会发现按钮的尺寸发生了变化 改变文字的长度,可以看到文字已经超出了按钮形状的区域 选中文字,按下 command + J ,按钮尺寸再次自适应 UI设计的福音有没有!效率提升几倍,而且改变内容还可以保持精确的内边距 - end -
上一篇下一篇

猜你喜欢

热点阅读