Overview
This project aimed to streamline the translation of design changes into code by leveraging design tokens. What began as a small exploration evolved into a comprehensive workflow adopted across multiple teams and products.
Key notes
- Explored and implemented a workflow to translate Figma design tokens into code using Amazon’s Style Dictionary.
- Created reusable Material UI themes for light and dark modes, showcasing components in Storybook for easy visualization.
- Streamlined token usage by packaging them into an NPM library, enabling efficient adoption across multiple teams.
- Delivered a scalable design-to-code process, enhancing collaboration between designers and developers.
Key features
- Exploration & Discovery:
Investigated the concept of design tokens in Figma and integrated Amazon’s Style Dictionary to bridge the gap between design and development.
- Token Management:
Collaborated with the visual designer to organize and export Figma tokens into JSON files, which were converted into CSS, SCSS, and JS variables using Style Dictionary. - Theme Implementation:
Used JS variables to create Material UI themes for light and dark modes, ensuring seamless integration into the design system. - Showcasing with Storybook:
Utilized Storybook to demonstrate Material UI components in both light and dark themes, providing an interactive and visual reference for developers and stakeholders. - Scalable Workflow:
Streamlined the process by creating an NPM package for the tokens, enabling multiple teams to efficiently consume and implement the design tokens.
Outcomes
- Established a scalable design-to-code workflow, improving efficiency and reducing manual effort.
- Enabled cohesive theming across projects with reusable Material UI themes and token management.
- Delivered an NPM package and Storybook showcase, facilitating cross-team adoption and streamlining the development and review process.
