以下說明全部是自己工作中的經(jīng)驗總結(jié)并沿用至今。可能不是最優(yōu)的方法/說明，希望同行多多交流。

你有你的高級方法，我有我的低級玩法，不是很高級，但是一樣走得通，安排！

-----------------------

sketch組件嵌套細節(jié)，以按鈕為例：

按照尋常的畫法，我們畫出一個按鈕，做好命名及分組。

制作該按鈕的組件

1：轉(zhuǎn)化按鈕文字為組件：

2: 按鈕背景也是有可能變化的，所以也轉(zhuǎn)化為組件。

3: 把按鈕文字，和按鈕背景放在同一個“按鈕”文件夾里，再將這個文件夾轉(zhuǎn)化為組件：

最后，我們到Symbols中可以看到，一個按鈕組件的組成：

接下來，你可以很愉快的使用這個控件，并根據(jù)交互 修改上面的文案：

在你愉快的使用中，或許遇到下面的情況：

按鈕文案是4個字，或者小于4個字，都沒問題，多余4個字就出問題了？

出現(xiàn)這個問題的原因在于你的 文本寬度沒有設定合理。

回到前面你的制作流程中，點擊文本，其實sketch已經(jīng)告訴你它的尺寸了，文本也是有尺寸的哦~

你的文本寬度只有4個字的寬度，寫5個字，當然只能截取了。

出現(xiàn)這個問題的解決辦法：將你的文本寬度設置為當前按鈕的寬度。

當然，你要把文辦寬度設置 大于 按鈕寬度，我也拿你沒辦法。

再回到 Symbols里去看，其中的 “按鈕文字” 那個組件，寬度已經(jīng)變化了。

這個時候，你再愉快的使用這個按鈕組件，就可以寫更多的按鈕文字了。當然，文字個數(shù)太多，依然會超出按鈕寬度。

深入研究一下：按鈕的背景如何變化？

1.我們還是到Symbols中去看：在“按鈕背景”這個組件中，我新建一個“按鈕背景顏色”圖層，并指定顏色，至于 之前的“按鈕背景”圖層上，為了方便理解，我將原來的 “按鈕背景”  修改成  “按鈕背景形狀”。

顧名思義，“按鈕背景顏色”控制按鈕的背景顏色，“按鈕背景形狀”就控制按鈕的形狀了。

2.將兩個圖層mask一下

得到一下結(jié)果：

之前的“按鈕背景形狀” 圖層 自動轉(zhuǎn)化為了 叫做 “mask” 的遮罩圖層，當然，你理解不了，可以改名。

3.將控制顏色的 “按鈕背景顏色”圖層，轉(zhuǎn)化為 組件：

得到一下結(jié)果：

4.為了方便管理，我們把這個組件命名為 “按鈕背景顏色紅”

這個組件只是管理 顏色，所以，我們可以修改它的大小，方便在 Symbols文檔里排列

5. 選擇這個 紅色背景組件，按住atl鍵，拖動復制出一個 組件出來(關(guān)鍵點)，設定其他顏色，并命名為方便管理的其他名稱

接下來，回到page中，你可以愉快的修改按鈕的背景顏色了：

--------------總結(jié)------------------

sketch組件嵌套的細節(jié)之一：

形狀組件的管理形狀，顏色組件管理顏色，不用再 為每一種顏色的按鈕都去做一次組件了。

用sketch的組件原理來做  按鈕背景顏色的變化  是最理性的管理方式，以此類推，你還可以做更多風格上的變化。

---------------------------------

Resizing功能的細節(jié)，以列表項目為例說明：

1.按照常規(guī)的方法，畫出一個列表項的各個圖層：

包含列表項背景，列表項目標題，下一級圖標

在組件化之前，要理解Resizing的原理

----------畫重點-----------

紅色部分 是  對象距離它的父級 的 上下左右邊距是不是固定。

藍色部分 是  對象它自身的寬度高度是不是固定

2. 在理解Resizing原理后，我們將列表項每個圖層組件化

如圖：文字的個數(shù)是變化的，所以應該給文本寬度一個最大可能性寬度。

針對文字圖層的 Resizing屬性。

文本距離列表項左邊有間隔，并且這個間隔應該是固定的，所以在Resizing中我們 僅僅點亮了 如圖屬性。

文本寬度因為設置了一個最大值，所以固定與否都可以。

到此，可將標題轉(zhuǎn)化為組件。

針對列表項右側(cè)的圖標，

我們做如下設置：

無論列表項的寬度如何變，這個圖標永遠靠著列表項右邊的，并且與列表項右邊距離固定。

無論列表項的寬度如何變，這個圖標的尺寸是固定不變的，所以fix屬性則均點亮

至此，將圖標轉(zhuǎn)化為組件。

列表項背景轉(zhuǎn)化為組件。

再查看Symbols中：

接下來，你可以使用這個組件，并任意修改內(nèi)容，寬度上也可以變化，在變化過程中，文字，圖標 相對于列表項的位置都是 固定的。

--------以下細節(jié)畫重點---------

我們有時候會碰到這樣的可能性

列表項中間有一個標識來說明 這個功能很火，火熱進行中。

然后我們根據(jù)前面一個案例的原理，將每個圖層設定要Resizing屬性并 轉(zhuǎn)化組件

如圖

最后把整個列表項 轉(zhuǎn)化為組件

然后使用這個組件

發(fā)現(xiàn)，修改文字個數(shù)之后，文字后面的標識圖標并沒有因為文字個數(shù)多而移動。

問題在于：

現(xiàn)在 “標識圖標”  的父級是 “列表項”。它基于列表項的左邊 的確沒有變。

你希望  “標識圖標”  基于 “列表項文字” 變化，那 就要 把  “標識圖標”的父級換成  “列表項文字”

回到Symbols中。

1.在 “列表項文字”組件中 插入 “標識圖標” 組件

當然，你要把之前 “列表項” 組件  中的  “標識圖標”組件，刪掉。

然后 把 列表項文字 的 屬性 如圖 修改一下，這里很重要

接下來就會得到你希望的結(jié)果：

標識圖標  會根據(jù) 你 寫的文字的個數(shù) 而自動右移動。

------總結(jié)----

Resizing屬性一定要 搞清楚對象 以及它的 父級，

---------------------

以上案例僅僅是示意說明，可以衍生實際項目中的很多情況，項目中遇到具體問題可以參考示意中的思路來解決。