設計教程 ·

sketch中的symbol嵌套功能學習教程

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

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

一、創建元素,如下圖,我建立了一個矩形,一個文字、一個圖標

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

隨后將三個組件選中,再次轉化為一個組件,可以看到右側的區域已經有選項了,大概已經成型,接下來我們一起完善組件庫

三、添加組件選項

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

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

復制組件把里面的內容改成你需要的樣式,注意:命名同類前綴需要相同哦。可以看下圖展示

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

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

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

五、我們開始做狀態遮照。

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

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

可以看到右側有我們組件的元件了,這時候你可以隨意替換你想要的,這時候感覺最 爽啦!

 

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

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

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

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

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

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

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