Design Systems

Custom design token service and infrastructure to streamline product development

Design tokens are connecting tissues between design and code. Modern toolchain provides APIs to automate many of steps involved in the handoff process between design and engineering. A design asset library in Figma defines a set of design tokens - including colors, typographies, spacings, effects, etc., and UI components are designed with these token definitions. A custom software (we call it design token service) leverage these design token definitions via Figma REST API, and convert them into platform specific code: e.g., CSS/SCSS/LESS/JS/JSON for web, Swift/JSON for iOS, and XML for Android. These coded design token outputs can be used in UI component library and/or product, to automate the delivery of design language updates from design to engineering. A scalable design tokens adopt an inheritance model from primitive tokens to semantic tokens. Primitive tokens are descriptive variable definition that enumerates design tokens available in the design system (e.g. "purple--600 = #6938EF"). Semantic tokens are prescriptive to use cases, that inherit values from primitive tokens (e.g., "color__fill__cta--primary--default = {purple--600}"). Although the best practice for defining design tokens is through Figma Variables as of now, they don't have some key token types, e.g., Typography, Drop Shadow, since these are design tokens consist of multiple variables. Therefore as part of this design token system offering, we also created a custom Figma plugin to help the team define typography and drop shadow tokens in canvas, and translate them into usable design tokens both as Figma Style and code.

The design token toolchain is integrated with the design asset library through Figma REST API, and obtains design token definition data (e.g., Figma Variables, design token elements, etc.), and converts them into JSON representation needed for Style Dictionary, a dependency for token transpilation. The token service transpiles the JSON into various token output formats - such as CSS / SCSS / LESS / JS / JSON for web, Swift / JSON for iOS, XML for Android. Figma Variables is not optimized for defining Typography and Dropshadow tokens yet, so we implemented a custom token architecture and repository system. Design tokens can be defined through elements in canvas. These elements are named with a certain naming convention (e.g., "$dropshadow/cta") so the token service filters these elements out and extrapolate values, and compiles a partial of JSON representation for Style Dictionary.

The white-label design system solution is set to scale and adopted by multiple clients, which have generated revenue to the company. Please feel free to reach out to me for further details and live demo of the automation.