Figma 語意化的 Design Tokens ，先說顏色

前言

打造具有邏輯的 Figma 顏色命名體系，是提高設計效率並增添專業感的關鍵一環。

這不僅是優化工作流程的實用方式，更是為你的設計注入有條理的美感。

原子顏色 (Atomic Color)

原子顏色(Atomic Color) 是指在設計系統或品牌中事先定義好的基本顏色。這些顏色就像化學中的原子是物質的基本構成單位一樣，是整個設計中不可或缺的元素。

這些顏色通常經過精心挑選和定義，以確保在設計中保持一致性和協調性。原子顏色的命名可能基於其具體的視覺特徵，也可能反映了品牌或設計系統的價值觀。設計師在使用原子顏色時，可以更輕鬆地建立一致性和專業性的設計，同時降低了設計的複雜性。

原子顏色集(Atomic Color)，以點綴之法彰顯品牌獨特之色彩風采。

如何製作語意化的顏色命名？

顏色的語意名稱為原子顏色在整個系統中的使用方式定義了清晰的方向，例如前景.主色。

原子顏色採用更實用的名稱，如藍色.50、藍色.99，相較於 #347DB2 更容易記憶。

這些原子名稱並非僅僅是一串數字，而是提供實際使用資訊的有力指引。

「這個顏色是主按鈕的背景色還是焦點狀態的邊框顏色？」若使用語意命名，這樣的問題將迎刃而解。

語意命名不僅適用於顏色，對所有其他基本樣式同樣至關重要。

如何讓原子顏色轉換成語義化

在語義化設計的過程中，語義名稱並不是要取代原子顏色名稱，而是將兩者進行關聯，以便更清晰地表達設計元素的含義和用途。

原子顏色被附加到語義名稱上，這樣你就可以更改與特定語義名稱相關聯的原子顏色，而不會影響到設計系統中其他元素的顏色。

這種方式使得設計系統更具靈活性，並且易於維護和修改。這就像是給每種顏色賦予了一個特殊的身份，讓它們在設計中扮演著各自的角色，從而提升了設計的一致性和可讀性。

當更改原子顏色時，該顏色相關聯的語義顏色值以及使用該顏色的所有組件都會自動更新。

舉例來說，你可以看到我們將「紫色.500」更改為「綠色.600」後，相關的語義顏色也會自動更新。

一旦語義顏色名稱建立起來，它們就不應該經常被更改。例如，如果你想創建一種深色模式，你只需要更改與原子顏色的關聯即可。

這種方式讓你的設計系統更具靈活性，並且易於維護和修改。你不再需要記住每一種顏色的碼，只需要記住它們的語義名稱，就可以輕鬆地進行設計工作。

如何設計 Design Tokens

語意化顏色命名，有許多不同的策略，也需要多和開發團隊溝通好，因為他們將在程式碼中使用這些名稱。

Figma 結構是如何呢？

元件名稱是設計檔案盡可能與程式碼對齊，在如何命名樣式非常重要。開發通常喜歡小寫命名，但在需要使用多個單字時，可能會看到駝峰命名法（Camel case）、烤肉串式命名(Kebab Case) 或 蛇型命名（Snake case）。

名稱之間的句點相當於在Figma 中建立樣式資料夾結構時使用的反斜線/。

Design Tokens 分的 3類型

設計參考Bootstrap、Atlassian 的做法使用最近看一篇文章，去中心化或許也是一個不錯的方式，當然也可以做屬於公司最好的 Design Tokens

製作 Design Tokens 時，研究了其他設計系統 ( Atlassian 、 Material 、Bootstrap )，裡面 Bootstrap、Atlassian 參考得最多

大概分成 3個類型

• 前景色 (Foregrounds)文字、圖示和位於背景之上的任何元素
• 背景色 (Backgrounds)各個UI 元素與整個內容部分或主體的背景顏色
• 邊框色 (Borders)單一UI 元素的描邊或輪廓顏色

在 Figma 的 Variables 設定裡也可以設定只有做什麼行為才能看到所設定的顏色

組件的設計

在上述範例中，我們展示了一個屬於「系統」類別下的「成功」子類的 toast。我們仍然使用主要和次要顏色來設定文本內容的顏色，並使用第三種顏色來設定圖標按鈕的顏色。

然而，我們也可以使用「系統成功」的顏色來設定文本內容的顏色，這完全沒有問題。由於圖標按鈕是一個嵌套的互動式元件，已經有自己的樣式，因此我們不需要更改它的顏色。

不同情境的命名

使用 foreground.system.success 而非 foreground.feedback-banner.success 。

這是因為這些精確的樣式將被多種類型的回饋元件所使用，例如在頁面中嵌入的提醒或警告訊息。

設計師可能需要自訂的元件，如果我們使用元件特定的命名方式，可能會讓他們感到困惑，不確定應該使用哪些樣式。

因此，需要使用更靈活、一致且可擴展的語義化命名方式，以便更好地管理和使用顏色樣式。

詳細分析這些類別，能幫助系統定義樣式，每個系統都有不同的基本樣式，因此最終的結果會有所不同，但原理是相通的。

通用系統色

有些顏色樣式適用於多種元件，若未特別指定，將採用系統範疇的顏色樣式。

互動式元件如次要按鈕，會選擇使用「foreground.primary」前景主要，而非「foreground.interactive.secondary.default」前景互動次級預設，因無需求。

或許只透過背景顏色來反映狀態，但若系統希望透過次要按鈕的額外前景色變化來顯示狀態，則需加入這些特定樣式。

特定的顏色樣式，意圖或用途

如果某種風格並未在整體系統中被採用，則會在第二級定義其意圖或用途。此第二級通常涵蓋互動、輸入控制、系統以及強調。

1. 互動元件

以按鈕為例，為何不直接稱其為按鈕呢？這是因為未來可能會有其他自訂的互動方式，會採用相同的風格。

這些按鈕進一步分為主要、次要、第三級和第四級。

每個等級都有其自身的狀態，包括預設、滑過、焦點、禁用。所有已停用的元件都採用相同的風格，因此它們使用的是系統範圍的禁用顏色風格。

2. 控制組件

輸入控制與輸入的風格相同，若不是，可以將其分解。輸入包含文字、選擇器、日期控制項、搜尋、文字網域、模糊處理等。輸入控制包含單選、複選框、切換、輸入步進器、滑桿等。

這些都將具有未選擇和選擇狀態，它們有自己的預設、懸停、焦點和按下狀態。系統風格將用於其錯誤和停用狀態。

3.系統樣式

系統風格用於所有系統元件，而嚴重性狀態則用於互動式元件。這將包括toast，內聯提醒，輸入錯誤等。

它們的狀態是資訊、成功、警告和錯誤。通常，錯誤將具有預設、懸停、焦點和按下狀態，因為在這些情況下使用者總是需要操作。

4.品牌色

這個範圍相當廣泛，由品牌內部所使用的次要色彩所組成。

此範圍為所謂的「品牌特色」所保留。這讓設計師在設計過程中，具有創新與靈活的空間。

這四個類別，再加上系統範疇的風格，涵蓋了設計系統所需的所有基本元素。

結論

在製作設計系統的需求都不同，所以要依照自己和團隊的需求來決定。

1. 原子顏色就是顏色的初始版本，而語意名稱則是給顏色取的名字
2. 在顏色的命名上，要和開發一起商量一個方法
3. 所有顏色樣式都可以分為三類：前景，背景和邊框
4. 互動元素、元件、整體系統，同時也有更具體的樣式
5. 詳細記錄每個特定顏色樣式的不同狀態，例如預設狀態、懸停狀態、聚焦狀態、按下狀態、啟動狀態