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.
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!
Product Management, UIUX, User Research, Prototyping, Branding, User Testing, Quality Assurance
Working closely with Co-founders and Locofy.ai Team
Figma, Figjam, Adobe XD, Sketch, Google Sheets, Notion, Adobe Premiere Pro, Github, Sourcetree
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.
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.
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.
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.
Reach out to me via
email or
Linkedin! Check out more projects below.