E-commerce library
This library was born from a real need: when no ecommerce component foundation exists, every designer starts from scratch. The goal was to build an extension of Pragma's design system —focused on the Magento template— so that any designer in the company could kick off an ecommerce project with guaranteed progress from day one.
01 - Context
Starting point: Magento under the microscope
Before designing, we needed to understand. The team benchmarked the reference ecommerce platform —Magento— analyzing the critical pages of the flow: the Home, PLP (Product List Page), PDP (Product Detail Page), shopping cart, checkout with payment gateway, and the administration backoffice. Meanwhile, other UI teammates evaluated different platforms; this project focused specifically on Magento's visual layer.
Home — Magento template
PLP (Product List Page) — Magento template
PDP (Product Detail Page) — Magento template
Shopping cart — Magento template
Magento and the boundaries of design
Magento (Adobe Commerce) is an open-source ecommerce platform that defines how pages, components, and user interactions are structured from the backend: the PLP, PDP, cart, and checkout all have predefined template architectures built on a Less-based theme system, PHP blocks, modules, and layout XML. That means design cannot ignore its constraints — what's proposed must be implementable within what the platform can render natively. That's why, from start to finish, every component, variant, and customization was reviewed with the Magento development team before moving forward.
Continuous technical validation
Every proposed component, variant, and customization was validated with the Magento development team. The priority: no design proposal could require development outside the sprint scope or exceed the project delivery timelines.
Design within platform constraints
Magento defines what can be rendered natively and what requires custom PHP modules. Understanding that boundary was essential to proposing components with real technical viability, not just visual appeal.
02 - System
From atom to template: layered design
With the benchmark as a foundation, Atomic Design was applied to build the library from its smallest units. Each atom —buttons, inputs, labels— was documented with variants, booleans, text options, and in some cases color variables. The goal was clear: no designer should ever need to detach a component to customize it, because flexibility was already built in from the start.
Library overview — documentation of all components in Figma
Component customization
Each component was configured for maximum flexibility without detaching from the system: variants for different states, booleans to show or hide elements, and editable text options. The goal was for designers to edit content without needing to detach it from the design system —when someone detaches a component, it's usually because they want to resize it or add more options than the component supports, not because they need to change text or toggle element visibility.
Card component customization in Figma — variants, instances, booleans and text options
Key components documented
The mini cart and product card are the highest-frequency components in any ecommerce. Each was documented with every possible variation, covering everything from the empty state to the multiple interaction states with the user.
Mini Cart component documentation
Product Card component documentation
03 - Pages
From components to full pages
The built atoms and molecules assemble into full-page templates. Home, PLP, PDP, shopping cart, administration backoffice, and wishlist were designed as reusable Figma pages, all connected to Pragma's design system and ready to be customized without starting from scratch. Any designer picking up one of these pages can adjust colors, typography, and content without detaching a single component from the system.
Home in atomic design — Pragma ecommerce template
PLP in atomic design — Pragma ecommerce template
Shopping cart in atomic design — Pragma ecommerce template
PDP in atomic design — Pragma ecommerce template
Backoffice and wishlist page in atomic design — Pragma ecommerce template
04 - Result
A product that generated real speed
The library was adopted organically within Pragma. UI teammates who used it in real projects reported an increase in execution speed of over 50%, because they didn't have to design from scratch. In extreme cases they detached a component for full editing freedom —but they already had most of the work done—, which confirmed the library served its purpose: a solid starting point, not a constraint.
+50%
Increase in execution speed reported by UI teammates who adopted the library in real ecommerce projects.
No design from scratch
No designer who used the library had to build a base component again. All the visual groundwork was already solved.
05 - Conclusions
Lessons from this project
01
A well-built system multiplies team output
Designing for other designers means thinking about flexibility, not just aesthetics. Every boolean, variant, and variable saves real hours for whoever uses the component next.
02
Detach is a symptom of a poorly designed component
If someone needs to detach a component from the system to modify it, the problem is the component, not the designer. The goal was to anticipate all possible variations from the start.
03
The benchmark defines the real scope of the system
Understanding the base platform first —in this case Magento — was what allowed us to design truly useful components. Without that context, the components would have been generic.
This library is not just visual design; it's a work infrastructure. Building it requires thinking like whoever will use it —not like the person designing it for themselves—, and that shift in perspective is, in itself, a design competency that goes beyond components.
