令牌桶生成令牌

“It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire lifecycle.”

“過去，設計師制造了一個物體然后走開了。 今天，重點必須轉向設計整個生命周期。”

Paul Saffo — technology forecaster

Paul Saffo-技術預測員

什么是設計令牌？ (What is Design Token?)

The central place where tiny pieces of UI information will be used across several platform during the conception of a digital product which are design tokens. The concept was created by Salesforce and name comes from Jina Anee. Design token(DT) allows product team to better collaborate and ensure brand consistency across any platform.

在作為設計令牌的數字產品概念期間，將在多個平臺上使用少量UI信息的中心位置。 該概念由Salesforce創建，名稱來自Jina Anee 。 設計令牌(DT)使產品團隊可以更好地協作，并確保任何平臺上的品牌一致性。

DT are also design decisions, represented as data, that ensure systematically unified and cohesive product experiences.

DT也是以數據表示的設計決策，可確保系統地統一和凝聚力的產品體驗。

Design Tokens are visual atoms of the design system — specifically, they are named entities that store visual design attributes.

設計令牌是設計系統的視覺原子-具體地說，它們是存儲視覺設計屬性的命名實體。

We use then in place of hard-coded values in order to maintain a scalable and consistent visual system.

然后，我們將使用替代硬編碼的值來維護可擴展和一致的視覺系統。

Jina @jina

吉娜@jina

設計令牌的類型？ (Types of Design Tokens ?)

Following are the types of DT which are the building blocks and design decision that make up our design language.

以下是DT的類型，它們是構成我們的設計語言的構建塊和設計決策。

全球通證： (Global Token:)

They are the primitive values in our design system, they are represented by context-agnostic names. Typography, color pallet, animation values are all stored as a global token. These values can be directly used, and are inherited by all other type of token.

它們是我們設計系統中的原始值，由與上下文無關的名稱表示。 印刷術，調色板，動畫值都存儲為全局標記。 這些值可以直接使用，并且可以由所有其他類型的令牌繼承。

別名令牌： (Alias Token:)

These token relate to a specific context or abstraction. Aliases helps us to communicate the intended purpose of the token and are much effective when a value with a single intent will appear in multiple places.

這些標記與特定的上下文或抽象有關。 別名有助于我們傳達令牌的預期目的，并且當具有單一意圖的值出現在多個位置時，別名將非常有效。

特定于組件的令牌： (Component-specific token:)

These type of token are an exhaustive representation of every value associated with a component. They often inherit from alias tokens, but are named in such a way that it allows engineering teams to be as specific as possible in applying token in development of the components.

這些類型的令牌是與組件關聯的每個值的詳盡表示。 它們通常從別名令牌繼承，但是它們的命名方式使工程團隊可以在將令牌應用于組件開發時盡可能地具體。

設計令牌如何工作？ (How Design Token Works?)

We can place token into our Design System(DS) to the elements like Sizing, Font Families, Font Styles, Font Weights, Font Sizes, Line Heights, Border Styles / Colors / Radius, Horizontal Rule Colors, Background Colors, Gradients, Background Gradients, Box Shadows, Text Colors, Text Shadows, Time, Media queries, Z-index, Icons to name some few.

我們可以將令牌放置到我們的設計系統(DS)中，以找到諸如大小，字體系列，字體樣式，字體粗細，字體大小，線條高度，邊框樣式/顏色/半徑，水平規則顏色，背景顏色，漸變，背景漸變等元素，框陰影，文本顏色，文本陰影，時間，媒體查詢，Z索引，圖標等。

In a DS, we generally use especial entities called “design-tokens” to store the design decisions. These entities are in the shape of key and value pairs which are served in file format like JSON or YAML. These files are later used as inout files, processed and transformed to generate different output files. With these enabled to us we can maintain and scale our design across all the permutations.

在DS中，我們通常使用稱為“設計令牌”的特殊實體來存儲設計決策。 這些實體采用鍵和值對的形式，以JSON或YAML等文件格式提供。 這些文件以后用作inout文件，經過處理和轉換以生成不同的輸出文件。 啟用這些功能后，我們可以在所有排列范圍內維護和擴展我們的設計。

Design token for dummies article傻瓜設計令牌文章

This diagram reflects how an ideal workflow looks like implementing DT in action. A designer makes the design decision into his choice of tool. The tool has its plugin and API which provides us with the key/value pairs in the format of YAML/JSON format. These can also be generated with loads of tools available online like Theo, Gulp Task, Dragoman, Postcss-map plugin, Style dictionary, Tools. The generated files can be served to the developers with dynamic values from our design tools which can be built to make products into different devices everywhere.

該圖反映了理想的工作流程看起來像在實踐中實現DT的樣子。 設計師將設計決策納入他選擇的工具中。 該工具具有其插件和API，可為我們提供YAML / JSON格式的鍵/值對。 這些也可以使用在線提供的大量工具生成，例如Theo ，Gulp Task， Dragoman ，Postcss-map插件， Style字典 ， Tools 。 可以使用我們設計工具中的動態值將生成的文件提供給開發人員，該工具可以用來將產品制作到各地的不同設備中。

This links between our design and developments tools would allow design teams to update core styles in their design tool and see the result automatically synchronized the whole design development ecosystem.

設計和開發工具之間的這種聯系將使設計團隊能夠更新其設計工具中的核心樣式，并看到結果自動同步整個設計開發生態系統。

design-token/community-group設計令牌/社區組

實施設計令牌 (Implementing Design Token)

In this demo we will be covering just a single design element in our DS. The element would be Typography. We will be using Figma API and a plugin named Styled Dictionary which will help us to convert our token data which are base colors, typography, spaces, box shadow etc. in a single JSON file to design tokens.

在本演示中，我們將僅介紹DS中的單個設計元素。 元素將是“版式”。 我們將使用Figma API 和一個名為 樣式字典 這將幫助我們在單個JSON文件中轉換基本數據，版式，空格，框陰影等令牌數據來設計令牌。

We will first make an empty folder and install our plugin, and do our API call with the help of provided Figma developer API.

我們首先將創建一個空文件夾并安裝插件，然后在提供的Figma開發人員API的幫助下進行API調用。

yarn init
yarn add style-dictionary

The above command will set an empty package.json file with our required package style-dictionary.

上面的命令將設置一個空的package.json文件，其中包含我們所需的package style-dictionary。

const axios = require("axios");async function getFigmaObjTree(figmaApiKey, figmaId) {
axios.get('https://api.figma.com/v1/files/' + figmaId, {
headers: {
"X-Figma-Token": figmaApiKey,
"Content-Type": "application/json"
}
})
.then(res => {
let result = res.data;console.log(result);
})
.catch(err => {
console.log('errors');
console.log(err);
});
}getFigmaObjTree('******figmaAPIKEY******', '****FigmaID****');

We here pulled data from the Figma API. But, unfortunately, Figma doesn’t provide values inside each style only type and name.

我們在這里從Figma API中提取了數據。 但是，不幸的是，Figma并沒有在每個樣式類型和名稱中提供值。

So, we will get only typography from our artboard here. Lets take a look at screen recording below:

因此， 在這里我們只能從畫板上得到字體。 讓我們看一下下面的屏幕錄像：

After we pulled our data from the API what we did was placed our base.json file created into our src. And we ran our next command in our terminal to get the token into sass files with command below:

從API提取數據后，我們將創建的base.json文件放入了src中。 然后，我們在終端中運行下一個命令，使用以下命令將令牌放入sass文件中：

yarn build

Then with the above command we have our build ready which have been converted to Sass file. The code we have is as below:

然后，使用上述命令，我們已經準備好將其轉換為Sass文件的構建。 我們擁有的代碼如下：

const StyleDictionary = require("style-dictionary").extend({source: ["src/**/*.json"],platforms: {sass: {transformGroup: "scss",buildPath: "stylesheets/",files: [{destination: "_typography.sass",format: "scss/variables",filter: {type: "type"}}]}} });StyleDictionary.buildAllPlatforms();

結論 (Conclusion)

DT creation processDT創建過程

DT are the central source of truth for our tiny UI information to store, design and relate information such as Colors, fonts, spaces, animation etch. By embedding DT into our design tools we can leverage maintenance, reliability, organization and scalability of our DS. With the DT in place we will have following benefits

DT是我們微小的UI信息存儲，設計和關聯諸如顏色，字體，空格，動畫蝕刻之類的信息時，真理的主要來源。 通過將DT嵌入我們的設計工具中，我們可以利用DS的維護，可靠性，組織性和可擴展性。 有了DT，我們將獲得以下好處

• Use Token as variables.
  使用令牌作為變量。
• Design decision applied to context.
  設計決策適用于上下文。
• Reusable data in dynamic form across multiple platforms.
  跨平臺以動態形式可重復使用的數據。
• Design decision are propagated through a system.
  設計決策通過系統傳播。
• Managing and reading tokens from a central place.
  從中央位置管理和讀取令牌。
• Keep whole ecosystem in sync.
  使整個生態系統保持同步。

Using DT is here to solve many problems and obvious create new ones. The endless back and fourth between designers and developer to update our code time a design makes changes has been simplified. This affords designers the same flexibility that a developer has in a dev environment, allowing for a quick, easy exploration of DT updates and ability to roll out without any change in code or time consuming frequent deployments. I would highly encourage using DT in your current DS to make lives easier for ourselves.

在這里使用DT解決了許多問題，并且明顯地創造了新的問題。 在設計人員和開發人員之間不斷更新和更新代碼的時間，簡化了設計更改。 這為設計人員提供了與開發人員在開發環境中相同的靈活性，從而允許快速，輕松地瀏覽DT更新，并能夠在不更改任何代碼或不花費大量時間的頻繁部署的情況下進行部署。 我強烈建議您在當前的DS中使用DT，讓自己的生活更輕松。

Please find the link for working code in my GitHub repository link here.

請找到鏈接，在我的GitHub庫環節的工作代碼在這里 。

推薦參考 (Recommended references)

演示地址

演示地址

Note: This article is inspired from the workflow by Pavel Laptev generating design token with figma.

注意：本文的靈感來自于 Pavel Laptev 使用figma生成設計令牌 的工作流程 。

翻譯自: https://uxdesign.cc/design-tokens-how-to-use-them-effectively-d495ff05cbbf

令牌桶生成令牌

總結

以上是生活随笔為你收集整理的令牌桶生成令牌_设计令牌如何有效使用令牌的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。