The Problem
Manual translation from Figma designs to React components creates a massive bottleneck for frontend teams. Designers and developers spend countless hours converting visual mockups into semantic, responsive code — a process that is repetitive, error-prone, and time-consuming.
Existing design-to-code tools lack semantic understanding and produce bloated, non-semantic markup that requires significant manual cleanup.
My Approach
Engineered a robust parser using Model-Driven Architecture (MDA) principles and the Eclipse Modeling Framework (EMF) to create an intermediate representation of Figma design elements.
Developed ATL (ATLAS Transformation Language) model transformations to convert Figma's component model into a React component model, preserving semantic meaning and component hierarchy.
The system extracts design information via Figma's API, parses it through multiple transformation layers, and generates clean, semantic React components with proper props, styling, and responsive behavior.
This research project explored the intersection of software modeling, design systems, and frontend development — bridging the gap between visual design and code.
Results / Impact
Successfully demonstrated that MDA principles can be applied to design-to-code transformation, producing more semantically meaningful output than existing approaches.
Published as an academic research project showcasing innovative application of model-driven engineering in frontend development.
Built a foundation for future work in automated UI generation, with potential applications in design system enforcement and accessibility compliance.