IBM Carbon
IBM Carbon offers 50+ components and extensive documentation for IBM products, ensuring design consistency across thousands of applications.
brifl Design System
brifl Design System
Designing a Scalable and Modular UI Foundation
My Roles
UI Designer
Timeline
August - December 2021
Toolstack
Figma
miro
Before designing the Brifl Form Application, I created the Brifl Design System — a modular, React-friendly component library based on atomic design principles. It contains over 30 components and 200+ states and variants. This system provided the foundation for consistent, accessible, and high-fidelity UI design across the Brifl product.
Project Overview
Before designing the Brifl Form Application, I decided to design a complete system that would allow me to create a consistent user interface. So, I designed a design system after studying atomic design principles and React-friendly component design, named the Brifl Design System. I also used this system for designing the high-fidelity user interfaces of the Brifl product.
The Brifl Design System consists of 30 different UI components and more than 200 states and variants. It defines the foundational elements such as:
- Color palette
- Typography
- Icon library
- Grid & structure
Research & Inspiration
Before starting to design the Brifl Design System, I studied Atomic Design Principles by Brad Frost and examined well-defined systems such as:
- IBM Carbon
- Atlassian Design System
- Orbit by Kiwi
- Ant Design
These references helped me define a structure that is both scalable and React-compatible.
Design System Components
The Brifl Design System consists of 30 different UI components and more than 200 states and variants.
Reflections & Learnings
This project allowed me to understand the requirements for designing a modern, user-friendly, customizable, interactive, and responsive design system.
- When I first began designing this system, I was unfamiliar with Figma's advanced auto-layout features, which made some components less structured than they could have been.
- The system lacks the modern component property structure (booleans, strings, nested instances) introduced later in Figma.
- After this project, I began learning about tokenization (for color, text, spacing, etc.) to future-proof design systems.
Would you like to try Figma Prototype?
This story ends here yet the journey continues...
🎉 Thanks for Reading!
Thanks for taking the time to explore this project. I hope you enjoyed the deep dive into the process, challenges, and learnings behind it.
🌍 Also Published On
