如何在 Sketch 中建立設計系統

了解如何在未來的專案中保持一致性和效率

好的設計通常是良好協作的副產品。但是，當涉及品牌指南或產品重新設計等大型專案時，您需要在您的工具庫中加入額外的溝通工具。設計系統正是如此，它是一種確保每個人都在同一頁面上並執行相同願景的方法。

今天，我將向您展示如何在 Sketch 中從頭到尾建立您自己的設計系統。

讓我們開始吧！🪂

什麼是設計系統？

在開始之前，讓我們快速回顧一下設計系統是什麼。從本質上講，這是您與團隊其他成員（包括開發人員和產品經理）之間的協議。設計系統可幫助您使用一組共享的設計指南、元件和樣式來建立具有一致性和可擴展性的產品。

您可以在這裡找到所有 Apple 的 Sketch 資源。

您可以使用元件庫來建立一個來源文件，用於儲存您的元件，例如符號、色彩變數、樣式和畫板範本。它們是任何在 Sketch 中構建的設計系統的基礎。如果您需要重新學習元件庫或不熟悉 Sketch，我們建議您查看我們的免費 Sketch 102 元件庫課程！

設計系統的主要目標是建立適用於每個人的可擴展內容。為此，最好從最基本的元素開始，然後逐步發展。您首先需要定義您的色彩變數、文字和圖層樣式，您可以根據您的品牌識別或專案（取決於您的設計系統的範圍）來設定這些樣式。

準備好基本元件後，您可以使用它們來構建更複雜的元件，例如符號和畫板範本。

符號是 Sketch 中任何設計系統的核心。它們非常適合用於建立具有不同複雜程度的可重複使用元件。雖然可以自由編輯符號實例是其優點之一，但我們如何確保我們忠於品牌呢？

這就是將樣式和色彩變數應用於您的符號的方便之處。您可以使用符號覆蓋輕鬆地在樣式和顏色之間切換，而無需對父符號本身進行任何更改。例如，您可能想要使用兩個色彩變數來區分活動按鈕和非活動按鈕。或者，您可能想要更改不同長度或重要性的副本的文字樣式。

遵循同樣的邏輯，您可以使用畫板範本來存放許多符號，例如導覽列或標誌。這些範本可以作為您的螢幕畫面，您可以像使用符號一樣重複使用和更新它們。

您越依賴文字樣式、圖層樣式和顏色變數，就越容易管理和擴展您的設計系統。透過這種方式，您只需進行幾項調整，即可更改應用程式設計的整體外觀和風格，同時遵循專案或品牌的預定識別。

讓我們來看一個如何整合所有元件的範例。以下是我想要設計帶有搜尋框的登陸頁面時會遵循的步驟：

使用這種方法，如果您需要更改該文字框的顏色，只需更改顏色變數即可。您也可以一次性更改佔位符文字的樣式，並將其套用到所有地方。奠定基礎可以讓後續的迭代和擴展變得更加容易。

正如我所提到的，設計系統不僅僅是一組元件的集合。它們透過制定正確的規則和準則，直接滿足設計團隊或專案的需求。

設計系統應該回答諸如「我如何應用此樣式？」和「我如何使用此元件？」之類的問題。這樣，團隊中的每個人都能夠做出協調一致的決策，而無需在每個步驟上都進行同步。

在設計系統中納入準則和協議沒有絕對的對錯之分。您可以應用的最佳實務是與您的團隊制定一些基本規則。這意味著要讓開發人員、專案經理和任何其他最終將與您建立的設計互動的利益相關者參與進來。

準則也不必僅限於設計。您可以引入您的UX文案撰寫人員，並立即建立UX文案生態系統。您也可以與您的開發人員建立一些基本規則，以便您以對設計交付最有幫助的方式建構設計系統。

使用 Sketch，您可以使用智慧佈局等工具來為元件指定內部邏輯。設定間距規則對於幫助您保持定義的網格非常重要，這將使您的設計看起來更具凝聚力和平衡感。

智慧佈局允許您的圖層根據其內容自動展開或縮小，直接傳達您期望設計在邊距和比例方面的表現方式。

別忘了您可以覆寫符號實例中的文字、樣式和顏色。覆寫功能賦予您的設計系統極大的靈活性，並使自訂符號變得輕而易舉。這是您可以使用的最有用的工具之一。

此外，您可以在 Sketch 中指定每個元件可用的覆寫選項。這讓設計系統管理員可以更好地控制元件和符號的行為，同時防止不太熟悉的團隊成員實施不符合設計系統規則的結果。

設計系統是每個出色且可擴展項目的核心。因此，一篇文章不足以涵蓋所有內容！敬請期待下一期，我們將討論如何在 Sketch 中組織設計系統。