Design system + Storybook:
Reducing time spent on design and development

Design system + Storybook:
Reducing time spent on design and development

CHALLENGE

CHALLENGE

Our Design system was outdated, inconsistent and full of exceptions. Designers, Developers and Product Owners all struggled to work from it and Adobe XD made project overviews and prototypes unclear and slow.
The result was misalignment, rework and unnecessary delays.

Our Design system was outdated, inconsistent and full of exceptions. Designers, Developers and Product Owners all struggled to work from it and Adobe XD made project overviews and prototypes unclear and slow.

The result was misalignment, rework and unnecessary delays.

THE SOLUTION

THE SOLUTION

Change to Figma instead of Adobe XD.
Then, a new scalable Design System was set up in Figma with clear rules, consistent naming and components that reflect how we actually build.

In parallel, Storybook (Material UI) was implemented as a shared component source for all development teams, fully aligned with Figma for seamless updates.

(Storybook is an open source tool for React for building and structuring UI components that allows developers to create and test the components in isolation.)

 

Change to Figma instead of Adobe XD.
Then, a new scalable Design System was set up in Figma with clear rules, consistent naming and components that reflect how we actually build.

In parallel, Storybook (Material UI) was implemented as a shared component source for all development teams, fully aligned with Figma for seamless updates.

SCOPE

THE PROBLEM

The scope included a move to Figma, a new Design and component library and a Storybook setup that aligned all teams around shared components, rules and naming, creating one foundation for how we design and build.

 

The scope included a move to Figma, a new Design and component library and a Storybook setup that aligned all teams around shared components, rules and naming, creating one foundation for how we design and build.

 

FIGMA2

BUSINESS IMPACT

Developers now work faster, make less UX/UI mistakes when coding and, and avoid rebuilding the same components across projects.

The new Design System and Storybook setup are now core tools in the organization, because they increase clarity, speed and delivery quality.

 

Developers now work faster, make less UX/UI mistakes when coding and, and avoid rebuilding the same components across projects.

The new Design System and Storybook setup are now core tools in the organization, because they increase clarity, speed and delivery quality. 

MY ROLE

I initiated the change to Figma and the new scalable Design system. I led the planning and setup of the Figma Design System for web and app, working closely with designers.
I was also part of the set up of Storybook and Figma alignment including communication to departments.
Mid 2025 - the Design System is updated due to EAA.

 

I initiated the change to Figma and the new scalable Design system. I led the planning and setup of the Figma Design System for web and app, working closely with designers.
I was also part of the set up of Storybook and Figma alignment including communication to departments.
Mid 2025 - the Design System is updated due to EAA.

Components check out
STORYBOOK2