如果您發現自己不斷在不同文件中複製和貼上相同的符號，或者在螢幕旁貼滿了十六進位碼的便利貼，那麼可能是時候將這些設計核心元件轉換成元件庫了。
在這篇文章中，我們將逐步引導您如何建立元件庫以及您可以添加到其中的所有元件。讓我們開始吧！
如何建立元件庫
使用元件庫，您可以在一個地方組織和儲存您的元件，甚至可以讓它們在您的整個工作區中都能存取。它們對於在不同情況下輕鬆應用您的品牌，或甚至將具有共同元素的大型設計文件拆分都非常有用。換句話說，元件庫可以保持一致性並改善團隊內的協作。
您可以透過使用 檔案 > 新增為元件庫，將任何 Sketch 文件轉換為元件庫。在網頁應用程式中，您可以透過文件設定將現有文件轉換為元件庫。
雖然將現有文件轉換為元件庫既快速又簡單，但有時從頭開始建立會更有意義，尤其是在您尚未建立元件的情況下。如果您要從頭開始，按合理的順序新增元件會有所幫助。
思考元件庫元件的一個好方法是將它們分為三個複雜度級別。讓我們看看每個級別及其包含的元件。
級別 1：基本元件
如果您要從頭開始構建元件庫，我們建議您從樣式和顏色的基本構建塊開始。
以下是您在 Sketch 中的元件入門包 👇
顏色變數
顏色變數 對於儲存顏色非常有用。它們會直接顯示在顏色選擇器中，方便您查找和應用。您可以使用它們為您的品牌或專案建立調色盤，這將有助於您更快地工作並保持設計的一致性。
文字樣式
在處理排版時，文字樣式 是您最好的朋友。您可以建立預先定義的字體、粗細和顏色組合，並在您的設計中重複使用。這樣，您可以為標題、副標題和正文建立不同的文字樣式，並避免在文件中複製和貼上樣式。
圖層樣式
圖層樣式 的工作方式與文字樣式相同，但它們適用於形狀圖層。您可以使用它們來儲存背景顏色和陰影。例如，您可能為按鈕設定了特定的陰影，以賦予它們細微的光暈或 3D 效果。如果您希望在您的設計中保持這種處理方式的一致性，您可以將這些圖層儲存為樣式。
如何整合所有內容
您可以根據上下文輕鬆地在不同樣式和顏色之間切換。您可以使用兩個顏色變數來區分啟用和未啟用的按鈕，或者針對不同長度或重要性的副本更改文字樣式。
您可以透過元件視圖快速存取顏色變數和樣式，在 Mac app 中按下 C 即可開啟。然後，您可以將它們拖放到要套用的圖層上。
準備好基本元件後，您就可以開始製作更複雜的元素。
等級 2：符號和巢狀符號
現在您已具備建構基礎，可以利用它們來製作更複雜的元件了，像是符號和巢狀符號。讓我們來看看它們各自的運作方式以及您可以如何使用它們。
符號
符號 是 Sketch 中任何元件庫的核心，對於處理導覽列、標誌和模組等元素特別方便。從技術層面來說，符號是一種特殊的畫板類型，其中包含可重複使用和更新的圖層。您可以在整個專案中無限複製這組圖層，並根據您的喜好編輯它們。您可以對特定實例進行個別更改，或透過編輯來源一次更新所有實例。
例如，假設您要設計一個要在應用程式專案中重複使用的按鈕。您可以建立形狀圖層和文字圖層，並將其儲存為符號。然後，您就可以開始在整個設計中新增該符號的實例。如果您需要更改按鈕的整體外觀，您可以透過符號來源進行更改。或者，您可以編輯特定實例並更改顏色或副本，而不會影響其他按鈕。
巢狀符號
使用巢狀符號，您可以將簡單的符號（例如按鈕或標誌）放置在較大的符號內，例如導覽列。這種額外的複雜性（幾乎像是 2.5 級）讓您在編輯時擁有很大的彈性。您可以單獨調整每個部分，同時保持所有內容同步。例如，如果您決定更新標誌，導覽列中的標誌也會跟著改變。
如何整合所有內容
這就是將樣式和顏色變數套用到符號的時機。如果您花時間設定它們，就可以在幾秒鐘內更改應用程式設計的整體外觀和風格。您越依賴文字樣式、圖層樣式和顏色變數，就越容易管理和調整元件庫。
等級 3：畫板範本
使用畫板範本，您可以將任何畫板及其內容轉換為可重複使用的元件。它們非常適合存放您的符號和螢幕、個人資料、貼文和各種模型的整體設計。
您只需選取畫板並在檢查器中啟用**使用為範本**核取方塊即可。然後，您就可以在按下 A 後，透過檢查器中的下拉式選單或在元件視窗中存取新的畫板範本。
不確定何時使用畫板範本嗎？想像一下，您正在進行新的網頁設計，並且剛剛完成了大多數螢幕中都會使用的頁首和頁尾。您可以建立一個與螢幕尺寸相同的畫板，新增頁首和頁尾符號，並將其儲存為範本。如此一來，每次建立網站的新螢幕時，您都可以省去一個步驟，因為頁首和頁尾都已經設定好了。
如何整合所有內容
一旦您將所有元件仔細地編織到畫板範本中，進行更改並保持一致性將幾乎自動完成。對顏色變數的簡單更改將會波及到符號和畫板範本，同時仍然可以完全控制在必要時進行個別更改。
更重要的是，如果您為團隊添加更多說明，精心製作的元件庫可以輕鬆轉變為功能齊全的設計系統。我們有一份完整的指南，說明如何構建設計系統，如果您想深入了解，可以查看。
就是這樣！如果您想了解更多關於元件庫的資訊，我們準備了一篇深入的文章供您參考。
