Israel Adegbulugbe's Portfolio

Formidable

I engineered and published a comprehensive UI framework on the Figma Community. Built for scalability and high-fidelity interaction

Role

Design System designer

Timeline

Dec 2025

Team

2 Designers

Skills

UI Design
User Research

Overview

What is Formidable?
Formidable is an open-source design system engineered for high-growth, data-rich applications. It equips product teams with a mature library of reusable components, enabling them to ship features with high velocity while maintaining a cohesive brand identity across complex platforms.

Why Formidable?
Modern digital products require a toolkit that balances flexibility with technical rigor. Formidable comes pre-loaded with enterprise-grade patterns—from interactive data visualizations to scalable navigation architectures. By utilizing a modern Figma foundation, it ensures a seamless bridge between design intent and production code.

Atomic Architecture: A clear, hierarchical structure featuring 100+ core components that expand into hundreds of variants to handle any use case.
Design-to-Code Alignment: Includes 120+ design tokens and standardized naming conventions to streamline the handoff process and reduce technical debt.
Future-Proof Scalability: Built with fully responsive Auto Layout, allowing new features to plug in seamlessly without requiring a redesign.
Accessibility First: Engineered with a focus on usability, ensuring that high-trust environments remain inclusive and intuitive for all users.

Problem

In the fast-paced world of digital product development, design teams often find themselves caught between two extremes that hinder velocity and innovation. Most existing design systems have become either bloated or outdated, turning a supposed efficiency tool into a significant source of technical and design debt.

Bloated Architectures
Many modern systems are over-engineered, containing thousands of hyper-specific components that are difficult to navigate and maintain. This "bloat" creates high cognitive load for designers and leads to inconsistent implementations as teams struggle to find or adapt the right patterns for their specific needs.

Outdated Frameworks
Conversely, older systems often lack the foundational infrastructure required for today’s data-rich, responsive applications. These outdated libraries frequently lack:

Modern Figma Features: Missing Auto Layout 5.0, advanced variables, or proper component properties, making them rigid and slow to work with.
Design-to-Code Misalignment: Relying on hard-coded values rather than a robust token-based system, which forces engineers to "guess" values during handoff.
Accessibility Standards: Failing to meet current inclusive design requirements, posing a risk to brand trust and user experience.

Research

I utilized a dual-research methodology to bridge the gap between design theory and technical implementation, ensuring the system remained lean yet powerful.

Systemic Audit
I conducted a deep dive into existing UI libraries to identify common friction points. This audit revealed that most systems failed because they were either over-engineered—creating "bloat" that slowed down workflows—or lacked modern infrastructure, making them "outdated" for data-rich applications.

Competitive Benchmarking
I performed a comparative analysis of industry-standard systems to pinpoint areas for differentiation. I focused on identifying gaps in design-to-code alignment, specifically looking at how naming conventions and token structures could be optimized to reduce developer friction.

Stakeholder Analysis
By working closely with the product owner, I identified technical bottlenecks in existing "clunky" payment flows and mapped out the requirements for a scalable, modular infrastructure.

User Consensus
Research confirmed that for the Nigerian market, transparency is a higher-value feature than entertainment. Users would only commit to a purchase if the interface provided real-time visual proof and a direct line of communication with the seller.

Roadmap

The design system is a living entity. The foundation established today serves as a strategic starting point for a fully integrated, code-native ecosystem that scales with the product's ambitions.

What’s done

Token-first Figma system: Engineered a core architecture with 200+ variables and a library of 100+ core components expanding into hundreds of variants.

Standardized Naming: Implemented a clear atomic structure and responsive Auto Layout to ensure seamless design-to-code alignment.
Open-Source Foundation: Successfully published the initial framework to the Figma Community to provide a standardized resource for the wider design community.
Light and Dark Mode: Engineered the system with multi-brand theming and dark mode as first-class features, allowing components to adapt instantly to user preferences.

What’s next

Responsive Web Patterns: Developing a suite of layout-driven web patterns, including adaptive navigation headers, multi-column dashboard layouts, and contextual sidebars that reflow seamlessly across viewports.
Mobile-First Component Expansion: Architecting a dedicated mobile library focused on touch-optimized interactions, haptic feedback patterns, and thumb-zone ergonomics for hand-held devices.