Our team has run into a challenge that I imagine is quite common: we were asked to kick off a project using a prebuilt Design System as the foundation (in our case, PrimeNG), and adapt it to our needs in Figma.
At first glance, these systems are designed to be very versatile. But that same versatility ends up being a double-edged sword: the sheer number of component variants creates confusion for designers, who struggle to know which one is “the right” choice for a given use case.
For example, you might find:
- Text fields with floating labels, inline labels, or stacked labels.
- Buttons with rounded corners, sharp corners, or outlined styles.
- Etc
After trying deep customization, we came to the conclusion that it’s more efficient to build our own Design System tailored to the project. Sometimes we borrow or adapt components from PrimeNG, but instead of trying to fully customize PrimeNG and use it as the team’s standard, we decided it’s better to stick to our own system. That way, new team members can immediately use our version without getting overwhelmed by all the original options.
I’d love to hear your thoughts:
How have you handled similar scenarios?
Did you try to adapt and constrain an existing system, or go for a more focused, custom one?
What strategies have worked for you to avoid overwhelming documentation and too many variants?
Looking forward to learning from your experiences!
