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.
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.
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:
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.
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:
Tips for Specific Values in VS Code
Users can also make a small plug-in to achieve a more friendly token-value prompt.
In my experience, the following token system can flexibly change the values in different contexts and is easy to understand and use:
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.
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:
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.
Nathan Curtis grouped the naming levels of tokens according to taxonomy:
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.
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.
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.
Alibaba Tech - March 19, 2020
Alibaba Clouder - December 21, 2020
Adrian Peng - April 23, 2021
Alibaba Cloud Community - March 7, 2022
digoal - June 26, 2019
淘系技术 - April 14, 2020
Explore Web Hosting solutions that can power your personal website or empower your online business.Learn More
A low-code development platform to make work easierLearn More
Explore how our Web Hosting solutions help small and medium sized companies power their websites and online businesses.Learn More
Help enterprises build high-quality, stable mobile appsLearn More
More Posts by Alibaba F(x) Team