A better starting point for commerce design.
Shopping bags, delivery details, payment methods and order confirmations appear across countless online shops. Yet these familiar interactions are often designed again for each new project.
Fábio developed Muyro Commerce System to bring these recurring patterns into one reusable Figma framework, connecting interface foundations with complete shopping journeys.
Reusable components need connected journeys.
A collection of buttons and form fields provides only part of what a commerce team needs. Checkout also depends on how those elements work together: choosing an address, changing a payment method, selecting delivery and reviewing an order.
The challenge was to organise these interactions into a coherent system that could accommodate first-time and returning customers across desktop and mobile layouts.
Build the patterns behind the screens.
The framework was organised in layers, from visual foundations and base components to shared interaction patterns and complete commerce journeys.
This structure connects everyday interface elements with more specific tasks:
- Foundations: colour, typography, icons and tokens.
- Components: buttons, inputs, selection controls and feedback.
- Patterns: address forms, saved payment methods and delivery selection.
- Journeys: shopping bag, checkout and order confirmation.
Address management illustrates the approach. Adding a new address and choosing a saved one are related tasks, each requiring its own layout and states while sharing the same underlying components.
From shopping bag to order confirmation.
The first release brings together shopping bag, checkout, payment and order confirmation flows, with desktop and mobile layouts for first-time and returning customers.
Built with Figma Auto Layout and variables, the system includes reusable components alongside empty, populated and validation states. The components and page structures can be customised and extended for different commerce products.
The checkout patterns cover saved addresses, delivery preferences, payment methods and order review, keeping related decisions within a consistent visual and interaction language.
Considering the complete shopping journey.
The system also covers moments outside the main checkout flow. An empty bag offers a clear route back to shopping, while order confirmation explains what happens next and keeps the order details accessible.
A reusable foundation, released for other teams.
Muyro Checkout System v1.0 was released as a Figma product, bringing reusable components and connected commerce flows into one framework.
It forms the starting point for a broader commerce system, with scope to expand into account management, orders, returns and other post-purchase experiences.
