跳過導覽
學習設計

如何在 Sketch 中組織和維護設計系統

開始以全新的方式思考設計系統

最近,我談到了如何建立設計系統。我涵蓋了基本組件,例如顏色變數樣式,以及如何在規範和協議中工作。但是隨著您的設計系統的發展,您可能會發現自己有太多元素需要整理。別擔心!一些良好的組織最佳實務可以解決這個問題——至少在設計系統方面是如此。

今天,我們將學習不同的技巧來分組和組織我們的組件。我們還將談談在發展設計系統時需要記住的一些事項。

讓我們來看看 👀

擁抱你內在的組織者

當我們想到設計系統時,我們通常會想到每個組件都有一個元件庫。但沒有規定說您需要將所有內容都保存在單個文件中。例如,您可能希望針對不同類型的組件使用單獨的元件庫,甚至使用另一個文件來存放指南和說明文件。

在 Sketch 中,您可以使用專案集合作為主要和次要的組織級別。例如,您可以為您的品牌建立一個專案,並將您的元件庫和其他設計文件分組到一個集合中。

您的設計系統越複雜,您可以發揮的創意就越多。但是,我建議一開始保持簡單——您新增的級別越多,以後就越難找到合適的組件。

在平台無關和平台優先之間做出選擇

如果您從事產品設計工作,一個有用的起點是在平台無關和平台優先之間做出選擇。我的意思是選擇您是要專注於組件還是平台——例如裝置、作業系統、瀏覽器等。

使用設計系統,一次更新和維護組件及其所有變體比必須在許多不同的地方(每個平台)尋找相同的組件更容易。這是一種平台無關的方法。

另一方面,使用平台優先,您更有可能搜尋和選擇特定平台的組件。翻找特定平台的組件可能需要更多時間,但也意味著您的設計系統將更容易擴展和維護。平台優先的一個很好的例子是Apple 的 UI 套件

兩種方法各有優缺點。重要的是及早做出選擇並堅持您的選擇。並確保所有其他參與設計系統的人也是如此!

將您的組件分組

建立組件時,最好考慮它們之間的關係。問問自己一些問題,例如:這個符號是另一個符號的非活動狀態嗎?或者,這個畫板範本是特定於某個裝置的嗎?

決定一套命名慣例,將元件歸類,甚至在它們之間建立階層。舉例來說,您可能有一個標準的按鈕符號,然後建立其他常用的版本,例如非活躍狀態變化或具有不同行動呼籲的按鈕。透過將這些符號命名為「按鈕」、「按鈕/非活躍」、「按鈕/立即購買」、「按鈕/非活躍/立即購買」等等,您可以在 Sketch 中自動將它們分組。

每當您搜尋元件時,這些按鈕都會並排顯示,讓您更容易找到或替換。但是,請盡可能保持元件階層扁平化。在確定結構並增加不必要的複雜性之前,請務必問問自己,是否有可能簡化目前的方法。

專業提示: 您可以使用表情符號,例如 📱 和 💻 表情符號來命名特定裝置的元件。

使用單一事實來源

隨著設計系統的發展,您可能會發現自己需要進行重大或臨時的變更。但是,如何在不影響可能已經在使用您的設計系統元件的團隊成員的情況下進行變更?

已加星號的版本 可以透過將最新(或任何)版本的設計系統設定為其他人可以繼續使用的預設版本來提供幫助。這表示您可以開發新版本,而不會影響團隊的工作流程。完成所有變更後,您可以將該版本的程式庫「加星號」,我們會將更新傳遞給任何使用該程式庫的人。

以下是一些關於如何使用版本星號來更好地管理設計系統的額外提示

  • 新增頁面以預覽變更。 透過在程式庫中建立專用頁面來放置高保真模型和螢幕,您可以查看元件更新將如何影響最終設計,而無需將版本加星號或推送任何實際更新。
  • 新增說明。 您可以將說明新增至已加星號的版本,以描述任何重大變更,讓您的團隊更容易找到正確的版本。
  • 為您的團隊設定「發佈日期」。 根據您的更新頻率,您可以設定一週或一個月中的特定日期來為新版本的程式庫加星號。設定日期還可以讓您的團隊有時間在發佈之前檢查和測試任何變更。

加星號版本對於隨著時間的推移維護和發展設計系統非常有幫助。它提供了控制、記錄您的變更,並將建立與使用分開。

使用樣式建構您的元件

在建立元件時,請盡可能依賴樣式和顏色變數,而不是分別自訂每個元件。這種方法可以確保,如果在任何地方發生樣式和顏色變更,您可以輕鬆更新元件和螢幕,而不會造成太多干擾。

舉例來說,假設您根據品牌顏色和排版設計了一個登陸頁面。如果您使用顏色變數和樣式,則可以透過變更這些程式庫元件來重新設計整個設計,而無需單獨更新所有內容。

如果您想了解更多資訊,我們有一份完整的顏色變數指南!

建立設計系統委員會

無論您的團隊規模如何,定期舉行會議以確定設計系統的狀態可能是一個好主意。我們可以將其稱為設計系統委員會,並且可以由需要參與的任何數量的團隊成員組成。

目標是持續圍繞著您的設計系統進行對話,以及它是否在目前的狀態下對每個人都有效。透過這些會議,您可以決定要移除、合併、新增或修改哪些元素。利用這些時間來建立設計系統的架構、設定圍繞發展和建立元件的原則,以及定義您的文件目標和版本控制策略。

總體而言,成立設計系統委員會是收集反饋和讓每個人都有機會談論他們自己的經驗和痛點的好方法。它們還有助於讓所有重要的利益相關者保持同步,並確保團隊中的每個人都感到被 inclusion。儀式和程序由你決定——沒有人會抱怨免費披薩! 🍕

最終,設計系統只有在人們真正使用時才有用。建立委員會將會提高設計系統符合團隊或組織需求的可能性。此外,它還可以阻止人們偏離正軌,在指定的庫之外創建自己的組件。


設計系統既靈活又有幫助,但它們一開始確實需要一些努力。給你自己和你的團隊足夠的時間來考慮你的需求,以及你可以使用哪些技術來最好地滿足這些需求。這樣,你將構建一個真正適合你的設計系統,並在你以後迭代和擴展時給你額外的信心。

你可能也喜歡

免費試用 Sketch

無論你是 Sketch 的新手,還是回來看看有什麼新功能,我們都能讓你做好準備,在幾分鐘內完成你的最佳工作。

免費開始使用
免費開始使用