Community

Blog Events Webinars Tutorials Forum
  1. Blog
  2. Events
  3. Webinars
  4. Tutorials
  5. Forum
Create Account
×
Community Blog How Come Design and Production Mode Is So Out of Date

How Come Design and Production Mode Is So Out of Date

This article discusses how to use Design Tokens to make design more efficiently.

By F(x) Team – Si'er

The current mainstream design draft delivery method still relies on the development of different ends to use some design draft to generate code tools and restore the design draft. However, in each design iteration, we need to depend on each end and convey the design elements and components that need to be changed to the frontend (H5, Weex, Flutter, and other frameworks are involved here) and the client (iOS, Android, and even Harmony OS).

The development developers at each end need to understand the demands of the design first and then find the corresponding UI code to make changes. However, at the level of understanding the design, many problems may occur. The frontend developers do not understand the specifications in the design, and they cannot see the problems even reproducing the problem.

1

The Design Token can solve the preceding problems, help the design specification connect with production seamlessly, and make the frontend handy when writing UI code.

What Is a Design Token?

Design Token is a design engineering system used to construct parameters with specific values in the design system with progressive namespaces. It stores all the parameterable values in the user interface style. The token system can help users achieve a consistent and extensible product experience.

A complete design system contains the following definitions:

  • Color
  • Typography
  • Space (dimensions, padding, and margins)
  • Shape
  • Elevation
  • Iconography and Illustrations
  • Animation
  • Sound
  • Haptics

All types can be tokenized, including dynamic parameters, sounds, and even interactive interface parameters related to haptics systems. The design language is no longer a description of scenarios and rules in a large section of the document. It is translated into key and value that can be used in frontend engineering documents.

A design specification becomes a set of rules used by different domains and teams, indicating that the scenarios defined therein are somewhat generic. It provides solutions to frequently encountered problems in the design work. The Design Token is an engineering acceptance method for design specifications. Any style attribute used by a relatively high frequency can become a token.

It is like a set of coding standards and protocols formulated between designers and frontend developers. In the process of UI style implementation, it is necessary to use defined tokens as much as possible and avoid using non-standard style values. Therefore, it plays a big role in avoiding errors caused by inconsistent working languages between design and UI development and design expression and implementation consistency between different systems, platforms, domains, and teams.

Why Should I Use a Design Token?

Design Tokens are a way to connect the design system with the UI engineering system seamlessly. Developing a complete token system helps the iteration, maintenance, use, and implementation of the design system.

Example 1: As the maintainer of the design system, Xiao Ming has established that the base number of grids in the grid system in the product is 4px. Xiao Fei is a new designer. On a new page A, the upper and lower spacing of the card is set to 16px. In a history page B design, Xiao Hei sets the spacing between the cards to be 12px. Since Xiao Ming did not formulate a specification for such details in the design system, the time interval between the two pages was inconsistent.

Example 2: Xiao Hei has received an elderly-oriented requirement. Xiao Hei needs to design an elderly-oriented UI for page B with larger fonts and larger spacing. At this time, the frontend personnel needs to write a set of new style codes according to Xiao Hei's new design, and Xiao Ming needs to update the design system and give standard lectures according to this new scenario.

Example 3: The boss of the enterprise said that the brand vision of our app needs to be replaced. The main brand color changes from dull dark orange to a more lively bright yellow. The research and development leader thinks it will take a lot of time for each page from design to development, including web, iOS, and Android. It would be nice if the skin could be changed with one click.

The Design Token can solve the preceding problems:

  • The semantic description of the usage scenarios makes the design and decision-making processes simple. There is no need to dive into an unstructured, iterative specification document that is difficult to inform the entire team.
  • The hierarchical architecture from abstract to concrete ensures that the change of values at any level will not affect the stability of superiors or subordinates. For example, if the brand color adjusts the color value and replaces the value of the token, all variable values that reference the token will be updated automatically. At the same time, users can convert a token file into style files in different formats using the tools like Style Dictionary, which is suitable for a variety of frontend client frameworks.
  • Style variables can be prompted automatically to ensure the consistency of the production process and the clarity of the use scenarios in the coding process, not just a meaningless value.

2
Tips for Specific Values in VS Code

3
Users can also make a small plug-in to achieve a more friendly token-value prompt.

How to Map and Associate Design Systems with Design Tokens

In my experience, the following token system can flexibly change the values in different contexts and is easy to understand and use:

4

  • Global token is used to manage the most basic style attribute values without any semantics. It corresponds to each HEX value, rgba, HSV, and other specific color values in color, font size, specific word weight, and grid ladder in spacing.
  • Alias token is a token with specific abstract semantics, such as color-background-primary, which describes the color used for the main background but does not specify which component is used.
  • Component token is used for specific components. For example, button-color-background-primary-active describes the specific usage scenarios of this token on components.

Usually, three layers of different files can be used in a good workflow to correspond to the three layers of different token types so the design system can be iterated and maintained in the engineering system.

5

In addition, it can also be written as a bundle for direct use for some often matched combinations, such as background color and foreground color:

6

Token Naming Methods

The token naming methods should take the most time to discuss when building a token system. Once a set of naming methods is established, all style attributes in any scenario will need to be coded and named this way in the future. In my project, a component token is named below. It naturally describes the usage scenario of the token. Users do not need to check the document to know that this is the background color of the first-level button used in the active state. Everyone can define the token name according to the most suitable development scenario for their projects.

7

Nathan Curtis grouped the naming levels of tokens according to taxonomy:

  • Base is the backbone name of the token, including the category (color, font, spacing), design concept (feedback, action), and property (size, background).
  • Modifier includes one or more variants (primary, success), state (hover, disabled), scale (100,200), and mode (dark, light).
  • Objects include the component (button, tab), the element (left-icon and link), and the component group (forms, feeds)
  • Namespace includes the system (tbapp), theme (sky-blue), and specific domain (buyer, seller)

8

No matter which levels are required in your project, it is best to name tokens in the order from macro to micro, from relatively stable to easy to change, and from context to specific use. After all, its main function is to make people understand it when they read it.

Note: Not all tokens need to be named according to the same level. Only the simplest level required by the usage scenario described by the token is retained to avoid name redundancy.

Design Tools and Tokens

Whether it is using Sketch or Figma to build the design system or using the style elements in the design system in daily design work, it can be mapped with tokens. For example, a Sketch file is essentially a JSON file package that contains object data from various design fields. So, it is easy to obtain style data from the design source file.

9

In addition to this style data, Sketch's Symbol or Figma's Components enable component-level tokens to be maintained.

Therefore, Sketch/Figma to token can realize the automated generation of some tokens based on a series of naming methods. In addition, the regular review and maintenance mechanism of tokens can ensure the accurate docking of the design system to the frontend and the implementation and production.

Currently, we are studying how to generate reasonable tokens from the daily maintenance specifications of designers and apply them to the production process automatically and more intelligently. If you are interested in intelligent UI design and design engineering, you are welcome to make a comment.

Reference

Programming Developers Web Dev Frontend Development UI Design Design Pattern Design Token
2 0 0
Share on

Read previous post:

The Way to Train a Form Recognition Model on the Frontend Quickly

Read next post:

Straight Talk about "Dynamic Planning"

Alibaba F(x) Team

66 posts | 3 followers

You may also like

Comments

5562343011696775 January 24, 2022 at 8:09 am

'-alert(31337)/

5562343011696775 January 24, 2022 at 8:09 am

press any key!

Alibaba F(x) Team

66 posts | 3 followers

Related Products

More Posts by Alibaba F(x) Team

See All