Design System to Development: Figma + Storybook = Product
Use Figma Components and Tokenize Design System
Taking the DSM foundations file,
applied the typography styles and
design tokens across all
components. Meanwhile, we also
audited existing components
to ensure accessibility, consistent
spacing, and atomic structure.
Implement Design System in Storybook
Taking the Foundations and Components
file, the Development team implemented
the components to be a hosted design
system in Storybook. This allows any and
all applications Alter Domus builds to
utilize the same component library
hosted in Storybook.
Creative QA
Verify that design components are implemented as intended, review responsiveness and consistency, ensure visual details and give feedback for technical accuracy and creative quality for a pixel-perfect client.
The Project
The existing DSM Foundations was lacking cohesiveness and was missing some key elements that designers were needing. Photon design team conducted a typography audit to create scalable and flexible typography styles.
They implemented their colors, weights and radious as design tokens using Figma Variables.This document outlines the technical stack and architectural approach for implementing UI tokenization in a frontend application using Angular Material UI with Storybook. The solution will focus on scalability, maintainability, and reusability while ensuring a consistent UI experience across different platforms.
Taking the Foundations and Components file, Development team implemented the components to be a hosted design system in Storybook.
I ensured that the components were implemented according to the design, provided feedback to developers, and handled the handoff to the client.