Building a one-click solution to turn product designs into code

How Locofy bridges the gap between Figma and front-end engineering

Ever heard of a little platform called… Figma?

In all seriousness, with its ability to enable real-time collaboration among designers, developers, and stakeholders, Figma has become extremely ingrained in the world of product design. Currently, an estimated 95% of Fortune 500 companies use it.

Still, coming up with a product design is one thing. Building a complete solution requires turning that design into high-quality code that replicates every pixel perfectly. As consumers start to expect better user experiences, doing this efficiently has also gotten more difficult.

Understanding the Platform

Mittal and his co-founder came up with Locofy to make the design-to-code process more efficient. The platform uses a specialised AI model to analyse Figma designs and automatically converts them into front-end UI code.

This hasn’t really been done on a large scale. While Figma has been useful for designers, it was not built specifically for engineering teams, Mittal points out.

Locofy is used through a plugin within Figma and offers two main modes:

1. Lightning, an AI-powered version that automatically does code conversions
2. Classic, which offers step-by-step recommendations in the design-to-code process

Users start by creating a new project and can import their firm’s own component library if needed. This allows Locofy to use prebuilt code components that can be easily integrated with the rest of the user’s stack.

The next step is where the magic happens. In Figma, users select the designs they’ve created, and click the “Convert to Code” button on the Locofy plugin.

Locofy’s AI model then scans them and optimises the code structure without affecting the existing Figma design. It also tags individual elements according to their function. For instance, it can identify a rectangle shape with text as a search bar.

It also creates modular code components, which can be reused, making the code easier to interpret and maintain. For a travel website, for example, it could come up with the same code module to display hotel listings.

Once that’s done, Locofy comes up with a visual, interactive preview of the UI code. At this point, users can edit the code directly, allowing them to tweak specific areas – such as adjusting styles for mobile users – and helping them reach the desired design.

Not Easy to Make Easy

It might sound simple for users, but Locofy had to develop an extremely deep tech stack to achieve this. One of the key pieces of technology that underpins Locofy is the proprietary AI model it uses, which Mittal dubbed the Large Design Model.

The co-founder shares that Locofy built its own AI model because current large language model-based solutions alone cannot solve the problems within the design-to-code process. LLMs are usually trained on text-based sources, so they don’t natively understand Figma designs, Mittal explains.

As such, Locofy’s team opted to go for a slightly different route, training its own AI models on millions of design files. According to Mittal, since it doesn’t generate things on its own, like generative AI tech does, Locofy’s AI model is deterministic, which means that outputs are based on set rules and should always give the same outcome.

“The key goal is to understand what’s been given and then create a pixel perfect representation of that design through code,” he says.

User Feedback is King

It took Locofy’s team several years to get its AI model to this level.

In fact, the first version of Locofy was more like a coding assistant that made recommendations on how to code basic visual elements, which is Locofy Classic today. For example, users could select an element in the visual design, and Locofy would suggest that it be coded as a button. Following that, users would simply approve or reject the recommendation.

While this was less efficient, it was a great starting point because it gave Locofy tons of real user data to see what its AI model was getting right or wrong, which its team used to train and refine the solution.

Eventually, it got to a point where users were approving almost every single recommendation.

That was the green light to push forward with Locofy Lightning. Instead of offering users recommendations for each design aspect, Lightning would convert designs into the entire front-end UI code on its own.

Powering Ahead

According to Mittal, Locofy is currently a hit with large enterprises. Solutions with deterministic results – like Locofy – are familiar for these firms and are easy for them to use. It also fits naturally into enterprise teams’ workflows and tech stacks, so they don’t have to make too many changes.

“We’re selling about one deal every day,” he notes.

Now, Mittal hopes to gain a larger presence with independent developers and startups. To do that, Locofy is exploring ways to help users automate design structure optimisation, which is the part that’s typically done in Figma before being converted into front-end code.

This isn’t just to make things faster and easier; it allows Locofy to expand its use cases upstream in the design-to-code process. Then, it can be used with even more design tools – such as Stitch– which Locofy hasn’t integrated with yet.

“Ultimately, our goal is to solve engineering problems and give users the superpower to launch solutions quicker and with leaner teams,” Mittal says.