前言:剛接觸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,可免費獲得素材 (請勿輸入空格)
全站高品質(zhì)素材免費下載!