Locofy Unveils One-Click Design-to-Code Tool in Singapore for Seamless Development

After designers craft user interfaces and experiences using Figma, developers face the demanding task of translating those designs into functional websites or apps. To streamline this process, Locofy, a front-end development platform based in Singapore and supported by Accel, presents a solution that significantly reduces development time. Their innovative tool, Lightning, converts Figma and AdobeXD prototypes into executable code with just one click.

Lightning builds upon Locofy’s advanced Large Design Models (LDMs). Founders Honey Mittal and Sohaib Muhammed liken its impact to that of OpenAI's advancements in language models before ChatGPT made them widely recognized. The creation of Lightning addresses the pressing need for efficient development tools, particularly amid a shortage of developers—a challenge that not only hampers revenue but also contributes to coder burnout.

Integrating seamlessly as a Figma plug-in, Lightning automates around 80% of the front-end development process. This allows developers at resource-constrained startups to concentrate on growth and market entry. The tool will initially roll out for Figma, focusing on websites and web apps. Later this year, it is set to expand to other design platforms, including AdobeXD, Penpot, Sketch, Wix, and potentially Canva and Notion.

Mittal notes that the company invested over $1 million into developing Lightning, aiming to support startups and customer-centric enterprises with small teams that require expedited front-end development. Both Lightning and its LDMs were developed in-house and trained using a dataset comprising millions of designs.

Originally, Locofy launched Locofy Classic in 2021, which necessitated multiple steps, including design optimization, tagging interactive elements, responsive styling for various screen sizes, and making components modular. The founders recognized the potential for automation across these steps by leveraging sophisticated techniques such as image-based neural networks and multimodal transformers. This enabled the creation of a Unified Large Design Model, totaling nearly half a billion parameters.

With Locofy Lightning, processes like tagging, layer grouping, and class naming are automated through diverse AI techniques, fine-tuned with heuristics, and compressed into a single, streamlined action, allowing for one-click code generation. Users can review the generated code alongside an interactive preview, enabling them to refine it before export.

Since its inception in 2021, Locofy has secured $7.5 million in funding from prominent investors, including Accel and Northstar Ventures.

Looking ahead, Locofy plans to broaden its offerings beyond design-to-code capabilities by integrating tools that establish design systems, utilize public UI libraries, and create back-end solutions with integrations like GitHub Copilot and CI/CD support. Future features include an AI assistant for designers, along with options for hosting and app deployment.

Having been in free beta for two years, Locofy anticipates monetization starting in 2024. The founders shared that AI code generation represents a novel category, indicating a unique business model distinct from traditional SaaS and developer tools. While pricing details are still being finalized, costs will likely depend on metrics such as the number of screens or components converted to code and their ongoing AI maintenance.

Most people like

Find AI tools in YBX