After using Figma to create user interfaces and experiences, developers have the daunting task of coding the designs in order to create functional websites or apps. Locofya Singapore-based frontend 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 is built on top of the startup’s Large Design Models (LDM). Locofy 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 the need for a tool like Lightning because developer shortages resulting in lost revenue for companies and exhausted coders overwhelmed by their workload.
Lightning works as a Figma plugin, and Locofy’s founders say it automates nearly 80% of frontend development so developers at lean startups can focus on running their startups and getting to market.
The tool will be released first for Figma, 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 businesses with small teams that need to accelerate their frontend development. Lightning and its LDMs were built in-house and trained on a dataset containing millions of designs.
The company launched with Locofy Classic in 2021, which required users to go through five steps: design optimizations; tagging interactive elements. styles to make designs work on different screen sizes. components and supports to identify repeating elements and configure them. allowing class name edits. and customization to preferred formats such as typescript or JS.
Mittal and Muhammed learned how each step could be automated with a combination of techniques such as image-based neural networks, including multimodal transforms, graph-based neural networks, sequence-to-sequence models, stack networks, heuristic models, and LLM. They used them to build a Unified Grand Design Model, with nearly half a billion parameters from millions of designs, they say.
Locofy Lightning’s steps, including tagging, layer grouping, responsiveness, elements, and class names, each perform their own combination of AI-based techniques, which are then fine-tuned using heuristics. The steps are then condensed into a single step so that Lightning can be done in one click.
Once the interface code is generated, users can review it, along with an interactive preview, and improve the 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, including tools that build design systems, use public UI libraries, build backends on frontends with integrations like 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 their business models will differ from other SaaS and developer tools. Locofy is still finalizing its prices, but they’ll be based on things like the number of screens or assets converted to code and maintained on a regular basis with AI.
