Since implementing their design system, the Habits team has seen more consistency in designs and no longer debates endlessly over which standards to use.

自實施設計系統以來，Habits 團隊的設計更加一致，不再為使用哪種標準而爭論不休。

However, the Habits app is evolving and growing.

不過，Habits 應用程序正在不斷髮展和壯大。

After discovering that their users track their habits before bed, the team wants to add a dark theme to ease tired eyes.

在發現用戶會在睡前跟蹤自己的習慣後，團隊希望添加一個深色主題，以緩解眼睛疲勞。

While the spatial system has sped up the design process and solved alignment issues, the team struggles to keep track of which border radius and spacing values to use.

雖然空間系統加快了設計過程並解決了對齊問題，但團隊卻很難跟蹤使用哪種邊界半徑和間距值。

This has led to an unpredictable and inconsistent user experience.

這導致用戶體驗無法預測且不一致。

And, they're adding new teammates and features and want a more efficient way to manage changes and improve accuracy during the handoff process.

而且，他們正在增加新的隊友和功能，希望有一種更有效的方式來管理變更，並提高交接過程中的準確性。

Kai has been learning about design tokens and believes that this could be the next step in supporting scalability of the Habits design system.

Kai 一直在學習設計代幣，他認為這可能是支持 Habits 設計系統可擴展性的下一步。

The benefits of design tokens are very similar to that of design systems.

設計代幣的好處與設計系統非常相似。

They're a source of truth that maintains consistency between design and code.

它們是保持設計和代碼一致性的真理之源。

They improve management of a scaling design system.

它們改善了擴展設計系統的管理。

And they remove the guesswork when building products and help you build more efficiently.

它們消除了您在製造產品時的猜測，幫助您更高效地製造產品。

But what exactly are design tokens?

但設計代幣到底是什麼呢？

How might this help the Habits team?

這對 Habits 團隊有什麼幫助？

Design tokens are a method for managing design properties and values across a design system.

設計代幣是一種在設計系統中管理設計屬性和值的方法。

Each token stores a piece of information, such as color, sizing, spacing, font, animations, and so on.

每個標記都存儲了一條資訊，如顏色、大小、間距、字體、動畫等。

To make them easier to refer to, each token also gets a name.

為了方便查閱，每個標記都有一個名稱。

The tokens can be reused across your designs and become a source of truth and shared language between design and code.

這些標記可以在設計中重複使用，併成為設計和代碼之間的真實來源和共享語言。

For example, Kai recently handed a design file to a developer that contained spacing values of 25 points.

例如，Kai 最近交給開發人員的設計文件中包含 25 點的間距值。

However, the Habits codebase uses an 8-point spatial system.

不過，Habits 代碼庫使用的是 8 點空間系統。

The developer assumed this was intentional and updated the codebase with the new designs.

開發人員認為這是有意為之，並根據新設計更新了代碼庫。

Oops!

哎呀

Kai actually meant to have spacing values of 24 points, but their file was set up incorrectly.

實際上，Kai 的意思是間距值為 24 點，但他們的文件設置不正確。

If the team used tokens, the design file would have included information on which spacing token to use.

如果團隊使用代幣，設計文件中就會包含使用哪種間距代幣的資訊。

The spacing token would point to a value that's already confirmed to be correct, preventing errors and ambiguity.

間距標記將指向一個已被確認為正確的值，從而避免錯誤和歧義。

In addition to having a reliable source of truth, using tokens means that updating our designs and design system becomes faster and more efficient.

除了擁有可靠的真實來源之外，使用代幣還意味著更新我們的設計和設計系統變得更快、更高效。

For example, say the Habits team has this color token being used in different areas of the product.

例如，"習慣 "團隊在產品的不同區域使用了這種顏色標記。

If they changed the value of this color token, then every asset using the token will change too.

如果他們更改了該顏色標記的值，那麼使用該標記的所有資產也會隨之更改。

This can be useful like when changing a color system for a product rebrand.

例如，在為產品重塑而改變顏色系統時，這一點就很有用。

However, what if they only wanted the values of some assets to change?

但是，如果他們只想改變某些資產的價值呢？

Currently, they'd have to remap these values one by one to a different token.

目前，他們必須將這些值逐一重新映射到不同的標記上。

This isn't a problem if only a few assets need updating, but if many assets had to be updated, the Habits team would need a lot more time and resources.

如果只有少數資產需要更新，這不是問題，但如果有許多資產需要更新，Habits 團隊就需要更多的時間和資源。

This is where aliasing comes in.

這就是別名的由來。

Aliasing allows any token to reference or take on the value of another token.

別名允許任何標記引用或接受另一個標記的值。

If a token changes, then any token referencing it will update as well.

如果某個標記發生變化，那麼引用它的任何標記也會隨之更新。

But how does this solve the Habits team problem?

但這又如何解決 Habits 團隊的問題呢？

Well, aliasing lets you neatly organize tokens into categories, subcategories, and so on.

那麼，別名可以讓你將標記整齊地組織成類別、子類別等。

The categories communicate how a token is used.

這些類別傳達了令牌的使用方式。

If Habits had their tokens set up correctly, they'd be able to quickly update any category and all associated tokens downstream would get updated without unintentionally affecting others.

如果 Habits 正確設置了代幣，他們就能快速更新任何類別，下游所有相關代幣都會得到更新，而不會無意中影響到其他類別。

There's no limit to how far a series of token references can go.

一連串的象徵性引用是無限的。

And no limit to how many times a single token can be referenced, allowing us to create complex design token structures.

而且，單個標記的引用次數不受限制，讓我們可以創建複雜的設計標記結構。

Keep in mind aliasing isn't always necessary, especially for assets like fonts and animations.

請記住，別名並非總是必要的，尤其是對於字體和動畫等資產。

After realizing the benefits, the Habits team decided to implement design tokens in their system.

在認識到這些好處之後，Habits 團隊決定在其系統中使用設計代幣。

Before they jump in, they want to understand how tokens are organized.

在加入之前，他們想了解代幣是如何組織的。

The most common structure of design tokens starts with the foundation of values called primitive tokens.

最常見的設計代幣結構是從稱為原始代幣的數值基礎開始的。

From there, you can build on top of your foundation with semantic tokens and component-specific tokens.

在此基礎上，您可以使用語義標記和特定於組件的標記。

Each type communicates a what, how, and where about the token.

每種類型都傳達了關於標記的內容、方式和地點。

Let's take a closer look at each one, starting with our foundation.

讓我們從我們的基礎開始，逐一進行詳細瞭解。

Primitive tokens tell us what properties and values exist within our designs.

原始標記告訴我們設計中存在哪些屬性和值。

Also known as global tokens, they define every value in a property system.

也稱為全局標記，它們定義了屬性系統中的每個值。

For example, primitive color tokens would include every color used in the app and its brand, while primitive spacing tokens would include all padding, margin, and spacing between values.

例如，原始顏色標記將包括應用程序及其品牌中使用的每種顏色，而原始間距標記將包括所有填充、邊距和值之間的間距。

Note that primitive tokens are reference only.

請注意，基元代幣僅供參考。

They are the foundation for other tokens to build from but are never applied directly in designs.

它們是其他代幣的基礎，但從不直接應用於設計中。

Semantic tokens, however, can be applied to designs.

不過，語義標記可以應用於設計。

Semantic tokens gives us context on the how the token should be used.

語義標記為我們提供瞭如何使用標記的上下文。

As no ted in lesson 2, assets with semantic names convey meaning, purpose, and how and where the asset should be used.

正如第 2 課所述，具有語義名稱的資產傳達了資產的含義、目的以及使用方式和地點。

For example, the token surfaced brand contrast references a primitive token called pink 400.

例如，"浮出水面的品牌對比 "引用了一個名為 "粉紅 400 "的原始標記。

It takes on whatever value pink 400 is set to.

粉紅 400 設置為什麼值，它就會變成什麼值。

Surface tells us that it should be used for an object's background color.

Surface 告訴我們，它應該用於對象的背景顏色。

Brand tells us that the color is central to the app's identity.

品牌告訴我們，顏色是應用程序識別的核心。

And contrast tells us that this color is saturated and should be used to grab a user's attention.

對比度告訴我們，這種顏色飽和度高，應該用來吸引用戶的注意力。

Lastly, we have component-specific tokens, which provide us even more specificity on usage by telling us where a token is used.

最後，我們還有特定於組件的令牌，它通過告訴我們令牌在哪裡使用，為我們提供了更具體的使用情況。

And yep, they're used directly in designs too.

是的，它們也直接用於設計中。

Say we have a set of buttons, primary and secondary, each with a state, default, hover, and inactive.

假設我們有一組主要和次要按鈕，每個按鈕都有默認、懸停和非活動狀態。

We could create a token for each one.

我們可以為每個人創建一個標記。

Button primary, for example, could reference surface brand contrast, since primary buttons should grab a user's attention.

例如，"主按鈕 "可參考表面品牌對比，因為主按鈕應能吸引用戶的注意力。

The token for this could look something like button, primary, background, default.

標記的內容可以是按鈕、主要內容、背景、默認值。

The rest of the button's tokens would follow the same format, asset, type, property, state.

按鈕的其他標記也將遵循同樣的格式：資產、類型、屬性、狀態。

This level of tokens is detailed and more might not be necessary for everyone.

這一級別的代幣很詳細，可能不是每個人都需要更多。

Design token structures should always begin with the foundation of primitive tokens.

設計代幣結構應始終以原始代幣為基礎。

Beyond that is entirely up to the unique needs of your system and organization.

除此之外，完全取決於您的系統和組織的獨特需求。

You might only need semantic tokens or component-specific tokens added on.

您可能只需要添加語義標記或特定組件標記。

You might need both in any order that you need.

您可能需要按照任何順序同時使用這兩種設備。

They could be on the same level.

他們可能處於同一水平線上。

You might even want to have multiple levels of each type.

您甚至可能希望每種類型都有多個級別。

Whatever the format, take the time to thoughtfully plan what your token structure will look like.

無論採用哪種形式，都要花時間深思熟慮地規劃象徵性結構的外觀。

This will save hassle in the long run, as any future restructures could require significant time and effort.

從長遠來看，這將省去很多麻煩，因為未來的任何重組都可能需要大量的時間和精力。

Now that we've gotten a better grasp on design tokens, let's check back in with the Habits team.

既然我們已經對設計代幣有了更好的瞭解，讓我們再來看看 Habits 團隊的情況。

They decided to set up both semantic and component-specific tokens on the same level.

他們決定在同一層面上設置語義標記和特定組件標記。

Since their design system already lives in Figma, they can use two key Figma features to implement their tokens, styles and variables.

由於他們的設計系統已經存在於 Figma 中，是以他們可以使用 Figma 的兩個關鍵功能來實現他們的標記、樣式和變量。

Before we continue, check out our resources on styles and variables to get an understanding of how they work.

在我們繼續之前，請查看我們關於樣式和變量的資源，瞭解它們是如何工作的。

You might be wondering, why should the Habits team use both styles and variables?

你可能會問，為什麼 Habits 團隊要同時使用樣式和變量？

Variables can support complex token structures because they can be used to define other variables and styles.

變量可以支持複雜的標記結構，因為它們可以用來定義其他變量和樣式。

They can also support multiple modes for theming, scoping for specifically where a variable can be used, and code syntax for a better handoff experience.

它們還可以支持多種模式的主題化、針對變量的具體使用範圍以及代碼文法，以獲得更好的交接體驗。

Meanwhile, styles can support color gradients and composite values, like multiple fills or multiple shadow effects.

同時，樣式可以支持顏色漸變和複合值，如多重填充或多重陰影效果。

For many, implementing design tokens means a combination of styles and variables.

對許多人來說，實施設計標記意味著樣式和變量的結合。

To get more insight on the difference between styles and variables, check out the article linked below.

要進一步瞭解樣式和變量之間的區別，請查看下面鏈接的文章。

Kai is interested in diving into migrating colors first.

小凱有興趣先深入研究遷徙的顏色。

If you followed along in lesson 3, you'll know that the Habits app color system is connected to color styles, each organized by their purpose or usage.

如果你學過第 3 課，就會知道 Habits 應用程序的顏色系統與顏色樣式相關聯，每種顏色樣式都按其目的或用途排列。

The Habits team decided to migrate all of their color styles to variables except for one gradient, which they'll keep as a style since variables can't capture gradients.

Habits 團隊決定將所有顏色樣式遷移到變量中，只有一種漸變色除外，因為變量無法捕捉漸變色，所以他們將保留這種樣式。

They create a new variables collection called Primitives for their primitive tokens and copy each color value over.

它們為基元代幣創建一個名為 Primitives 的新變量集合，並將每個顏色值複製過來。

Each color variable is organized by their base color.

每個顏色變量都按基色排列。

Within each base color, a ramp is created based on their tint and shade using a numbering system.

在每種基色中，根據它們的色調和色度，使用編號系統創建一個斜坡。

The more white a base color contains, the lower its number.

基色中含有的白色越多，其編號就越低。

The more black it contains, the higher the number.

黑色越多，數字越大。

Tip!

小貼士

To prevent primitive tokens from being used directly in designs, you can scope and hide them from getting published to team libraries.

為防止在設計中直接使用原始標記，可以對其進行範圍設置和隱藏，使其不會發布到團隊庫中。

From the Primitives collection, select all the variables, right-click, and choose Edit Variables.

從 "基元 "集合中選擇所有變量，右擊並選擇 "編輯變量"。

From the Edit modal, uncheck the Show in all supported properties box and check the Hide from publishing box.

在 "編輯 "模塊中，取消選中 "在所有支持的屬性中顯示 "複選框，並選中 "從發佈中隱藏 "複選框。

Next, they want to direct how and where the colors can be used, so they create a second variables collection called Tokens for their semantic and component-specific tokens.

接下來，他們要指導如何以及在何處使用顏色，是以他們創建了第二個變量集合，名為 "標記"（Tokens），用於存放特定語義和組件的標記。

The team conducted an audit to document every color used in the product and identified a few areas that use color.

團隊進行了一次審核，記錄了產品中使用的每一種顏色，並確定了幾個使用顏色的區域。

Surface, Button, Text, Border, and Icon.

表面、按鈕、文本、邊框和圖標。

Within each area, they further identified color categories like Brand, Toast, User Colors, and more.

在每個區域內，他們進一步確定了顏色類別，如品牌、祝酒詞、用戶顏色等。

From there, they established tokens within each category and gave them names that communicate how or where the color can be used.

在此基礎上，他們在每個類別中建立了代幣，併為其命名，以傳達顏色的使用方式或地點。

For example, a semantic token might include the word Primary to communicate its use on the most common elements or actions on a page.

例如，一個語義標記可能包括 Primary（初級）一詞，以傳達其在頁面上最常見元素或操作上的用途。

Secondary, on the other hand, are for less common elements.

而二級則是針對不太常見的元素。

After creating these tokens, they organize them into variable groups based on their categories and apply them to their designs.

創建這些代幣後，他們會根據代幣的類別將其組織成變量組，並應用到自己的設計中。

Now that our color primitives and semantic tokens are set up, how might they approach Dark Mode?

現在，我們的顏色基元和語義標記都已建立，那麼它們該如何處理黑暗模式呢？

Remember that every semantic and component-specific token is assigned a job and communicates a function.

請記住，每個語義和特定組件的標記都被分配了一項任務，並傳遞著一種功能。

To add a Dark Mode or any other theme, you need to create a separate set of tokens.

要添加黑暗模式或其他主題，需要創建一組單獨的標記。

Within this set, they can change any aliases or references as needed by connecting them to different tokens.

在這一組中，他們可以根據需要更改任何別名或引用，將它們連接到不同的標記。

In Figma Design, the Habits team is able to account for a Dark Mode theme through variable modes.

在 Figma Design 中，Habits 團隊能夠通過可變模式來考慮黑暗模式主題。

They create a new mode in the tokens collection and update references to variables in the primitives collection as needed.

它們會在令牌集合中創建一個新模式，並根據需要更新對基元集合中變量的引用。

And that's it!

就是這樣！

No need to change the names of tokens since they already communicate information on how and where they're used.

無需更改代幣的名稱，因為它們已經傳達了代幣使用方式和地點的資訊。

Changing a design to Dark Mode can be quickly done from the right-side bar.

從右側欄可以快速將設計更改為暗色模式。

The Habits team is all done setting up their color tokens, so they tackle their spatial system using number variables next.

Habits 小組已經完成了顏色代幣的設置，接下來他們將使用數字變量來處理空間系統。

We cover creating number variables for spatial systems more in our Intro to Variables tutorial, so be sure to check it out.

我們將在變量入門教程中詳細介紹為空間系統創建數字變量，請務必查看。

Tips for Naming Tokens If you're ready to set up tokens for your design system, here's a few tips to help you with naming.

代幣命名提示 如果您已經準備好為您的設計系統設置代幣，以下是一些幫助您命名的提示。

Make sure tokens are easy to understand.

確保代幣易於理解。

Creating language-neutral names makes them approachable across different teams.

創建語言中立的名稱可以讓不同的團隊都能使用。

You may want to factor in people from different countries as well.

您可能還需要考慮來自不同國家的人。

Use full words instead of abbreviations.

使用全詞而不是縮寫。

Abbreviations can be unclear and open to interpretation.

縮寫可能不清楚，也可能有歧義。

Be consistent with prefixes.

前綴要一致。

For example, token names for background colors should start with background instead of appearing in a different part of the name.

例如，背景色的標記名稱應以 background 開頭，而不是出現在名稱的其他部分。

Use single or plural names based on the context for which they're being used.

根據語境使用單名或複名。

If you have multiple products or brands, avoid using the brand's name in a token.

如果您有多種產品或品牌，請避免在標記中使用品牌名稱。

Instead, choose a more generic name so that tokens can be used in broader contexts.

取而代之的是，選擇一個更通用的名稱，以便在更廣泛的語境中使用標記。

Future-proof tokens by anticipating potential growth of your design system.

通過預測設計系統的潛在增長，使代幣面向未來。

Token names should be able to accommodate new additions and modifications without causing confusion.

令牌名稱應能適應新的添加和修改，而不會造成混淆。

Now that the tokens are set up to go, Kai and the Habits team are looking forward to building Dark Mode for their users and experiencing the efficiency that this shared language provides.

現在代幣已經準備就緒，Kai 和 Habits 團隊期待著為他們的用戶構建黑暗模式，並體驗這種共享語言所帶來的效率。

Are you ready to dive even deeper into design tokens and variables?

您準備好更深入地瞭解設計代幣和變量了嗎？

Check out our resources below or let us know what you want to learn about next.

請查看下面的資源，或者告訴我們您下一步想了解什麼。

And be sure to like and subscribe to keep up to date with the latest product and community news.

請務必點贊和訂閱，以瞭解最新的產品和社區新聞。

We'll see you in the next one.

我們下期再見。