Singapore's Locofy launches its one-click code design tool.

After using Figma to create user interfaces and experiences, developers often find themselves faced with the daunting task of coding the designs to create functional websites or apps. Locofy, a Singapore-based front-end development platform backed by Accel, aims to save hours of work with a tool that instantly transforms Figma and AdobeXD prototypes into code.

Locofy's new tool is called Lightning and is based on the startup's Large Design Models (LDM). Locofy's founders, Honey Mittal and Sohaib Muhammed, liken it to how OpenAI introduced LLMs before ChatGPT introduced them to the rest of the world. They saw the need for a tool like Lightning due to the shortage of developers resulting in lost revenue for companies and stressed programmers overwhelmed by their workloads.

Lightning operates as a Figma plugin, and Locofy's founders claim it automates nearly 80% of front-end development, allowing lean startup developers to focus on managing their businesses and bringing them to market.

The tool will be launched initially for Figma, for websites and web apps. Later this year, it will be available for more design tools, including AdobeXD, Penpot, Sketch, Wix, and eventually Canva and Notion.

Mittal states that the company has invested over $1 million in developing Lightning, with the goal of reaching customer-oriented startups and businesses with small teams that need to accelerate front-end development. Lightning and its LDMs were developed in-house and trained on a dataset that includes millions of designs.

The company began with Locofy Classic in 2021, which required users to follow several steps: design optimization; labeling interactive elements; styling to make designs work on various screen sizes; components and properties to identify recurring elements and make them modular; allowing changes to class names; and adapting to preferred configurations such as typescript or JS.

Mittal and Muhammed learned how each step could be automated with a combination of techniques like image-based neural networks, including multimodal transformers, graph-based neural networks, sequence-to-sequence models, stack pointer-based neural networks, heuristic models, and LLMs. They used these to build a Unified Large Design Model, with nearly half a billion parameters from millions of designs, they say.

Locofy Lightning's steps, including labeling, layer grouping, responsiveness, components, and class names, each perform their own combination of AI-based techniques, which are then refined with heuristics. Then the steps are condensed into a single step, so Lightning can be triggered with a single click.

Once the front-end code is generated, users can review it, along with an interactive preview, and fine-tune the code before exporting it.

Founded in 2021, Locofy has raised $7.5 million from investors, including Accel and Northstar Ventures.

In the future, it plans to expand its platform beyond design-to-code by including tools for creating design systems, using public UI libraries, and building back ends for front ends with integrations like GitHub Copilot and CI-CD. It also plans to include an AI assistant for designers and hosting and deployments to host complete apps.

Locofy has been in free beta for two years, with plans to monetize in 2024. Its founders told TechCrunch that AI-based code generation is a new category, and the business models will differ from other software-as-a-service and developer tools. Locofy is still defining its pricing, but it will be based on factors such as the number of screens or components converted into code and regularly maintained with AI.