「教程乾貨」- 這是一個夠你玩半年的 Sketch 教程 嵌套 Symbol 的高級玩法

隨著 Sketch 39 41 兩次重大的版本更新，我們可以充分利用 Symbol 嵌套功能製作和維護一套通用性高的自定義組件。如下圖所示：

坦白講，這套組件的製作並沒有什麼黑科技。它只是一組嵌套的 Symbol，精心編排後 Sketch 的 Inspector 面板條理有序，使用起來也像設置 QQ 空間一樣輕鬆。

讓我們來分析下這個 Symbol

這是我使用在聊天面板中的列表項。我想在照片和名稱的基礎上，增加新消息提示的徽章，以及是否正在輸入的提示（這是一個組合，所以我可以根據需要打開/關閉它們）。

圖層：

Photo（照片）

我將默認和有圖狀態的兩個 Symbol 命名為 Avatar/Default（默認） 和 Avatar/Image（有圖） ，這樣看起來十分清晰。因為這兩個 Symbol 尺寸相同，所以你能夠在 Inspector 下拉列表中輕鬆切換。

名稱層的使用方法不是常見的改變文本樣式，看起來有些奇葩，但使用起來卻異常強大。我在 Sketch 中創建了所有文本樣式的 Symbol，以便我可以在 Symbol 內部更改顏色。當然，花了點兒時間，但一勞永逸：

我將該 Symbol 中的實際文本層命名為「???Content」，雖然看上去有些浮誇吧，但確實方便我知道是在這裡輸入實際文本。

另外，這全都是同一個 Symbol，所以如果我編輯基板，都有相關組件都能被更新：

Badge（徽章）

這個徽章是另一個 Symbol，也包含了一些有趣的設置，讓我們來看一下：

徽章 Symbol 中的「Container」圖層參考了上面的圓角容器 Symbol 的命名。 每個容器都有一個States（狀態） Symbol（所以我可以修改徽章的狀態）...

...一個顏色 Symbol（所以我可以修改顏色）...

請注意，我的狀態 Symbol 和顏色 Symbol 的寬度不同，這是為了讓 Inspecto 面板中下拉列表中只出現相對應的選項（因為嵌套下拉中只會出現相同尺寸的 Symbol）。 如果我為背景選擇一種顏色，我不想看到該列表中的其他 Symbol。

將所有相同類型的 Symbol 保持一致的大小，以便在下拉菜單中一起顯示??

Typing（正在輸入）

這是一個顯示有人正在輸入的 Symbol

進階Tip?：將所有圖標設置為 Mask（蒙版），並在其頂部使用顏色 Symbol。 這樣，如果要更改顏色，只要在下拉框里選擇就行了??

Container（容器）

最後一層！ 這是一個「Mixin / Fill」顏色 Symbol 的重命名案例，我可以輕鬆地切換打開或關閉的狀態：

以上這些可能看起來很複雜，尤其在初次製作的時候需要組織的很周全，但好消息是，我們因此能利用一個單獨的 Symbol 應對成千上萬不同的情況，從此不必再單為一個項目建立茫茫多的 Symbol 庫了。

這就完了么？當然不是。下面還有另外一些我做的 Symbol：

如果你有興趣，你可以在全新的 UX Power Tools 網站上找到他們。 您還可以在 InVision或 Marvel 上查看整個樣式指南。

我想你會喜歡他們的??

來源：Medium.com

作者：Jon Moore

譯者：SketchU&I（很慚愧，發一個微小的廣告）

SketchU&I QQ交流（you）群：110577764

有可能年前犯懶，再發就是年後了，這裡給各位拜個早年，??年見！

推薦閱讀：