Energy X Design System
Develop a Token-Based Design System End-to-end for Multiple Platforms and Adaptable internal use To Unify a Global energy Company's Development EcosystemProject Role: Software Developer
Technologies: TypeScript/JavaScript, HTML/CSS/SCSS, Node, React, Angular, Next.js, Storybook, Stencil, Yarn, Figma
Article: The design system and images here are based on Project Metachrosis.
As a contributing software developer on this project, I developed modularized front end components integrated with a token service, created front-end pages with the design system components, wrote tests, conducted DevOps tasks, and staged code in a daily CI/CD cycle for immediate use by developers. Since the large energy company has several distributed development and design teams — all working in different tech stacks — across the globe, we developed a Figma token-based design system that can be adapted to several different platforms (including vanilla JavaScript, Angular, and React) with one source of design in Figma. This reduces cost and increases flexibility, consistency, and ease-of-use across the large company ecosystem of tools.
