Timeline:
2024-2026
Role:
Senior UX Designer / Lead Digital Designer
Org:
ecommerce and marketing
I built and maintained a scalable design system in Figma to support responsive web experiences across desktop, tablet, and mobile. The system is structured using atomic design principles and leverages components, variables, tokens, and boolean properties to enable consistent theming, accessibility, and efficient iteration.
Building the System
THE CHALLENGE
The system follows an atomic design structure, starting with foundational elements (colors, typography, spacing), progressing to atoms (buttons, inputs, icons), molecules (form fields, navigation items), and organisms (headers, product cards, page sections). This hierarchy made it easier to evolve components without breaking downstream usage.
The Atomic System
SYSTEM BEST PRACTICES
components
Components were built with flexible variants and boolean properties to support common states such as size, hierarchy, icon placement, and interaction states. Boolean toggles allowed designers to enable or disable elements like icons, labels, or helper text without duplicating components, reducing system bloat and maintenance overhead.
tokens
I implemented design tokens using Figma variables for color, typography, spacing, and elevation. Tokens were abstracted from raw values, allowing themes (such as light and dark modes) to be applied consistently across the system. Updating a core token automatically propagated changes throughout all components, significantly reducing rework and visual drift.
accessibility and responsiveness
Accessibility was considered at the system level, including color contrast checks, focus states, and accessible component states. Components were designed responsively using auto layout and constraints to adapt across desktop, tablet, and mobile breakpoints.
impact
This system improved design consistency, reduced duplicated work, and made it easier for designers and engineers to build and update features quickly. By centralizing decisions in the system, the team was able to scale designs more efficiently and maintain visual coherence across the product.