Design System
Mada — E-Commerce Design System
A bilingual design system with 200+ components, RTL-first tokens, and Figma library built for a regional retail brand.
- Year: 2024
- Duration: 3 months
- Client: Regional Retail Chain
- Outcome: 60% faster design handoff
Technologies: Figma, Storybook, React, RTL Design
The Challenge
The client's design team of 11 was producing inconsistent UI across web, iOS, and Android — three separate Figma files, no shared tokens, and developers rebuilding the same components repeatedly. Design-to-development handoff was taking 3–4 days per feature.
Our Approach
- Audit & Token Architecture — Audited all three platforms to find the real component set — 347 unique components reduced to 62 base components. Built the token architecture (color, type, spacing, radius) as the single source of truth.
- Figma Library Build — Built the Figma library with auto-layout, component properties, and RTL variants built-in to every component. Interactive prototypes for all interaction states.
- Storybook & React Implementation — Developed a matching React component library documented in Storybook. Each component has design tokens wired directly to CSS variables, so a theme update takes seconds.
Core Features
- 200+ RTL-Native Components — Every component supports LTR and RTL out of the box — no overrides needed. Tested across Arabic, English, and mixed-content layouts.
- Design Token Pipeline — Tokens defined once in Figma Tokens, exported to JSON, and synced to the codebase via a CI pipeline.
- Interactive Storybook — Every component is documented with live examples, props table, and accessibility notes — the single source of truth for developers.
- Dark Mode & Themes — Full dark mode support via CSS variables. A seasonal theme system lets marketing update the palette with a single token swap.