Sketch 動態響應按鈕的實現

原文發表於 Medium 2017年2月23日

原文鏈接： 《 Overrides and Dynamic Buttons in Sketch 》

作者：Taylor Palmer

本文由 shengbanx 翻譯整理，原文版權歸屬原作者所有。關注「伴星流形」（ID：designforward）公眾號，獲取優質設計內容推送。

在 Sketch 中，雖然 Overrides 功能出現後，支持製作的組件內部替換相同大小的 Symbol，實現替換 UI 狀態的功能，如切換不同按鈕狀態。但是「動態按鈕」一直很難實現，也就是可根據不同文字調整寬度的按鈕。

雖然可以使用一些插件如 Dynamic Buttons 和 Modulizer 實現類似的動態按鈕功能，但是都只在頁面畫板中，還未發現可以做成 Symbol 組件的類似功能出現。

直到 Auto Layout 插件的出現，有幸發現了實現動態按鈕的方法，雖然有些麻煩，而且適用性也比較局限。但在真正動態按鈕出現之前，不妨嘗試這種辦法。（希望 Sketch 能儘早推出此功能）

當然前提是先安裝 Auto Layout 插件（一個不錯的響應式布局工具，推薦使用 Sketchpacks 安裝插件）。

接下來具體步驟：

1. 將按鈕分成3塊。中間文本圖層組中先設定一個最小字數的文字，將會基於文本長度自適應寬度，左右兩塊矩形包裹在兩邊組成按鈕。

2.選擇所有圖層，通過 Auto Layout 創建為一個 Stack 組（圖層組圖標會變為藍色），組間距（Spacing）設為0。

3. 選擇文本圖層組中的矩形塊，Pin（固定）上下左右。

4. 選中文本圖層，Pin設置為 水平居中 和 垂直居中。同時，設置 Resizing 為 Float in place。

5. 將這個 Stack 組創建為一個 Symbol，並在 Symbol 里設置 Artboard 寬度為你的按鈕在頁面中可能的最大寬度。

6. 最後將Stack組 Pin 為垂直居中或者 Pin 左對齊、居中對齊 或者 右對齊。便可以實現動態按鈕功能了。

這麼做的好處是可以在設計中提高效率，動態按鈕支持樣式替換（overrides）以及文本替換，同時寬度自適應。實現類似前端的動態響應按鈕。

示例 Sketch 文件 下載。