Building Pantegral’s Ant Design System in Figma

How I transformed a slow, repetitive portal design process into a rapid, dev-friendly system that boosts delivery speed and consistency across portals.

The Challenge

Pantegral is a custom-built client portal platform that streamlines operations for purpose-driven organizations, helping them focus on their mission rather than administrative complexity. As Lead Designer, I helped shape the product’s foundation, from defining the overall user experience strategy and product direction to delivering end-to-end designs and contributing to strategic road-mapping.

As we reached a handful of portal launches, a clear issue we were noticing was that every new client portal was designed from scratch.

That meant repeatedly recreating similar UI patterns, hunting down outdated components, and making pixel-level adjustments over and over again. What should have been a fast, iterative process often stretched into weeks or even months.

The development team faced the same bottlenecks. Without a shared design language, they were left guessing at spacing, typography, and interaction states. This slowed implementation, introduced inconsistencies, and made scaling the product difficult.

Visit Pantegral's website

As Pantegral’s client base grew, it became clear we needed a scalable design system—a single, well-structured Figma file that could produce a fully functional base portal quickly, with minimal design and development overhead.

From there, we could make lightweight brand customizations, for example for color palettes, typography, logos, without reinventing the wheel each time.

The Turning Point

After a few conversations about how much time we were spending re-creating the same components, we realized we had a shared problem with a shared solution.

Together, our development team and I decided that I would build a unified Ant Design–based design system in Figma that they would directly mirror on their React Storybook codebase. This would give us both a dependable library, making it faster to spin up new portals, easier to stay visually consistent, and simpler to hand designs off to development.

I took the lead on the design ops side: auditing existing portals, mapping common UI patterns to Ant Design components, and structuring a scalable Figma library with clear naming conventions, variants, and documentation. Meanwhile, the dev team ensured our design components aligned perfectly with the coded components, so what we saw in Figma was exactly what shipped.

My Approach

Building a scalable design methodology for diverse client needs

Audit & Analysis
I began by auditing all existing client portals to identify recurring patterns, components, and UI inconsistencies. This gave us a clear picture of what was working, what wasn’t, and which elements could be standardized without losing flexibility.

Mapping to Ant Design

Once the audit was complete, I mapped each recurring element to its Ant Design equivalent, ensuring we could leverage a proven, well-documented component library as our foundation. This step created a direct bridge between design and the React components already in use by our development team.

Building the Figma Library
I constructed a scalable Figma library containing every mapped Ant Design component, complete with variants, auto layout, and clear naming conventions. The library was organized using the principles of atomic design. By breaking everything down into atoms, molecules, and organisms, new components can easily be introduced in the future. This will also make it effortless for other designers to assemble new portals without starting from scratch, while keeping files clean and maintainable.

Cross-Functional Alignment
Throughout the build, I worked closely with developers to align the Figma components with our React Storybook codebase. We validated spacing, typography, states, and interactions together, so the designs translated into code with pixel-perfect accuracy and zero guesswork.

The Impact

The new Ant Design–based Figma library quickly became the single source of truth for all portal designs at Pantegral. By pairing atomic design principles with direct alignment to our React Storybook codebase, we transformed portal creation from a repetitive, error-prone process into a streamlined, scalable workflow.

Outcomes:

Faster design cycles – Reduced design time for a new portal from ~3-4 weeks to ~5 days
Shorter development timelines – Cut front-end build time using the React Storybook codebase, and component errors can be fixed on a case by case basis instead of having to go through every instance
Consistent user experiences – Eliminated visual inconsistencies across portals and reinforced brand standards
Easier onboarding – Future designers and developers can start contributing within days, thanks to clear component documentation
Future-ready – The library can easily scale to support new features, branding needs, and accessibility improvements

What started as a shared frustration became a long-term asset that accelerated delivery, improved quality, and strengthened collaboration between design and development.

Why this matters

A Scalable System That Delivered at Scale

This project reminded me that design isn’t only about creating beautiful interfaces, it’s about building systems that enable teams to deliver better work, faster, and at scale. By working closely with our developers, we created more than just a component library; we established a shared language between design and engineering.

The design system has become a foundation for future growth at Pantegral, making each new portal launch faster, more consistent, and easier to maintain. For me, it reinforced the value of thinking beyond individual screens and features and move towards scalable, sustainable solutions that support the product’s evolution over time.