A team of UX designers and developers, faced with years of design and technical debt reforged their Drupal theme and design documentation around Figma, Storybook and design tokens.

The World Kinect Corp web platform, as well as several Angular based single page apps and some mobile applications has been moving towards are more consolidated system that uses modern best practices like design tokens, CSS Properties, and collaborative web based workflows tying together Storybook and Figma that are compatible with CICD and improve our Core Web Vitals performance and DORA metrics.

Taking inspiration from several open source projects, we reworked designs that were initially done in every system you can imagine over several years into a smaller set of Figma files using component libraries, variations, design tokens, and other Figma features. Design tokens, Storybook, and Drupal offer a powerful combination to streamline this process and ensure that our design remains consistent and reusable throughout the entire ecosystem.

Our new system better supports design and developer workflow, automated testing, QA, stakeholder approvals and gives us better end results for our users.