Design System for B2B SaaS Platform

Built a scalable Figma design system to improve consistency, speed up design cycles, and streamline handoffs between design and development.

Headquarters

Switzerland

Founded

2006

Industry

Private Aviation

Challenge

Before implementing a design system, I rebuilt components from scratch and manually updated every screen whenever something changed.

After each release, I also had to check the software against the Figma screens and log any discrepancies as “bugs” in our Azure DevOps board. This time-consuming, error-prone process slowed down design cycles and created mismatches across the product.

Process

I began with a full audit of the software, uncovering numerous inconsistencies across components and styles. After researching design system methodologies, I chose the atomic design approach, as it provided the flexibility to scale with the client’s growth.

To align stakeholders, I ran meetings with the product team to share audit findings, agree on priorities, and outline my next steps. I then built the system in Figma, leveraging component libraries, variants, and styles to create a centralized, living system. To ensure clarity and collaboration, I also documented guidelines and tasks in Azure DevOps.

To address these issues, I began with a full audit of the software, identifying numerous inconsistencies across components and styles. After the audit, I conducted research into best practices for building design systems, exploring different methodologies. Considering the client’s industry-specific needs and future growth plans, I chose the atomic design approach. This allowed me to break the system down into reusable elements (atoms, molecules, organisms) that could easily scale as the software evolved.

I built the design system in Figma, leveraging component libraries, variants, and styles to create a centralized, living system. Throughout the process, I documented usage guidelines and tasks using Azure DevOps to ensure clarity for product owners and developers.

Results

The design system eliminated redundant work and standardized styles, allowing me to create new screens much faster and with greater consistency. Developers benefited from clearer guidelines and smoother handoffs, which reduced rework and improved collaboration.

Once implemented, the need for clarification from developers dropped by 75%, the DevOps task burn-down showed a 52% decrease at the end of our two week sprint, and the development team reported a 30% increase in productivity, with fewer iterations required after releases.

Key Takeaways

Running a full audit revealed the scale of inconsistencies, and choosing the atomic design approach ensured the system could grow with the product.

This project taught me how to structure scalable systems in Figma and strengthen collaboration with developers through clear documentation and standards.

If I were to work on this again, I would also run a short workshop with the product team to consolidate components. I found that many were too specific and could be simplified into more flexible versions, making the system even leaner and easier to maintain.