他們都是同一個Symbol

Sketch Symbols—完美駕馭

剛接觸到Sketch時,最讓我驚豔的功能莫過於Symbols。在摸索Symbols的過程中也是處處碰壁,像是縮放時元件會移位、製作過多不需要的Symbols。本文將簡單介紹Symbols功能,並分享數篇應用此功能的好文,希望可以幫助大家完美駕馭Symbols!


什麼是Symbols?

關於Symbol的官方資料:SymbolsCreatingEditingOrganizingNestedResizing

簡單來說,Symbols是一個具有同步功能的自定義元件。當你製作出一個Symbols時,Sketch會自動創建出一個Symbols Page,並將你製作的主Symbol移送到那。

製作

選取你要作為Symbol的圖層>右鍵-Create Symbol
基本的symbol製作方式(注意左側Pages面板自動創建了一個Symbols Page)
成功製作成Symbol後會濃縮為一個圖層,左邊有個紫色的小標記

為何會說Symbol很強大?因為當你在主Symbol上做任何更動時,同份檔案中,所有pages的artboards上的子symbol也會跟著做變換。

將主Symbol變換底色,子Symbol也跟著做變換

而強大可以到多強大?若能妥善運用Overrides,只需要一個主Symbol就可以做到龐大數量、不同樣式甚至尺寸的子Symbol。

Overrides讓你針對子Symbol做各種變化(注意右側Overrides面板,可以讓你直接編輯文字)

使用

選取一個Symbol做複製,或者點選Insert-symbols
symbol可以直接做複製
或者點選Insert-Symbols
將「所有」子Symbol回復為初始狀態:Layer-Convert Symbol to Artboard
主Symbol回歸為初始狀態後,所有的子Symbol也會跟著回到初始狀態
將「特定」子Symbol回復為初始狀態:Layer-Detach from Symbol
點選特定的Symbol並將其回復為初始狀態

什麼是Overrides?

關於Overrides的官方資料:Editing Symbols

前面提到,若能妥善運用overrides,那我們只需要同樣的「一個」主Symbol,就能做出各種不同顏色、樣式、狀態、尺寸的子Symbol!下面這篇文章(中文版連結)詳細介紹了Overrides的使用方式和技巧:

  1. 圖層的命名方式會影響到後續在Overrides面版上的呈現。
  2. 若Symbol的命名加了斜線「/」,Sketch會自動做層級分類。
  3. 可替換元件的畫板大小必須相同,否則Sketch會無法做偵測。
Original Source

若是在縮放Symbol時,有元件移位的問題,可以參考下面這篇文章,為你的元件設定適合的縮放方式(在44版本以後有大幅度變動):



以上是我對Symbols功能做的簡單介紹還有推薦閱讀的文章,有任何想法都歡迎跟我分享噢!

Show your support

Clapping shows how much you appreciated 00nyrhtak’s story.