Sketch外掛 ,如何製作符合任何裝置寬度的動態按鈕

經常使用Sketch的UI設計師應該發現，當要調整上下左右邊距、字數多寡、置中...等等問題時，還是有點小麻煩。有些Sketch的外掛你可能試過，但外掛何其多，例如：Dynamic Buttons、Modulizer、Anima... 等，透過外掛來節省修改時間；上述三種外掛在使用中，前兩者的使用起來還是有點不便；唯獨Anima在功能上有比較便利、直覺式的使用介面；若不用外掛，想在直接在symbol中先做好定位也可以，只是寬度上可能會比較受限。

熟悉CSS的人一定了解，基本的按鈕制定，是先將按鈕切成左中右三塊，分別是文字到左右最外側邊界的距離，中間則是文字區塊的寬度，這也就是Sketch動態按鈕的原理。

這邊介紹如何使用sketch plugin：Anima來製作動態按鈕。了解原理之後，也能輕易的在Sketch編排畫面中，輕鬆的排出有RWD畫面的網頁、以及任何適用於手機寬度的版型。

首先，先安裝Anima (link: https://animaapp.github.io/)，下載完畢後只要double click就能輕鬆安裝。

接著將要製作的按鈕樣式分成三等分，分別是左右區塊、中間文字區塊及文字，並將中間文字及背景區塊群組起來。(如下圖)

點選文字欄位的中間背景區塊:background。將它們Pin於上下左右。(如下圖)

註：這裡使用的Pin功能不會隨著畫板的去定位，而是將物件定位在它目前群組的位置上。

選取文字，將文字Pin於上下左右置中的位置。(如下圖)

接著將左右邊的按鈕樣式的邊界區塊選取，然後在右側的Resize中選取Fix Size。讓左右邊的區塊在縮放時可以固定高度與寬度。(如下圖)

選取所有的圖層後點選Anima面板中的Stack，將它們Stack在一起。你會看到左側的圖層的群組資料夾跟其他資料略有不同。(如下圖)

將整個Stack Group選取起來，並建立一個新的Symbol，這樣你的動態按鈕就完成了。

以下是透過Anima做的排版，在畫板寬度的變化中，裡面的元素也都能隨著變化，是不是很方便呢？