Design Systems

Streamlining cross-functional design operations through design systems.

A design system infrastructure and software architecture are the keys to enable a streamlined cross-functional operations among design, engineering and product . 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. We've built a software solution to automate the delivery of design language updates from design to engineering.

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.