什麼是設計系統？為什麼你需要它？

如果您詢問設計師什麼是設計系統，您可能會得到很多不同的答案。首先，元件庫 和風格指南可以用作設計系統，因此人們經常認為它們是同一回事。然而，雖然它們確實有一些重疊之處，但設計系統的用途卻有所不同。

在本文中，我們將討論什麼是設計系統、它們的用途以及它們的組成元件。我們還會向您展示我們自己的設計系統 Prism，以便您更好地了解它們在實際應用中的運作方式。

什麼是設計系統？

設計系統是您與團隊其他成員之間的共識。它是一種共同語言，可幫助您改善溝通、效率和決策。這種共同語言可以是可重複使用的元件集、風格指南或品牌識別——僅舉幾例。簡而言之，設計系統不僅需要告訴您可以使用哪些元素或顏色，還需要告訴您如何使用它們。

設計系統的目的是什麼？

設計通常會有很多複雜性——可能是因為團隊中設計師的多樣性，或是您正在進行的專案的範圍。而複雜性的真正問題在於它會影響一致性。擁有設計系統是一個讓您和您的團隊保持一致的簡單解決方案。設計系統可以規定使用哪些字體和標誌、如何在空間中放置不同的元素等等。它透過同時作為關鍵元素的儲存庫和使用指南來做到這一點。

但設計系統的價值不僅於此。人們普遍誤解設計系統僅適用於設計師和開發人員。但您團隊中的每個人都可以而且應該從您的設計系統中受益。產品經理可以使用元件進行原型設計和可用性測試。行銷團隊可以使用顏色變數來保持一致性和品牌形象。您的設計系統甚至可以包含關於使用者體驗文案和語氣的內容指南。

身為獨立設計師？建立設計系統可能聽起來比它實際的價值更費力，但它將幫助您在未來節省大量時間。它還可以讓您更輕鬆地與任何人協作專案或與他人分享您的作品。

設計系統的目標很簡單：建立一套你和你的團隊可以使用的建構模組，以便更有效率地工作。你花越多時間建立一個適合你需求的良好設計系統，你以後就能節省越多時間。而你可以用這些多出來的時間做什麼呢？專注於設計中有趣、有創意的部分。

設計系統的元素有哪些？

我們已經討論過建構模組和可重複使用的元素，但這些究竟是什麼？讓我們來看看你可以包含在設計系統中的元素。

• 符號：這種特殊的畫板類型包含可以重複使用和更新的圖層。它們是你將包含在設計系統中的建構模組。
• 顏色變數 和 顏色標記：這些工具可以幫助你維護、共用你的設計系統調色板，並從單一資料來源輕鬆地將其移交給開發人員。
• 文字樣式：你可以儲存一組樣式，並在設計中的不同文字圖層重複使用它們。你也可以編輯原始的文字樣式，它會自動更新其餘的文字樣式。
• 圖層樣式：這些樣式的工作方式與文字樣式完全相同，但使用的是形狀圖層（如圓形或星形），而不是文字圖層。
• 庫：Sketch 文件，其中包含元件（符號、文字樣式、顏色變數和圖層樣式），你可以在所有其他文件中共用這些元件，甚至可以在整個團隊中共用。

雖然這看起來可能很多，但請記住，這些都是你可能最終會經常使用的設計元素。我們只是增加了一個額外的步驟，從一開始就適當地組織它們，以便你能夠輕鬆地重複使用和共用它們。

設計系統範例：Sketch 的 Prism

為了讓你更好地理解設計系統是如何運作的，我們將帶你瞭解我們自己的設計系統：Prism。過去，沒有設計系統對我們的設計師來說是一個很大的問題。他們在設計網頁應用程式的不同方面時，並不完全瞭解其他設計師在做什麼，也不知道最新的設計是什麼。我們知道我們可以更有效率地工作。我們需要為網頁應用程式以及我們希望它成為的樣子建立一個單一資料來源。

因此，我們建立了 Prism——一個幫助指導設計師工作的設計系統。透過即時協作和文件更新，他們可以更有效率地與他人協作。他們還能夠在處理網頁應用程式的任何方面時提取標準化的元素，從而節省時間並創造出非常一致的外觀。

設計系統的適應性讓我們能夠不斷地對 Prism 進行迭代。這意味著隨著設計空間的變化和我們開發新功能，Prism 也會不斷發展。它現在觸及到公司的每個部分——包括這篇部落格文章。

將 Prism 作為設計系統，有助於使整個 Sketch 設計生態系統保持一致，並在我們的產品和團隊中提供無縫的體驗。建立自己的設計系統可能需要一些努力，但結果不言而喻。我們稍後將討論建立自己的設計系統的最佳實務，敬請期待！