Dixa Design System

The Challenge

When I joined the Dixa design team the Figma Design System was poorly maintained, missing components, did not accurately reflect the implemented components and had no dedicated maintainer.

This caused designers to frequently detach instances of components to modify them and even create components from scratch, this frustrated designers and slowed down the design process.

The Solution

Being passionate about design systems I volunteered to become the dedicated maintainer of the design system and worked with the Head of Product Design to identify key areas of improvement and created a plan to address them.

I began by doing a comprehensive audit of the existing components, identifying missing components, and addressing differences between Figma and live components. I also rebuilt the component in Figma to utilise the latest features like Auto Layout, Variants, Text and Boolean Props, and Instance Swaps.

Discoverability and Usability

I ensured that the components in Figma were built with discoverability and ease-of-use as the top priority. I gave each component a description explaining when it should be used, and made the individual properties simple to understand and use.

While I maintained a one-to-one match visually with the dev components, I built and organised the Figma components in the best way for Figma. This made maintaining, updating, and using the components much easier.

Prototypes and Animation

I added prototype interaction and animations for common component interactions: such as hover states and loading spinners, to reduce time spent on repetitive work. Leveraging the power of Figma's new prototyping features these can be built on top of to create more powerful prototypes.

The Results

The improved components were rolled out slowly over several months when each was ready. They have been received well by both designers and developers for their ease of use and accuracy to the implemented components.