Rappi Travel Design System
A single global token library
Senior Product Designer,
Technical Lead and facilitator
Strategic design leader skilled in complex problem-solving, ownership mindset, mentorship, cross-functional collaboration, independent execution in ambiguity, clear communication, and workshop facilitation.
Context
Rappi, a leading Latin American logistics super app, focuses on food and grocery delivery while expanding into new initiatives, such as Rappi Travel, an online agency offering flights, hotels, hotels per hour, packages, car rentals, and tours/activities.
I joined Rappi Travel in September 2021 and found that there was no organization, design process, or scalable structure, with outdated tools still in Sketch, while the rest of Rappi had already transitioned to Figma.
The Challenge
As the sole designer at Rappi Travel, I restructured the design process for scalability using Figma, redesigned user flows and screens, and built a Design System with a token strategy to support multi-brand, theme, and UI customizations across both desktop and mobile platforms.
Goal
• Elevate design quality
• Create a scalable design structure
• Reduce workload for designers and developers
• Lower design and development costs
Problems
• Duplicate components with inconsistent designs
• Colors and typography misaligned with Rappi standards
• No scalable method to vary styles across pages
• Component updates didn’t propagate across Figma files
Process
• Identified and documented UI/UX problems
• Simplified design by removing unnecessary components
• Proposed, designed, and built a scalable Design System
• Redefined components, semantics, and variants based on product needs
• Iterated through testing and team feedback
• Created primitives and a token strategy with style-specific variables (Travel 6, Travel 7, Rappi 8, Pay)
• Ensured smooth handoff and collaboration with front-end developers
Creating a global token strategy
Overview of the Rappi Travel Design System.
Typography
Different typography and styles across systems.
Colors
Documented color palettes across libraries.
Primitives
Foundation blocks of the design system.
A system of systems
Four tracks, one system. One Global Token library unified all brands, enabling consistent control of spacing, radius, and interaction states across themes from a central layer.
Library swapping
Automatic typography and component swaps across libraries using Figma’s Swap Library.
Theme variation with token optimization
Introduced semantic theming with a single theme switcher.
Results in Metrics
For Developers:
• Developers average 40h/week on front-end tasks
• Without Design System: 20% rework = 24h/week for 3 devs
• With Design System: 5% rework = 6h/week for 3 devs
• Saved 18h/week = 72h/month
• Equivalent to 2 weeks of dev time freed for new features
For the Designer:
• Before: repetitive, screen-by-screen adjustments
• After: focused on system evolution (tokens, guidelines, docs)
• 30% time saved, enabling more research, UX, and innovation
Business Impact:
• Faster time-to-market
• Improved consistency with fewer bugs and support tickets
• Clear ROI: Design System pays off within months
Takeaways / What I learned
Success factors include mapping the system, setting clear goals, and prioritizing high-impact initiatives.
Define the semantic tree, maintain strong team communication, and break down work into small daily steps for long-term results.
Using Propstar for documentation saved significant time.