preface

In recent years, with the rise of Zhongtaihua business, each business team introduces “design system” to solve the problems of modularization and scale in order to quickly respond to business needs and improve r&d efficiency.

To review what a design system is, a design system is composed of a design language and pattern library, under the guidance of design principles, through a unified collaborative language and scientific management methods organized, and create a consistent experience of the user interface system.

  • Design language: The foundation of the design system, related to brand identity and emotion, including color, font, icon and other basic design atoms;
  • Pattern library: a series of reusable components, templates, etc. made up of design atoms;

The designer and the front end engineer, as the implementation side of the design system, perform their daily work in two very different workflows. The normal process is that after the designer completes the page design in the design tool (Sketch, Figma), the front end will refer to the drawn prototype and annotation to restore the visual UI/UX in the code environment. However, the following problems are often encountered during this process:

  1. How does the front end efficiently capture upstream design updates?
  2. How exactly are the reusable design system atoms in the visual draft communicated downstream?
  3. Can the visual reproduction work be improved?

How does the front end efficiently capture upstream design updates?

Imagine a scenario where, in the process of production and production delivery, the designer wants to be as agile as possible with every change he makes in a visual draft that can be quickly reflected into the final product. In practice, the front-end will be informed of the upstream design changes (there are a few changes that are not informed), and then the front-end will open the design tools and code editing tools containing the annotation information to complete the modification of requirements. In this scenario, the designer would list visual changes verbally or in text, resulting in communication costs and loss of information. Before the final product is delivered, there is another round of “design walk-through” (often overlooked in agile development), which may lead to new upstream design changes, and so on.

How are reusable design system atoms in the visual draft communicated downstream?

A mature project often has its own design system, and the design atom, as a highly reusable module in the system, has been deeply integrated into the design workflow. However, because the concepts of design and front-end domain do not communicate, reusable information cannot be effectively conveyed. While designers may organize design specification documents that contain information about font levels, brand color splatters, card shadows, etc., this information is often not well represented in visual deliverables. To understand the design atoms in visual artwork, the front end will need to know the concepts in design tools such as layer styles for Sketch, Symbols, Variants for Figma and so on. Designers are the most familiar with page style reuse logic, but it is the front-end engineer who really implements page style, which inevitably leads to visual restoration errors.

Can the visual reproduction work be improved?

After the designer draws the page visual draft, the front end needs to restore the visual draft to an interactive page. According to the ancient division of labor, there are three roles involved: visual designer, page reconstruction engineer (responsible for UI/UX logic such as HTML + CSS) and front end engineer (responsible for data rendering and other logic). In essence, visual restoration is to transform the visual description in the design tool into a data description that the Web can understand, namely HTML + CSS. The information conversion work in this part is exactly what the team has been trying to solve for nearly a year. The “Deco Intelligent Code Project” initiated by the team extracted structured data description (D2C Schema) from the original information of visual draft through the design tool plug-in. Then, the D2C Schema is processed with rules system, computer vision, intelligent layout, deep learning and other technologies, and converted into D2C Schema JSON data with reasonable layout and semantics. Finally, the D2C Schema is converted into multi-terminal code with the help of DSL parser.

Smart code addresses the overall effectiveness of visual restoration, but DesignToken is where it comes in: how to seamlessly link the design system to the r&d workflow, reduce collaboration costs, and improve the maintainability of the resulting code.

What is a Design Token?

Design Tokens are a way to express Design decisions in a platform-independent way for sharing across domains, tools, and technologies. In a Design system, Design tokens represent reusable Design attributes that make up a visual style, such as color, spacing, font size, and so on. The Token is given a specific name (color.brand) that corresponds to a value defined by a design decision (#3271FE).

However, unlike Design Variables, Design Token is a platform-independent abstraction layer whose naming convention creates a common language for Design attributes that can be used across applications, platforms, and frameworks.

The flow chart of using Design Token is as follows:

Terms related to Design Token

According to the latest draft from the W3C Design Token Interest Group, the following terms are mentioned:

1. Tokens

The information associated with the Token is at least one key-value pair, such as:

color-text-primary: # 000000;
font-size-heading-level-1: 44px;
Copy the code

2. Design Tool

Figma, Sketch, AdobeXD and more.

3. Translation Tool

Translation tools are tools that convert Design tokens from one format to another, such as JSON to CSS

  • Theo, Salesforce
  • Style Dictionary, by Amazon
  • Diez, by Haiku
  • Specify

4. Classification (Type)

Applied to predefined categories of tokens, such as style attribute categories in design systems:

  • Color
  • Size
  • Typeface
  • Border Style

The following is an example:

{
  "color": {
    "acid green": {
      "value": "#00ff66"
    },
    "hot pink": {
      "value": "#dd22cc"}},"typeface": {
    "primary": {
      "value": "Comic Sans MS"
    },
    "secondary": {
      "value": "Times New Roman"}}}Copy the code

5. Groups

Refers to a specific set of Tokens, such as Brand, Component, and so on

{
  "brand": {
    "color": {
      "acid green": {
        "value": "#00ff66"
      },
      "hot pink": {
        "value": "#dd22cc"}},"typeface": {
      "primary": {
        "value": "Comic Sans MS"
      },
      "secondary": {
        "value": "Times New Roman"}}}}Copy the code

With the Style Dictionary translation tool, you can convert the above tag files into the following Sass variables:

$brand-color-acid-green: #00ff66;
$brand-color-hot-pink: #dd22cc;
$brand-typeface-primary: 'Comic Sans MS';
$brand-typeface-secondary: 'Times New Roman';
Copy the code

6. Aliases/References (Alias/References)

Tokens can be an alias for other Tokens, rather than an explicit value.

  • Helps to express design decisions;
  • Eliminate duplicate Token Values;

7. Composite

As mentioned earlier, the value corresponding to a Token is at least one key-value pair, and can be a compound type of multiple key-value pairs. A typical example is text styles and layer styles in the Sketch design tool:

  • Text style: the combination of font name, text thickness and color to express the text style;
  • Layer Style: A combination of border style, color, container background color, and shadow;

Advantages of Design Token

As a way of undertaking Design specifications in engineering, Design Token provides great help for the iteration, maintenance and implementation of Design system. In addition, Design Token acts as a protocol specification between designers and engineers, and Token is the coding language in this protocol.

  • Single source of facts: If the design and r&d parties design and code in strict accordance with the contents of the agreement, the design system can have a single source of facts, that is, the final visual presentation of the product is subject to the Token output by the upstream designer. It also provides a repository for recording and tracking changes to design decisions, meaning that visual changes by upstream designers can be traced.
  • Product Consistency: When designed and implemented with Tokens, style changes can be more quickly and consistently updated across the product suite.
  • Context-driven: Because Tokens are reusable and freely combined, they can be updated on a local scale based on context and topic. For example, the page background color can be set according to the system theme, as shown in the following figure:

The Design practice of Token

In the “Deco Smart Code” project, r&d can associate the project with a specific design system (DSM), such as the “JINGdong APP Design System”, which contains design atoms such as text styles, layer styles, color palette and so on. Deco will prioritize and replace existing Design Tokens in the Design system when restoring layout styles, and mark Design variables that have not yet been recorded in the Design system, such as color values and font sizes that are not in the Design specifications.

The introduction of Design Token can not only simplify the layout restoration code, but also provide convenience for visual walkthroughs. Because D2C (DesignToCode) technology solution, the output code visual restore degree can reach nearly 100%, designers can pay more attention to their own visual draft design system coverage, with the above process marked “design variables” list, it is very convenient to confirm the design error. For example, the background color specified in the design specification is $brand-color-bg: F7F7F7, but after the code restoration, the background color is not replaced with $brand-color-bg, but #F6F6F6.

conclusion

Design Token is a relatively new Design decision expression scheme. Currently, mainstream Design tools such as Figma, Sketch and AdobeXD support variable marking or referencing shared values for Design attributes, and then use third-party translation tools such as Theo. Convert Tokens into platform-specific code that developers can use directly.

Although Design Token is not widely used, with the expansion of the company’s business, a complete Design system will be needed to help users form a continuous and unified experience cognition with consistent Design language and visual style. By then, the Design Token will be more widely used as a way to implement the Design system. Figma brings the concept of front-end engineering into the Design space and we will continue to explore the possibilities of Design Token.

The resources

  • DTCG Glossary
  • Material Design Tokens
  • Building better products with a design token pipeline
  • A guide to design tokens
  • Modern Web development dilemma