This project began with evaluating whether Figma could effectively replace Adobe XD for our design needs. Adobe XD had become increasingly inefficient for creating prototypes with complex components, hindering iteration and slowing our workflow. I explored Figma’s capabilities by creating experimental prototypes and layouts to test its support for component variants, style management, variables, and modes.
Once confirmed that Figma met our requirements, I led the migration of the design system from Adobe XD to Figma. In rebuilding the components, I applied Atomic Design principles by constructing each component in layers—from the smallest, indivisible elements (atoms) to combinations of elements (molecules), then more complex assemblies (organisms), up to templates and full pages.
This methodology ensured components were built systematically for maximum modularity, reusability, and scalability rather than just reorganized. Leveraging Figma’s variants along with variables and modes, I created reusable color tokens and flexible component states, enabling a more maintainable and developer-friendly design system. The outcome was a streamlined, scalable library that facilitates faster prototyping, clearer developer handoff, and consistent design implementation across projects.
