關于 API 你應該知道的一切
在本文中，我將引導您完成構建以顏色為重點的基本設計令牌系統的過程，從原始令牌(簡單的數據表示)開始，到更復雜、功能更強大的語義令牌。
Contentful Studio是我們用于視覺組裝頁面的解決方案，它包含一個令牌系統，可以作為您設計令牌的另一個端點。
設計令牌對于捕獲設計系統中使用的所有設計決策至關重要。這些決定涵蓋了定義你的產品和品牌的各種元素，比如顏色、文本、邊框和動畫。
由于其靈活性，這些令牌通常存儲在JSON文件中，可以通過大量現有的轉換包在各種平臺上進行轉換和集成。通過封裝在JSON文件中的可重用令牌的健壯基礎，構建了整個設計系統。
在構建基本的令牌系統時，讓我們從一些基本定義開始。設計令牌通常可以分為三種類型:基本令牌、語義令牌和組件令牌。
讓我們從定義我們的第一個原始符號開始:你的主要品牌顏色。選擇這種顏色可能涉及到廣泛的討論、對對比的考慮以及對可訪問性標準(如WCAG)的遵從，因此我們將這個值捕獲并存儲在一個令牌中是很重要的。從基礎開始，我們將捕獲這種原色的十六進制值，并建立可視化表達這些概念的術語和方法。
讓我們來看看我們的第一個設計標記：
在創建設計令牌時，我們做了一些重要的決定。首先，我們在名稱前加上“顏色”來對其進行分類，并將其與其他類型的設計決策區分開來。這也有助于在擴展令牌系統時保持清晰的結構。
接下來，我們將這個決策放入初始JSON表示中，不僅捕獲類別(“color”)，還指定其類型。通過包含類型，我們指出這個令牌表示一種顏色，并提供了應該如何處理它的指導。這種明確性確保了在不同平臺上使用令牌時，系統知道如何使其適應各種應用程序，例如將其更改為不同技術所需的格式。
有了一個設計令牌，這是一個很好的機會來考慮我們將如何轉換和分發它，以確保它到達所有必要的目的地。讓我們來探索一些基本的、但又至關重要的輸出，以演示我們團隊中的不同角色如何使用這個令牌。
在這里，我將令牌JSON文件中的信息轉換為各種格式:使用CSS屬性或變量的CSS，用于iOS應用程序的對象，并將其與Figma變量同步。盡管還有許多其他方法可以導出和利用這個令牌(例如，順風CSS和Sass)，但這種方法代表了基本的內容，提供了一個簡單的結構。
在所有這些轉換中，我的目標是在不同的導出之間保持一致的命名約定。這種一致性確保了每個人，無論角色或平臺，都可以使用相同的設計語言，并輕松地在每個上下文中找到他們需要的內容。
這些轉換通常是用特定的包完成的，比如Style Dictionary和backpack。雖然創建自己的轉換似乎很容易，但這些包有助于保持抽象和可管理。隨著令牌變得越來越復雜，這種抽象變得越來越有用。
我們已經建立了主要的設計令牌，并創建了一種簡單的方法將其導出為各種角色可用的代碼。現在，讓我們建立我們的調色板。只有原色是不夠的;我們需要稍微深一點和淺一點的變化，以及像灰色這樣的中性色，把數百萬種可能的顏色選擇減少到一個可控的集合。
為了創建一個更全面的調色板，我們可以將原色指定為“primary 500”，允許我們定義較亮和較暗的版本。目標是建立一個最小但健壯的顏色集。在擴展調色板時，考慮可訪問性準則，如WCAG對比關注點。例如，您可以確保標記為“500”及以下的顏色適合用于白色背景，而標記為“600”及以上的顏色適合用于黑色背景。根據你的品牌現有顏色的位置，你可能需要嘗試在哪里以及如何應用這個慣例。
盡管在這個階段定義每條規則并不重要，但重要的是要意識到這些注意事項，并在構建時考慮可訪問性。幸運的是，這些規則可以嵌入到我們接下來要構建的語義令牌中，為用戶提供指導，這樣他們就不需要記住哪些步驟在哪些場景下工作。
考慮到這些因素，讓我們構建一個更完整的調色板。
為了建立一個基本的標記系統，我添加了一個輔助顏色，包括每種顏色的步進級別，并添加了中性色(避免使用術語“灰色”以保持抽象)。此外，我還集成了一些用于向用戶提供反饋或指示某些狀態的原始顏色。把這些放在一起看有助于識別品牌顏色和這些“信號燈”顏色之間的潛在沖突，這些顏色通常用來傳達意義(比如紅色代表錯誤，綠色代表成功)。
為了管理變化，我使用了基于100的步進系統，并努力保持不同顏色之間的相對變化盡可能相似。這使得用戶可以很容易地直觀地感受到相對差異，并為級別之間的細微差異留出空間。例如，通常希望光背景有輕微的變化，因此添加950和925將立即被理解。
由于我們的原始符號，我們現在有了一個多用途的顏色數組。接下來，讓我們用這些標記構建一個語義層，這將為如何有效地應用這些顏色提供明確的指導，從而創建一組有意義的設計規則。首先，讓我們檢查一下僅依賴原始標記的不足之處。
許多設計系統在這一點上停止了，實現了基本的一致性，這當然比沒有定義的調色板要好。然而，仍然有很多模棱兩可的地方。
有許多設計決策仍然是由社交決定的。例如，如果您決定500步顏色應該符合在白色背景上使用的可訪問性，則該信息不是令牌本身所固有的—它必須單獨傳達。
此外，白色可以使用五種顏色，設計師可能會在文本中使用不同的顏色，從而導致不一致。例如，這里是用三種不同的方式設計的相同組件，這些方式在基本的系統中都是可以接受的。
這些微小的差異在規模上變得非常明顯，所以解決這些歧義是很重要的。這就是語義標記的用武之地。語義令牌可以引用其他令牌，并封裝特定的用途或指導方針。此功能允許我們使用現有的調色板并定義特定的使用模式，減少歧義并正式捕獲更多的設計決策。
讓我們看一下如何為默認文本樣式定義語義標記，以及它如何映射到調色板。
在我們的系統中，我們不喜歡使用黑色作為默認文本顏色。相反，我們選擇灰色或灰色200，在大多數情況下，這應該是主要的文本顏色。極少情況下不應遵循此規則，以確保所有頁面和應用程序的設計一致。為了加強這一點，我們創建了一個名為“text-default”的新語義令牌，其值為灰色200。這個新令牌比原始令牌傳遞了更多的信息——它定義了顏色的角色和適當的應用。
使用語義標記，我們現在可以在系統內封裝設計決策，為使用設計系統的人提供清晰的指導。原始令牌沒有這種上下文信息。通過定義像“text-default”這樣的標記，我們開始為我們的設計系統構建一個API——人們可以通過這個框架與我們的模型進行交互。
這種方法提供了額外的指導，減少了歧義，幫助人們做出一致的決定，而不必反復考慮顏色對比或懷疑別人在使用什么。通過在系統中嵌入這些設計規則，我們創建了一種可靠且直接的方法來保持一致性。
現在我們已經引入了一種新的令牌類型，讓我們回過頭來檢查我們的分發過程，并確定如何將這種新的語義令牌集成到我們現有的工作流中。
查看代碼，您可以看到在標記和每種輸出格式中，一個標記可以引用另一個標記，或者一個CSS變量可以引用另一個標記。這在設計令牌中稱為別名。例如，在Figma中，如果您在變量周圍看到一個灰色框，則表明它引用了設計系統中的另一個令牌。此功能非常強大，因為它允許您在令牌之間建立關系并創建更有意義的連接。
此功能使您能夠以更對話的方式表達設計準則，指導開發人員和設計人員如何使用原始令牌。不需要解釋文本顏色使用哪個特定的原語標記，您可以引用更高級的標記，如“text-default”，它引用正確的原語標記。這個抽象層提供了靈活性，允許您在不更改語義結構的情況下更新底層值。
類似地，當設計師或開發人員需要為文本找到正確的顏色時，他們可以查看可用的標記，答案將是明確的-使用默認的文本顏色，即灰色200。這種方法簡化了設計過程，并確保每個人都在同一個頁面上，即使底層令牌隨著時間的推移而改變，以改善可訪問性、品牌或其他考慮。
很明顯，我們需要的不僅僅是默認的文本顏色標記，這就是設計系統變得復雜的地方。如果我們過多地限制設計師和開發者的選擇，他們可能會感到受到限制，從而更難創造出適合品牌的獨特表達。
另一方面，過于龐大的設計系統可能會變得笨拙，使培訓人員變得困難，并可能導致與預期結果相反的結果——引入歧義和復雜性，從而導致不一致。
保持適當的平衡是創建自己的設計系統的關鍵原因。它可以讓你建立一種獨特的理解和方法來表達你的品牌，同時保持一致性。鑒于此，讓我們考慮設計系統中一些常見的高級類別，并評估是否應該將它們合并到我們的語義標記系統中。
看看這個列表，你可能會猜到這些變體的使用情況。交互變化適用于當你將鼠標懸停在按鈕上和按下按鈕時發生的情況。您有品牌顏色、反饋顏色，并且需要在頁面上使用多種顏色來增加強調，從而允許您在默認顏色周圍導航，而不會引入過多的可變性。
該圖還表明，標記組合起來形成“文本懸停”和“文本微妙”之類的名稱。雖然這些名稱很簡單，但它們很容易導致多維問題，從而導致大量的令牌。例如，您可能有一個“微妙的次要背景懸停顏色”，如果按照這個網格的表面值來計算，則會產生數百個令牌。這就是為什么設計系統既要定義事物，也要不定義事物。
基于關注有意義的內容而顯式忽略沒有意義的內容的概念，您可以設計一個簡單的二維網格來組織設計標記，作為對標記建模的起點。這個網格的主要結構包括沿x軸放置更簡單、更直接的標記(如基本狀態或屬性)，沿y軸放置更復雜的標記(具有多種變化的標記)。稍后，當您進一步解析此結構時，您可以開始更詳細地概述此命名約定的最終工作原理。
在這個例子中，一個默認的背景顏色標記會有一些變化，比如懸停和活動狀態，但是一個禁用狀態不會有額外的狀態，比如禁用懸停;這種概念化有助于區分可以演變(多維)的令牌和靜態或終端化(端點)的令牌。
考慮警告顏色的標記。如果你決定進一步簡化你的系統，并得出結論，沒有必要的區別，如微妙或最小的變化，這個警告顏色，然后你可以把它直接沿著x軸。x軸的位置強調了它作為一個簡單、單一的設計元素的作用，沒有額外的復雜性。
這種網格方法允許清晰地可視化標記如何相互關聯以及可以在何處進行簡化，從而幫助設計師做出明智的決策，確定設計系統的哪些方面需要詳細說明，哪些方面需要簡化。
這種方法的另一個好處是，我們可以在一個頁面上總結它，使用戶很容易理解。用戶可以快速掃描他們需要的角色，查看相應的軸，并找到他們正在尋找的令牌，這大大減少了學習曲線，并最大限度地減少了對過于復雜的命名系統的需求。結構很簡單:從角色開始，找到x軸上的相關位置，然后定位y軸值。
如果您的系統需要擴展，那么您可能需要進一步形式化系統，但這是結構和可用性之間的良好平衡，以擴展您的令牌。舉個例子，如果你想給一個倒立的顏色一個懸停狀態，你可以倒立到y軸上。
有了這個簡化的結構，讓我們回到基本的web頁面示例。我們將添加一個鏈接，并開始使用基于這些語義標記的內容填充頁面，以說明如何應用它們來構建一致的設計系統。在實際場景中，您將使用大量現有組件或首次構建一套基本組件來執行此操作。
我保留了原語標記作為參考點，以澄清正在發生的事情，但是語義標記系統的美妙之處在于，將這些標記應用到頁面的人不再需要考慮原語。他們清楚地了解自己需要什么——文本、背景顏色和各種鏈接狀態——語義網格為使用哪些令牌及其名稱提供了直接的答案。
我們已經到達了一個有趣的節點，我們的令牌系統被構造成一個語義層。它可以用來幫助設計師和開發人員做出明智的決定，增強他們的溝通，但現在它也可以用來幫助內容創作者與視覺網頁編輯。
Contentful Studio是我們用于視覺組裝頁面的解決方案，它包含一個令牌系統，可以作為我們設計令牌的另一個端點。它的結構是為了指導設計屬性，如文本顏色和背景顏色，與我們的語義層緊密一致。雖然這里可能沒有包括交互狀態等方面，但這表明了人們在設計組件時自然傾向于考慮的級別。
它是這樣映射的：
現在我們已經建立了一個簡單的原語和語義標記系統，讓我們來研究第一個組件標記。組件令牌有幾個用途。它們可以作為設計人員和開發人員之間的文檔形式，澄清和協調需要開發的組件部分。此外，它們對于創建多主題令牌系統至關重要，例如，允許代碼中的單個按鈕可用于不同的獨特品牌。
然而，組件令牌引入了另一層抽象，需要仔細管理，并且維護起來很復雜。例如，只有一個主題的設計系統如果只使用語義標記可能更易于管理。然而，在我們的場景中，我們將引入兩個不同的品牌，以便我們可以創建一些組件令牌。讓我們來看看如何創建一個同時適用于品牌a和品牌B的按鈕。
首先，每個品牌都有自己的一套代幣，一個品牌主題。這些品牌主題遵循相同的結構模板，但具有不同的價值，以捕捉每個品牌的獨特風格。例如，在我們的按鈕組件中，我們設法封裝了每個品牌的需求，例如不同的原色和文本標簽。然而，在角落半徑方面存在一個問題——品牌A更喜歡中等半徑，而品牌B則希望按鈕組件有一個完整的藥丸形狀半徑。
我們有幾個選擇。一種方法可能是將按鈕設計為包含完整半徑的變體，從而允許兩種樣式之間的靈活性。然而，如果兩個品牌很少使用這些變化，這可能會導致設計師和開發人員在實現正確的風格時感到困惑和困難。對于B品牌來說，使用藥丸形狀的變體將成為一種社會規則，這會帶來不必要的歧義。
相反，我們可以通過引入組件令牌來解決這個問題。讓我們來探索一下按鈕組件是如何工作的:
我們在語義令牌之上引入了一個額外的層，稱為組件令牌，專門用于按鈕半徑。這允許每個品牌自定義半徑值，以適應他們的特定風格，而不會破壞整體令牌的結構。因此，每個品牌的設計師和開發人員可以使用默認的按鈕實現，同時仍然實現每個品牌所期望的獨特風格表達。
與使用語義令牌一樣，您可以選擇創建多少個組件令牌。通過保持一個更簡單的系統并避免將某些屬性(如背景色)轉換為組件標記，您強調了使用主要品牌色作為按鈕背景色的重要性。設計系統不僅在捕獲，而且在闡明戰略設計決策和偏好方面都是有用的。利用這一點來實現一致性和簡單性是至關重要的。
建立了一個顏色系統，不僅定義了使用哪些顏色，還定義了如何在品牌主題中使用它們，我們應該澄清一些用于組織標記的術語。例如，“主題”一詞可以有許多相互矛盾的用法。我將使用Tokens Studio和Figma的數據模型來更清楚地定義主題、模式和令牌集合。
模式是令牌值的一種變體。一個簡單的例子就是明暗模式:
在這個例子中，讓我們創建一個按鈕，它的背景會根據主題的模式而改變。在淺色模式下，背景應該是primary 400，但在深色模式下，它應該切換到較暗的顏色，比如primary 100，讓文本突出。盡管語義令牌名稱保持不變(background-primary)，但它引用的值會根據模式而變化。這個概念被稱為“模式”——根據上下文表示不同值的單個令牌。
讓我們看看這個概念是如何在Figma和代碼中實現的。
你可以看到Figma變量現在有了這個額外的維度——一個變量不僅僅只有一個值;它可以有一個值用于亮模式，另一個用于暗模式。當我們將其轉換為CSS時，我們可以使用上下文感知來定義樣式邏輯。
在CSS中，可以在根范圍內將light值設置為默認值，允許background-primary引用primary 400。為了引入對暗模式的支持，我們可以創建一個額外的類，當這個類被應用時，它將引用更改為primary 100。這種方法允許您通過調整應用于父元素的類來在淺色和深色主題之間切換。
模式是令牌的一個強大功能，但它們不是通用的。例如，你通常不會基于深色模式改變排版——它與視覺環境的關系與顏色的關系不同。模式應用于稱為集合的令牌子集。在Figma中，這些被稱為變量集合，表示帶有特定模式的令牌組。該集合中的每個變量將共享相同的模式。
這導致了在Figma中創建不同系列的實踐，每個系列都專注于設計系統的不同方面。例如，顏色集合可以包含不同的模式，例如淺色和深色主題，而排版集合可能不需要模式，但可能根據斷點或其他設計標準而變化。讓我們把這個添加到我們的系統中:
模式表示總令牌的集合或子集中的變化。那么什么是主題呢？在此上下文中，主題是將所有令牌完全復制到可以具有不同值的單獨集合中。當您需要不同的風格或外觀(例如不同的品牌標識)，同時保持相同的標記結構層次結構時，主題非常有用。例如，如果您正在為兩個不同的品牌創建一套設計系統組件，那么您可能需要完全不同的令牌值，但底層結構保持一致。目前，Figma本身并不支持這種級別的主題復制。然而，令牌工作室允許您管理主題，甚至在Figma中切換主題。
這種靈活性對于與多個品牌合作或需要創建高度適應性設計系統的設計師和開發人員來說非常有價值。想象一下，在代碼中制作一個按鈕，每個品牌都可以通過簡單地改變自己的品牌令牌表中的值將其放入頁面中。這就是組件令牌發揮作用的地方。
現在我們已經定義了令牌、模式、集合和主題，接下來讓我們探索一下如何構建這些概念。標記的W3C標準沒有顯式地識別集合、模式或主題，因此這些概念通常是從文件組織和標記結構派生出來的約定。
以下是該數據模型的可視化方式:
下面是它在偽代碼中的樣子:
讓我們回顧一下我們的組件，以演示語義系統如何與硬編碼系統和純原語令牌系統進行比較。想象一下參與關于這三種方法中的每一種的對話，您將開始理解每種系統的含義。
使用硬編碼的版本，你可能會發現自己需要把東西寫下來——有很多東西需要跟蹤。原始代幣系統是一種改進，允許進行更抽象的討論，盡管仍然存在大量的模糊性。
例如，在交流特定的數值時，它們可能沒有多少固有的含義。然而，語義系統感覺直觀和對話。你可能會說，“讓我們使用默認顏色，用柔和的標題使它突出，在這里只使用常規填充。”
這種方法不僅感覺很自然，而且還簡化了溝通過程，使您感覺正在進行真正的對話，并且可以很容易地在代碼實現中驗證其正確性。
在將我們的基本令牌系統構建為語義令牌和原語并添加模式之后，我們開發了一個結構化網格，可以很容易地被您的團隊引用和使用。除此之外，我們還設計了一個基本的代碼架構，可以用JSON捕獲，使用Style Dictionary等工具進行轉換，并在Figma中同步導出為CSS和Swift等格式。
盡管基本的令牌處理看起來很簡單，但是您可以開始理解在中間使用轉換器的好處。這些工具自動處理復雜的任務，如解析別名，并提供通過創建CSS類來改變模式的功能。這種自動化有助于維護一致的設計系統，而不需要手動調整或復雜的編碼。
這是該架構的最終可視化，但強調輪轂和輻條模型:
令牌位于該體系結構的中心，充當基礎數據。轉換器將它們封裝起來，生成各種輸出，如XML、Swift和CSS，并同步Figma變量。這種結構允許設計系統從單一來源產生多種格式，確保跨不同平臺和應用程序的一致性。
這個架構的一個警告是，Figma可能會將更改推回令牌集，如果核心令牌JSON不被編輯，甚至會被認為是事實的來源。如果您希望授權設計人員直接進行更改并定義令牌的實際選擇，這可能是一種有價值的方法。它允許更多的靈活性和設計驅動的過程，并且可以通過Figma的REST或插件API來完成。
盡管關于設計代幣的討論已經進行了十多年，但感覺它們并沒有像JavaScript框架或Figma這樣的UX設計工具這樣強大的技術那樣發展壯大。
這個挑戰很大程度上源于很難看到并捕捉到建立一個涵蓋設計師和開發人員的復雜系統所帶來的價值。即使是令牌標準也在笨拙中掙扎，并且在不依賴特殊約定的情況下無法捕獲基本數據結構。
以前，避免創建設計代幣可能是可行的，但兩個關鍵的發展已經顯著改變了這種情況：設計工具的進步和設計系統中的人工智能。
Figma和Tokens Studio等工具徹底改變了我們在設計工具中實現強大、可行的令牌系統的能力，這些工具與您的源代碼緊密相連。它們可以完成作為源文件的任務。雖然仍在發展，但改進的步伐是迅速而實質性的(而不是“人工智能將駕駛你的汽車”的感覺)，并最終將推動W3C和相關工具向前發展。
設計系統本質上是重復的，旨在使設計具有可預測性并澄清模糊性——這與人工智能完美匹配。人工智能將改變設計系統的構建方式，從擁有豐富經驗的大型團隊轉移到能夠快速交付定制的、強大的設計系統和組件的更精簡的小型團隊。
然而，AI并不會神奇地糾正設計系統中的缺陷。它從大型數據集中進行推斷，這意味著它將擴大和擴展現有的基礎結構，并彌補缺失的部分。有了堅實的設計令牌基礎和系統的應用方法，讓AI擴展你的設計系統不僅有效，而且很快就會成為你的競爭對手。
原文鏈接：https://www.contentful.com/blog/design-token-system/
