前言：剛接觸sketch的時(shí)候，想要學(xué)習(xí)symbol,網(wǎng)上搜到的很多并不是我想要的或者專業(yè)術(shù)語看不明白，現(xiàn)在想把自己摸索的用最直白的語言歸納下來 ，讓開始學(xué)習(xí)symbol的伙伴們少走一些彎路，希望對(duì)你們能有一些幫助。主要內(nèi)容：重點(diǎn)說symbol的嵌套功能。如下圖。其實(shí)很簡(jiǎn)單，但用文字說明的時(shí)候文字會(huì)有些多，大家一定要堅(jiān)持看下去，一定感覺爽爽的。

步驟開始啦：我的每段文字后面都會(huì)附帶動(dòng)圖說明，如果文字沒有看明白的可以直接看動(dòng)圖。下面開始啦

一、創(chuàng)建元素，如下圖，我建立了一個(gè)矩形，一個(gè)文字、一個(gè)圖標(biāo)

二、依次把矩形、文字、圖標(biāo)轉(zhuǎn)換為symbol,?敲重點(diǎn)：命名盡量為英文，分割線用‘/’符號(hào)。sketch會(huì)將’/’視為組的分隔標(biāo)志，分組也方便找到和復(fù)用

隨后將三個(gè)組件選中，再次轉(zhuǎn)化為一個(gè)組件，可以看到右側(cè)的區(qū)域已經(jīng)有選項(xiàng)了，大概已經(jīng)成型，接下來我們一起完善組件庫

三、添加組件選項(xiàng)

雙擊button組件進(jìn)入symbol編輯頁面，我們把組件位置重新排列下，然后開始添加工作。

這里有個(gè)tips：因?yàn)閕con和底色都為白色，導(dǎo)致圖標(biāo)看不清，點(diǎn)擊右側(cè)background,添加背景色下面2個(gè)勾記得不要勾選哦

復(fù)制組件把里面的內(nèi)容改成你需要的樣式，注意：命名同類前綴需要相同哦?？梢钥聪聢D展示

四、添加完按鈕的狀態(tài)，我們開始新建按鈕的狀態(tài)，按鈕通常會(huì)有藍(lán)色 紅色 灰色 ，新建一個(gè)畫板填充矩形為藍(lán)色 , 命名為顏色狀態(tài)/藍(lán)色,? 然后轉(zhuǎn)化為symbol?

（這個(gè)地方我給矩形按鈕加了4左右的圓角，你們可以根據(jù)自己的需求，我是問了后面讓你們遮照功能看得更明顯，所以加了圓角值）

在復(fù)制幾個(gè)symbol 改后綴顏色分別為：紅色 灰色

五、我們開始做狀態(tài)遮照。

選中圖層，點(diǎn)擊上方symbol導(dǎo)入我們做的狀態(tài)symbol,記得遮照層要放在上面，然后點(diǎn)擊被遮照的圖層，右點(diǎn)擊選中MASK。這樣就被遮照了。按鈕被覆蓋上顏色狀態(tài)了，后面改按鈕顏色都可以直接只改顏色狀態(tài)這個(gè)symbol了。（遮照快捷鍵：control+command+M, 圖層向上一層：option+command+向上三角形）

六、到這里就基本完成了，堅(jiān)持住。回到page頁

可以看到右側(cè)有我們組件的元件了，這時(shí)候你可以隨意替換你想要的，這時(shí)候感覺最 爽啦！

重復(fù)利用相同的symbol，爽一下嘿嘿

看到這里都很明白的話，那么基本的symbol嵌套功能你就掌握啦，然后大家可以舉一反三啦！

幸福小貼士：給大家分享一個(gè)我覺得很有幸福感的小妙招，當(dāng)我們?cè)谟覀?cè)替換symbol而元件有很多的時(shí)候，一個(gè)個(gè)找起來很麻煩， 這時(shí)候在前面添加一個(gè)小圖像標(biāo)記，很方便去找到元件去替換哦。

選中元件，Control+R快捷鍵重命名，然后control+command+空格會(huì)彈出一個(gè)有很多圖案的彈窗，選擇你喜歡的小圖案放在名字前面就好了，后期幫助你更快的找到替換元件哦，我是非常愛這個(gè)了小功能了，手動(dòng)比心心。

好啦，能看到這里的小伙伴 ，我都非常感動(dòng)了，第一次寫文章，真心希望這篇文章能對(duì)你們有所幫助哦。有問題可以留言問我哦。

為了方便伙伴們學(xué)習(xí)，我把源文件也放在下面了，大家也可以下載下來去看下。

掃描關(guān)注下圖公眾號(hào)回復(fù)：symbol，可免費(fèi)獲得素材 (請(qǐng)勿輸入空格)