PM筆記:Sketch Symbols新手起步走
從建立基本Symbol,到進階的Symbol內再包Symbol。
本篇教學帶領讀者完成上述範例,並在文末提供網友更進階的教學文章。
會記錄這篇是因為對Sketch沒有很熟悉,進階文章對我有點難Q_Q
花了點時間摸索,以「希望學會在Symbol右邊出現下拉選單」為目標,僅保留核心步驟,並一步步截圖,希望讀者們透過這篇文章先有個基底。
目錄建立基本Symbol進階Symbol,Symbol內再包Symbol工具列增加Symbol快速選單Sketch套件(Symbol Organizer、Sort Me)延伸閱讀
好,我們出發!
建立基本Symbol
首先我們拉出一個圓角矩形、還有文字框,擺成上圖的樣子,全選起來。
點擊上方Create Symbol,命名為Orange Button,並將左下角的Send Symbol to Symbols Page打勾按OK。
一個Symbol範例就完成了!
左邊原先的圓角矩形、文字框,現在被名為Orange Button的Symbol取代,前面的icon變成一個像是重新整理的圖示。
剛剛勾選的Send Symbol to Symbols Page,會讓我們創建的元素出現在圖中藍色框框的Symbols Page頁面。
點擊進去可以看到剛剛建立的Orange Button,可以想成是PPT的母版;在這邊對該Symbol的修改都會回頭套用在所有頁面上,等等會示範。
接著就能從左上角的「+」號,Symbols內選擇Orange Button囉。
我們拉兩個按鈕,注意右邊Button有文字欄位可以填寫,目前是預設的Placeholder,還沒有被填寫內容。
將兩個按鈕的文字欄位修改如圖。
這時我們希望文字置中、字體也粗一點,還記得剛剛提到的PPT母版嗎?
回到Symbols Page,對Orange Button做修改,如紅框處。
回到Page頁面,使用相同模板的成功就套用最新設定值啦~
(ノ◕ヮ◕)ノ*:・゚✧
進階Symbol,Symbol內再包Symbol
Symbol已經能幫我們省下一些時間,繼續看看進階的用法:把可能的變化預先寫好,讓Symbol列出下拉選單供我們快速替換。
這個技巧會用到巢狀命名的概念,Sketch會依照名稱幫我們進行對應的名稱分類,例如「按鈕/一般狀態」、「按鈕/點擊」會分在「按鈕」項目下。
點擊過去官網有GIF動畫示意,在Symbol元件右邊出現Overrides清單。
我們清空剛剛的練習、或是建立新檔案。
建立三個大小相同的圓角矩形,替換成不同顏色,個別建立Symbol命名為「Color/Red」、「Color/Yellow」、「Color/Green」。
在下方增加「我是白字」、「我是黑字」,個別建立Symbol命名為「Text/White」、「Text/Black」。
文字後方的灰色圓角矩形只是為了方便辨識白字,並沒有實際功用 . _ .
要使用的Symbol素材建立好囉。
可以確認下有沒有正確的分類,沒有可能是打錯字了。
我們個別選「Color/Green」、「Text/White」,排成按鈕的樣子,並把它們兩者同時圈選設為Symbol,取名為「Demo」。
工具列增加Symbol快速選單
從Customize Toolbar把Symbols放上去,之後使用會更方便。
Sketch套件
影片介紹兩個管理Symbol的套件,分別是Symbol Organizer和Sort Me,可以從7:30開始觀看。
延伸閱讀
有了基本概念後,有興趣研究的讀者們閱讀以下兩篇Medium:前者有許多的GIF小動畫加深印象、後者有Sketch原始檔案參考。
我喜歡透過分享幫助更多朋友,文章回饋、或是任何想法,歡迎透過臉書訊息與我聯繫。如果文章有所幫助,別忘了鼓掌灌溉、手指留香喔! ✧*。٩(ˊᗜˋ*)و✧*。