Singapore’s Locofy launches its one-click design-to-code tool

After using Figma to create user interfaces and experiences, developers are left with the hefty task of coding the designs in order to create functional websites or apps.

Singapore’s Locofy launches its one-click design-to-code tool

Catherine Shu@catherineshu / 11:00 AM GMT+7•January 16, 2024

 Comment

Image Credits: Luis Alvarez (opens in a new window)/ Getty Images

After using Figma to create user interfaces and experiences, developers are left with the hefty task of coding the designs in order to create functional websites or apps. Locofy, a Singapore-based front-end development platform backed by Accel, wants to save hours of work with a one-click tool that instantly turns Figma and AdobeXD prototypes into code.

Locofy’s new tool is called Lightning and it’s built on top of the startup’s Large Design Models (LDMs). Locofy’s founders, Honey Mittal and Sohaib Muhammed, compare it to how OpenAI pioneered LLMs before ChatGPT introduced them to the rest of the world. They saw a need for a tool like Lightning because of developer shortages that result in lost revenue for companies and burnt out coders overwhelmed by their workloads.

Lightning works as a Figma plug-in, and Locofy’s founders say it automates close to 80% of front-end development, so developers at lean startups can focus on running their startups and going to market instead.

The tool will be launched for Figma first, for websites and web apps. Then later this year, it will be available for more design tools, including AdobeXD, Penpot, Sketch, Wix and possibly Canva and Notion.

Mittal says the company invested more than $1 million to develop Lightning, with the goal of reaching startups and customer-focused enterprises with small teams that need to accelerate their front-end development. Lightning and its LDMs were built in-house and trained on a dataset including millions of designs.

The company started with Locofy Classic in 2021, which required users to go through several steps: design optimizations; tagging of interactive elements; styling to make designs work on different screen sizes; components and props to identify repeating elements and make them modular; allowing class name edits; and adapting to preferred configurations like typescript or JS.

Mittal and Muhammed learned about 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 networks, heuristic models and LLMs. They used those to build a Unified Large Design Model, with close to half a billion parameters from millions of designs, they say.

Locofy Lightning’s steps, including tagging, layer grouping, responsiveness, components and class names, each run their own combination of AI-based techniques, which are then fine-tuned with heuristics. Then steps are condensed into just one step, so Lightning can be one-click.

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

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 that build design systems, use public UI libraries and build back ends to the front ends with integrations such as GitHub Copilot and CI-CD. It also plans to include an AI assistant for designers and hosting and deployments to host full apps.

Locofy has been in free beta for two years, with plans to monetize in 2024. Its founders told TechCrunch that AI-code generation is a new category, and business models will be different from other SaaS and developer tools. Locofy is still finalizing its prices, but they will be based on things like the number of screens or components that get converted to code and are maintained on a regular basis with AI.