BEdita CMS design system overhaul



The problem:

Outdated and messy Xd file without a proper component library
Growing technical debt, stemming from the fact that edits and fixes had to be done in code, without the needed research
The evolution of the product stayed still due to not having a proper design structure

What I did:

Analysed and imported the old Adobe Xd file into a new Figma file, with a 1:1 comparison of the elements to their actual development state and a list of what needs to be reworked, what could benefit from a less fragmented structure, and what isn’t simply needed anymore.
Rebuilt the things that inevitably break when you try to perform such import.

With the help of my developer colleagues, traced a strategic path for the future of the product, while fixing everything that’s been left behind — from inconsistent spacing to deprecated tokens (the “debt” I was talking about before, the one that subtly slows teams down because of the time spent checking if what you’re using is outdated or not).
Took the opportunity to use this design system as a playground to explore with AI, experimenting with Cursor/Claude Code and the integrated Figma MCP protocol to test various components.

The results:

-75% task-to-market time needed thanks to the new AI-ready Design System.
Design <--> development gap down to 0.
100% of the product can now be built using components, which are down from the initial 295 elements to just 32 master components, covering every core features needs of the product. No more headaches for designers and developers :)

I led the redesign of the structure of the outdated BEdita design system, addressing the growing design ←→ code debt, shaping and facilitating the product’s maintenance and its next features, while also streamlining the handoff process for a more efficient collaboration between the two teams that work on the product. Keep in mind that I had done pretty much the same thing for the LaDante’s design library as well, that’s how I was able to do this in just a couple of weeks.

The first screen shows the initial chaos and how messy and cluttered the design system structure was.

The second one shows what I ended up with after streamlining the whole library, reducing everything to just a handful of components, tidily organized and ready to be integrated into the product.

The last one shows two stress tests we ran to see how much time it would have taken to (re)build some already existing - and fairly crowded - pages using the new design system.

To be honest, the comparison isn’t quite fair if we don’t take into account the time spent thinking while populating those pages when they were created in the first place. Nevertheless, seeing that everything now behaves as intended has been incredibly satisfying, because it means that we can spend less time wondering why the components won’t work, and more time actually thinking and building the product core.

Done @Chialab in 2025