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

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

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

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

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

三、添加組件選項

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

這里有個tips：因為icon和底色都為白色，導致圖標看不清，點擊右側(cè)background,添加背景色下面2個勾記得不要勾選哦

復制組件把里面的內(nèi)容改成你需要的樣式，注意：命名同類前綴需要相同哦。可以看下圖展示

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

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

在復制幾個symbol 改后綴顏色分別為：紅色 灰色

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

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

六、到這里就基本完成了，堅持住。回到page頁

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

重復利用相同的symbol，爽一下嘿嘿

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

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

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

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

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

掃描關注下圖公眾號回復：symbol，可免費獲得素材 (請勿輸入空格)