前言:剛接觸sketch的時(shí)候,想要學(xué)習(xí)symbol,網(wǎng)上搜到的很多并不是我想要的或者專業(yè)術(shù)語看不明白,現(xiàn)在想把自己摸索的用最直白的語言歸納下來 ,讓開始學(xué)習(xí)symbol的伙伴們少走一些彎路,希望對你們能有一些幫助。主要內(nèi)容:重點(diǎn)說symbol的嵌套功能。如下圖。其實(shí)很簡單,但用文字說明的時(shí)候文字會有些多,大家一定要堅(jiān)持看下去,一定感覺爽爽的。
步驟開始啦:我的每段文字后面都會附帶動圖說明,如果文字沒有看明白的可以直接看動圖。下面開始啦
一、創(chuàng)建元素,如下圖,我建立了一個(gè)矩形,一個(gè)文字、一個(gè)圖標(biāo)
二、依次把矩形、文字、圖標(biāo)轉(zhuǎn)換為symbol,?敲重點(diǎn):命名盡量為英文,分割線用‘/’符號。sketch會將’/’視為組的分隔標(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),按鈕通常會有藍(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)持住?;氐絧age頁
可以看到右側(cè)有我們組件的元件了,這時(shí)候你可以隨意替換你想要的,這時(shí)候感覺最 爽啦!
重復(fù)利用相同的symbol,爽一下嘿嘿
看到這里都很明白的話,那么基本的symbol嵌套功能你就掌握啦,然后大家可以舉一反三啦!
幸福小貼士:給大家分享一個(gè)我覺得很有幸福感的小妙招,當(dāng)我們在右側(cè)替換symbol而元件有很多的時(shí)候,一個(gè)個(gè)找起來很麻煩, 這時(shí)候在前面添加一個(gè)小圖像標(biāo)記,很方便去找到元件去替換哦。
選中元件,Control+R快捷鍵重命名,然后control+command+空格會彈出一個(gè)有很多圖案的彈窗,選擇你喜歡的小圖案放在名字前面就好了,后期幫助你更快的找到替換元件哦,我是非常愛這個(gè)了小功能了,手動比心心。
好啦,能看到這里的小伙伴 ,我都非常感動了,第一次寫文章,真心希望這篇文章能對你們有所幫助哦。有問題可以留言問我哦。
為了方便伙伴們學(xué)習(xí),我把源文件也放在下面了,大家也可以下載下來去看下。
掃描關(guān)注下圖公眾號回復(fù):symbol,可免費(fèi)獲得素材 (請勿輸入空格)
全站高品質(zhì)素材免費(fèi)下載!