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