用Sketch做界面設計也有些年頭了，一開始無情的工具人全程手動加復制粘貼，至于速度么，全看手速了。后來學會了一些偷懶的技巧，才真正開始工業化生產頁面，其中一項就是Sketch自帶的 Symbol 功能，不過我翻了翻，好像也沒有專門介紹的，今天就總結一下我使用Symbol的一些經驗分享給胖友們。

封裝

1. 封裝

Symbol類似于PS的智能對象，可以實現全局樣式的修改，提高作圖和改圖速度也就在于這點，我就不做過多介紹了。那怎么能用好Symbol，構建好高效且靈活的Symbol就是門學問了。

封裝即創建Symbol的操作不多做介紹，右鍵下拉菜單和工具欄里都可以實現，需要注意的是，封裝時候默認講選中的內容以最大邊界為準重新建立畫板，會發送到「控件」頁面。

而如果選中畫板創建Symbol，則會在當前頁面直接生成，不會發送到控件頁面。這種情況應用較少，通常我個人在調整運營圖的時候會使用，在當前頁面同時預覽一個運營圖在各個尺寸設備下，或者不同狀態下的展示情況。

2. 命名和分組

這個命名并不是給大家講什么命名規則，完全可以按照自己的習慣來起名字，也不限制于中文或英文，這里要介紹一下Symbol命名的分組方法。

我們看其他Symbol庫里面有目錄結構，這個目錄讓我們使用起來非常方便，那又是怎么分類的呢？

很簡單，在創建Symbol的時候把名字起好就OK啦，命名時用 「/」 把層級劃分開，就可以實現Symbol的目錄結構構建。當然也可以修改，進入控件頁面修改畫板名稱就可以了。

3. 神奇縮放（尺寸/位置）

封裝Symbol的時候通常會建立組，神奇縮放對于Symbol縮放/變形時，里面各個元素的相對位置變化起著關鍵作用。否則一縮放，里面的內容可能就會變形跑偏。下面介紹幾種實際構建中常用縮放方式。

靠左（右）邊固定

頁面或組件伸縮時需要其中元素靠左邊距離固定，要配合橫向或橫向&縱向固定尺寸來使用。這樣就可以實現中間內容寬度隨頁面拉伸（一般不涉及高度變化），左側內容固定不變，靠右固定同理。這個在我們做響應式布局的時候比較常用，比如標題欄的伸縮，可以做到標題文字和關閉按鈕分別居兩端固定，寬度隨內容調整。

靠兩邊固定

針對沿4個角相對位置固定，橫縱均會拉伸的情況，常見不同尺寸設備適配調整的輸出。

根據情況選擇其中相鄰兩個邊靠邊固定，然后同時固定橫向和縱向尺寸，即可實現。

靠四邊固定

頁面或組件伸縮時需要內容的邊距固定，鎖定4個邊即可完成。

嵌套及修改

1. 嵌套

嵌套好理解，就是老千層餅了，一層一層封裝Symbol就可以實現嵌套。學問在什么時候用嵌套，如何嵌套，為什么要搞嵌套呢？

建立Symbol是為了方便批量復制和修改，那嵌套Symbol則是為了展示多種可能出現的情況，盡量真實的模擬上線效果，為設計上下游同事提供更多相關信息。下圖展示了同一頁面利用Symbol呈現復雜情況的優勢。

2. 內容替換（Data）

那想要實現上面的效果需要如何操作呢？

我們需要找到素材庫，sketch默認有一些素材庫，也可以網上鏈接一些圖庫資源作為素材庫。當然大多數情況是滿足不了我們日常項目的，針對項目情況可以自己建立素材庫（就是建個文件夾，扔一堆圖片進去）。

打開sketch首選項，選擇素材，添加素材庫，把之前的設置好的圖片文件夾導入進去，就能看見自己配置的素材庫了。

為了方便調用，建議直接導入最高層級的文件夾，這樣所有子文件夾的內容也會以目錄的形式一并導入。

圖片替換

我們要在Symbol里需要替換圖片處新建圖片的顯示區域（一個矩形），然后填充設定為圖片。注意圖源尺寸是否規整，下面的「輸入」尺寸需要對應選擇，不規則尺寸一般選擇「適應」。完成這一步就完成了準備工作，后面我們就可以批量生產我們的組件了。

然后需要進行差異化修改，點過填充框內的圖標是紫色時，我們可以批量選中需要改變內容的Symbol，點擊刷新素材，會隨機往里填充不同的圖片，就形成了多樣化的圖片卡片。

文本替換

文本建立和替換與圖片原理相同，只不過需要構建的是一個文本文檔，每條文本回車換行。在Symbol里即可替換文本框內容，這里再不贅述了。

3. 建立和替換樣式

建立樣式

樣式建立方便我們替換按鈕等組件的狀態變化，樣式替換可以理解為一種成本較小的Symbol替換。常用于按鈕，標簽的狀態切換，這種情況下我們不需要建立多狀態Symbol來進行切換，用樣式來做更方便快速。一般是基于填充色、描邊色、描邊粗細以及陰影這幾種屬性變化的情況來使用，尤其是多個屬性同時變化的情況，樣式替換的便捷性就尤為明顯。

屬性和分類

樣式主要分為圖形樣式和文本樣式，圖形樣式主要屬性如上所述：填充、描邊、描邊粗細以及陰影；文本樣式主要屬性：顏色，字體，字號。文本顏色替換常和按鈕標簽等元件的狀態配合使用，常見于按鈕反色，或者可用狀態切換。

字號字體的變化可能會影響柵格布局，所以界面設計一般不涉及。

命名和管理

命名規則和 Symbol 一樣，用「/」劃分開即可區分層級關系。

管理可以通過直接修改屬性然后更新完成，也可以在樣式列表里進行增加、刪除、分組和更新等操作。

切圖與管理

1. 切圖

每一個封裝好的Symbol其實都是一個單獨的畫板，那切圖我們就可以通過給畫板制作導出項的功能來做到「無痕」切圖，也方便控制切圖的尺寸，對于不規則icon，或者需要留出邊距的情況極為方便。

已經添加導出項的Symbol在使用時，不會在頁面里出現切圖框的虛線，所以也就不會影響整體畫面的預覽，而且不會影響Relay、lanhu等工具對切圖的識別，下圖可以看到對比的效果。

2. 插件

這里只介紹一下Quark插件，Quark為我們提供了實際項目中常用的模擬數據（商品圖、商品名稱、收貨地址等），但是這個自動填充數據的功能和Symbol的內容替換不兼容，所以我個人通常是結合來使用，即Symbol和組結合。

按鈕、標簽等一般會封裝成Symbol，商品圖和文字內容一般則會直接設定好矩形框和文本框，調整的時候直接利用插件填充圖片和文字，按鈕標簽類的內容根據項目情況，分別對應展示。

3. 復用管理

Symbol的確定通常與設計規范綁定，在產品迭代過程中，通過Symbol來承接不僅能節省做圖時間，更重要的是能保證規范組件樣式一致。這也是我認為做Symbol「最重要」的意義。

實際工作中產品版本迭代一般不能放在一個sketch文件里，如果都放在一起會導致運行速度極慢，電腦容易卡死。那統一產品不同版本的功能迭代想要快速準確完成該如何做呢？我一般會在第一版本完成時，輸出一部分組件的設計規范，把標準組件封裝成Symbol，在下一版本設計稿中直接引用之前做好的規范組件庫，這樣就可以直接拖拽修改，大大節省出圖時間，也能保證規范統一。

以上是本地Symbol庫復用的方法，我們也可以利用Quark平臺來進行共享，這樣在交接和協作的時候就能很大程度避免誤差并提高效率了。

結語

這些是我近兩年工作總結的內容，可能不會特別全面，但都是我實際工作中能用到的。Symbol 學習起來不麻煩，不過要設計好Symbol確實要花心思和精力，不過我認為在項目長期維護的過程中這些工作是有必要和意義的，長遠來看確實也更方便，畢竟總得有人種樹才有涼可乘嘛。

希望今天分享的內容能給小伙伴們啟發和幫助。有問題或指教可以在評論區和我互動，如果感覺有用可以分享給更多人see see。

歡迎關注「JellyDesign」的小程序：

更多Sketch技巧：