Locofy.ai
A Plugin & Builder that convert design into frontend code for web and mobile apps
Summary
Overview
Locofy.ai helps builders launch 10x faster, by converting their Figma or Adobe XD designs into production ready front-end React, React Native, HTML/CSS, Next.js, Gatsby, Vue code. With Locofy.ai, users can build full apps, screens, components & design systems at lightning speed. Easily tag responsive designs, create components, generate live prototypes, and export code or deploy directly – transforming the development process into a rapid and efficient experience.
Highlights
Joined as first founding member
Featured on Tech in Asia, e27, Product Hunt, Business Times & more!
More than 100k users from more than 190 countries have signed up
Designed and launched Figma Plugin and Adobe XD Plugin
Launched Locofy Builder - reached >300M lines of code export!
Role
Product Management, UIUX, User Research, Prototyping, Branding, User Testing, Quality Assurance
Team
Working closely with Co-founders and Locofy.ai Team
Tools
Figma, Figjam, Adobe XD, Sketch, Google Sheets, Notion, Adobe Premiere Pro, Github, Sourcetree
Product Video
Key Contributions
Figma Plugin
I played a pivotal role in the end-to-end process of designing, developing, testing, and launching a robust solution using React, HTML, Next, and Gatsby web frameworks. This involved acquiring proficiency in coding frameworks, mapping HTML-CSS with design elements, and researching popular UI libraries to enhance our offerings.

My contributions extended to wireframing and designing different components, actively seeking user feedback for continuous product improvement. As a product manager, I efficiently coordinated the efforts of cross-functional teams in product, design, engineering, and testing, ensuring seamless collaboration throughout multiple launches.

In less than 6 months, the culmination of our efforts resulted in the successful launch of the Figma Plugin. This innovative tool allows users to effortlessly convert Figma designs into React, HTML-CSS, Next, and Gatsby code. The Figma Plugin empowers users with features such as design tagging, setting responsiveness, adding actions, and prototype visualization, further enhancing the user experience.
Following the success of our web framework solution, we expanded our efforts to design and build a React Native solution for mobile apps. I delved into research and learning to master the coding framework and concepts, meticulously mapping React Native components to design elements. Within three months, collaborating with a new team of React Native engineers, we successfully launched the Figma to React Native plugin.
Adobe XD Plugin
In addition to our Figma and React Native solutions, we developed a plugin for Adobe XD to enhance the efficiency of the design-to-code workflow. I played a crucial role in translating design elements in Adobe XD to its counterpart in code frameworks. To ensure a seamless user experience, we also crafted a design system that seamlessly integrates with the Adobe XD interface.
Upon launching, I actively engaged with ITE students, providing them with training on Adobe XD and demonstrating the capabilities of our plugin to expedite their workflows. This direct interaction with students using our plugin not only facilitated immediate user feedback but also contributed to refining and optimizing our tool based on real-world usage scenarios.
Locofy Builder
The Locofy Builder empowers users to seamlessly create components and props, offering a versatile platform for configuring code, sharing live prototypes, as well as efficiently exporting and deploying code. My involvement in product management, design, and launch aspects created a cohesive and user-friendly experience.

To promote cleaner code generation, we introduced the Auto component feature. This innovative functionality automatically detects components within users' files, streamlining the development process. Working closely with developers, I played a key role in researching, conceptualizing, and wireframing this solution.
Github Integration
As our user base grew, ensuring that the exported codebase was conducive to continuous development and integration became a priority. Collaborating closely with developers and gaining insights into the core challenges, I played a key role in specifying scenarios and wireframing a solution. The result was a robust Github Integration that offered comprehensive folder management and smart code merge capabilities. This enhancement not only addressed the identified issues but also provided users with a seamless and efficient workflow for managing their codebase during continuous development and integration processes.
Like what you see?
Reach out to me via email or Linkedin! Check out more projects below.