Locofy Launches ‘Large Design Model’ to Turn Designs to Code

Locofy is a tool for frontend developers that converts designs to code, primarily via a Figma plugin. The company, based out of Singapore, has just announced a new product called Locofy Lightning, which is built on a stack that includes a custom technology called a “Large Design Model” (LDM). According to the company, the LDM enables users to convert a web design into frontend code in just one click.

To find out what an LDM is exactly and how Locofy helps frontend engineers, I spoke to the two co-founders, Honey Mittal (CEO) and Sohaib Muhammad (CTO).

Mittal explained that the company began in 2021 and the first version of its product, now called “Locofy Classic,” was a multistep process and required “a learning curve.” But with the new product, Lightning, it is a one-click process to convert a design to code — although there is still some tinkering required after, especially so soon after the product’s launch.

“With Lightning, we just wanted to make it so simple that irrespective of someone’s background or seniority, getting that 80% of the frontend code ready should just be a matter of a click,” said Mittal.

The pair showed me a demo of Lightning in action. The example was an Airbnb-like user interface built in Figma, featuring listings of properties accompanied by images. When the magic Lightning button was clicked, the mockup was transformed into a fully responsive website (this process took about 40-50 seconds). After the transformation, Lightning lets you inspect any of the elements of the resulting code, so you can adjust things as required.

What Is an LDM and Are LLMs Used?

From a user perspective, the transformation from a barebones Figma design into a fully responsive website in less than a minute was impressive to behold. But how is this done and where does Locofy’s “Large Design Model” come in?

“The way it works is that in the background, it’s running a variety of AI models,” said Mittal. He then clarified that it does much more than merely interact with existing LLMs.

“Our exposure to LLMs is less than 5%,” he continued. “Because we are not about text, we are about the visuals. So we had to build our own ‘large design models’, using millions of designs, millions of websites, millions of automated designs [created] by ourselves, to understand and to choose the right model.”

Mittal added that they only introduced LLMs into the Lightning stack a couple of weeks ago, for minor use cases — for example, helping to name layers in a design. For small things like that, they’re using a mix of LLMs: Mistral, OpenAI and LLaMA.

But the heavy lifting of the transformation is being done by Locofy’s custom LDM. This took many months of work from machine learning engineers to create, with each engineer tackling a different part of the design-to-code flow.

“In our LDM, we basically use […] seven to eight different techniques,” Mittal said. “Each part of the flow is using a different technique. We had to work on it for seven to eight months to see which technique works where. We will continue investing into that. What we’ve launched [with] the LDM, the large design model, is the starting point.”

So the LDM was created using a mix of image recognition, semantic analysis, and other AI techniques.

How the LDM Creates a Responsive Website

The demo I was shown was a conversion of a Figma design into a fully responsive website. Lightning can also work with Adobe XD designs, and Mittal added that support for other such tools — like Penpot and Canva — is on the horizon. Penpot integration will definitely happen this year, he said, but Canva hasn’t yet been finalized.

I asked whether a mockup using a single image format, like PDF or JPG, can be transformed into a website. Mittal said this is possible, although it “will require some work.” Ultimately, though, this kind of transformation isn’t what Locofy is focusing on.

“Some companies tried it in the past,” he explained in a follow-up email, “but it seems like that may be a slightly smaller problem at the moment because designers can easily do high-fidelity mockups these days. I know some companies that do it, but it may cater to designers and non-designers who get blocked by designers. At the moment our focus is on the designer-developer bridge, which in dollar terms is a much more painful/costly/time-consuming process.”

Assuming you’re using a Figma or Adobe XD design, one of the first steps of the transformation into code is to review the structure.

“The designers can structure their designs in any way,” CTO Sohaib Muhammad told me. “Because when you look at the design, it looks perfect — but behind the scenes, there could be many redundant layers, many unnecessary frames or groups. So […] what we do is, using our AI model, we regroup everything in a way that makes sense for a developer.”

Mittal said that the LDM can also identify what kind of element something is, even if (for example) it is just a rectangular box in the design — it might be an input box for a form, or it could be a button. The LDM “can differentiate between similar-looking items that are essentially just rectangles with text and icons in it,” he said.

Other than figuring out the elements, the other big task of the LDM is to turn the design into a fully responsive website.

The Difference Between Locofy and Vercel’s v0

Naming the engine behind the design-to-code transformation an “LDM” is a clever bit of marketing, given the current AI hype. But I noted there are companies that seemingly go even further, by helping developers create a user interface purely by describing it in text. The obvious example of that is Vercel’s v0, which uses an almost as good marketing term (“Generative UI”). I asked how Locofy differs from that type of AI product.

Mittal first noted that you can use Vercel as a deployment platform for the websites or apps you create with Locofy, so in that way it’s complementary. As for v0, he thinks it’s “for simple dashboards [where] you don’t even need a designer, you can just specify certain dimensions and it will […] give you the most basic version of a button, or the most basic version of an input, automatically.”

What he wants Locofy to focus on is the frontend code for designs that have already been mocked up.

“We’re saying, whether you use a designer or an AI to design, we don’t care. What we care [about] is you give us a design and we will do the work of the frontend engineer — 80% of it.”