插件項(xiàng)目地址
https://github.com/ddwht/sketch-dynamic-button
先從一個按鈕說起
我想要這樣的一個按鈕
首先今缚，我用Photoshop畫了一個：
恩算柳，沒毛病
之后，我想這個按鈕叫“Button”不太合適姓言，就像管小孩叫小紅小王似的...改個名吧
...打聲招呼
然后出于我的強(qiáng)迫癥原因瞬项，我又重新調(diào)節(jié)按形狀的尺寸，并把它居中
關(guān)鍵是何荚，我沒有辦法精確設(shè)置按鈕的padding囱淋，而且這個問題在我更改了按鈕內(nèi)的文字后更為嚴(yán)重，我沒有辦法保持和之前設(shè)計(jì)中一樣的padding餐塘，除非畫額外的輔助線绎橘。
坑爹啊
別忘了今天的主角是誰！
打開sketch唠倦，隨手就是一個button称鳞，輕松自在！
還是改個字：
Hi~
上動圖稠鼻，看看過程多么簡單：
作為一個多年的PS黨冈止，當(dāng)我第一次使用Dynamic button的時候，我是啞口無言的...
好候齿，下面我們正式認(rèn)識一下這個插件 - Dynamic button
官方的使用說明
從頭來一遍：
首先按T熙暴，創(chuàng)建一個字符圖層
然后選中這個圖層，按一下 command + J 慌盯，可以看到創(chuàng)建了一個按鈕
文字圖層被重命名為20:20周霉，我們改為5:20
20:20代表padding屬性，如果你了解一些CSS知識亚皂，這個屬性你會很容易接受俱箱。
在CSS屬性中，padding: 10px 20px; 代表這個元素的上下方向的內(nèi)邊距是10像素灭必，左右邊距是20像素狞谱，這里的20:20也是這個含義
再次選中文字圖層乃摹，按下 command + J 會發(fā)現(xiàn)按鈕的尺寸發(fā)生了變化
改變文字的長度，可以看到文字已經(jīng)超出了按鈕形狀的區(qū)域
選中文字跟衅，按下 command + J 孵睬，按鈕尺寸再次自適應(yīng)
UI設(shè)計(jì)的福音有沒有！效率提升幾倍伶跷，而且改變內(nèi)容還可以保持精確的內(nèi)邊距
- end -
