Sketch web design 之 Symbol 的嵌套

在做組件的時候，我們會經常碰到一些交互組件由多種基礎組件組合而成，並且涵蓋多種狀態，所以為了讓一個組件能夠靈活調用多種狀態，我們就需要用到symbol的嵌套。

我們就以最具代表性的table組件為例：

大家可以看到，在這個table組件中存在著多個symbol嵌套的情況，例如checkbox、status、以及tr的hover與正常狀態等，那麼，應該如何實現這樣的嵌套效果，並且方便靈活變化呢？

1、設置checkbox、status以及tr狀態顏色的基礎組件symbols。

2、將幾個組件拼合成table/tr symbol，再由table/tr組成tbody，加上thead就構成了table組件（與前端代碼結構基本一致，當然我們就不細分到td了）。

大家可以看到這個table/tr symbol嵌套了checkbox、status、以及tr背景的變化（normal和hover）。

最後嵌套好的table組件：

你可以通過改變右側的選項隨意切換幾個嵌套組件的狀態（點擊放大圖片查看gif），當然為了增強組件的可用範圍，需要適當調整嵌套組件的"Resizing"選項。