令牌桶生成令牌

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

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

Paul Saffo — technology forecaster

Paul Saffo-技術(shù)預(yù)測員

什么是設(shè)計令牌？ (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.

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

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

DT也是以數(shù)據(jù)表示的設(shè)計決策，可確保系統(tǒng)地統(tǒng)一和凝聚力的產(chǎn)品體驗。

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

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

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

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

Jina @jina

吉娜@jina

設(shè)計令牌的類型？ (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的類型，它們是構(gòu)成我們的設(shè)計語言的構(gòu)建塊和設(shè)計決策。

全球通證： (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.

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

別名令牌： (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.

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

特定于組件的令牌： (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.

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

設(shè)計令牌如何工作？ (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.

我們可以將令牌放置到我們的設(shè)計系統(tǒng)(DS)中，以找到諸如大小，字體系列，字體樣式，字體粗細，字體大小，線條高度，邊框樣式/顏色/半徑，水平規(guī)則顏色，背景顏色，漸變，背景漸變等元素，框陰影，文本顏色，文本陰影，時間，媒體查詢，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中，我們通常使用稱為“設(shè)計令牌”的特殊實體來存儲設(shè)計決策。 這些實體采用鍵和值對的形式，以JSON或YAML等文件格式提供。 這些文件以后用作inout文件，經(jīng)過處理和轉(zhuǎn)換以生成不同的輸出文件。 啟用這些功能后，我們可以在所有排列范圍內(nèi)維護和擴展我們的設(shè)計。

Design token for dummies article傻瓜設(shè)計令牌文章

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.

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

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.

設(shè)計和開發(fā)工具之間的這種聯(lián)系將使設(shè)計團隊能夠更新其設(shè)計工具中的核心樣式，并看到結(jié)果自動同步整個設(shè)計開發(fā)生態(tài)系統(tǒng)。

design-token/community-group設(shè)計令牌/社區(qū)組

實施設(shè)計令牌 (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中的單個設(shè)計元素。 元素將是“版式”。 我們將使用Figma API 和一個名為 樣式字典 這將幫助我們在單個JSON文件中轉(zhuǎn)換基本數(shù)據(jù)，版式，空格，框陰影等令牌數(shù)據(jù)來設(shè)計令牌。

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

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

yarn init
yarn add style-dictionary

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

上面的命令將設(shè)置一個空的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中提取了數(shù)據(jù)。 但是，不幸的是，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提取數(shù)據(jù)后，我們將創(chuàng)建的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:

然后，使用上述命令，我們已經(jīng)準備好將其轉(zhuǎn)換為Sass文件的構(gòu)建。 我們擁有的代碼如下：

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();

結(jié)論 (Conclusion)

DT creation processDT創(chuàng)建過程

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信息存儲，設(shè)計和關(guān)聯(lián)諸如顏色，字體，空格，動畫蝕刻之類的信息時，真理的主要來源。 通過將DT嵌入我們的設(shè)計工具中，我們可以利用DS的維護，可靠性，組織性和可擴展性。 有了DT，我們將獲得以下好處

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

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

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

請找到鏈接，在我的GitHub庫環(huán)節(jié)的工作代碼在這里 。

推薦參考 (Recommended references)

演示地址

演示地址

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

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

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

令牌桶生成令牌

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。