Converting Figma To React the Fast and Easy Way
If you think that AI is going to replace web developers, look no further than trying to turn a Figma prototype into a working React application. Figma is a great tool for designers to build the UI of their dreams. But to turn those dreams into reality requires a lot of work.
Step one of converting a mockup is to create the HTML. Thankfully, the folks at Figma added a “developer mode” earlier this year to help out. Developer mode allows for 3rd party plugins to turn Figma mockups into code. Those plugins have improved the quality of those exports immeasurably.
There are a lot of plugins out there and they are continually improving. The best I’ve found so far is Visual Copilot from Builder.io (the folks behind the Builder CMS, Qwik, Partytown, and more.) These are smart folks and this is a smart tool. It uses a custom built LLM to do the initial conversion and the results, in my opinion, get you about 80% of where you need to go with the HTML/CSS.
Let’s take an example mockup for a home page and a product detail page:
The mockup looks pretty good. There is the home page mockup on the right hand side and the detail page on the left.
To start converting, we first switch the developer mode.
The big toggle switch at the top with the tag symbol moves us between designer and developer mode. Once we are in developer mode, we select the Plugins tab and search for the Builder.io plugin.
Once we select the plugin, we then select a section of the mockup we want to export.
You can select as much or as little as you like. For small pages, you could select the whole thing. For larger pages, you can select each section and export them individually to build up a set of components.
I’ll just select the shoes hero section and then press the Generate code button.
After just a few seconds of processing, I go into the Builder CMS UI that shows me the portion of the mockup I exported and the code at the bottom of the page.
Don’t worry if you aren’t using the Builder CMS in your application as you can just copy and paste the code from here into your own application.
Before we get into the generated code, it’s worth noting a few things.
At the top of the preview section is a selector where you can toggle between desktop, tablet, and mobile preview sizes. Visual Copilot generating responsive code that works at different breakpoints and the Builder CMS previewing the common breakpoints is a massive time saver.
In the code section, there are selectors for Framework and Styling. You can choose between all the common Frameworks: React, Vue, Svelte, Angular, Qwik, etc. Then you can choose between different Styling options like Tailwind, Emotion, Styled Components and more.
There is also a Fast versus Quality toggle. The Fast variant is free… and very fast. While the Quality version (which is a pay-for option) runs an extra GPT pass to try and further refine the code to produce more semantically structured results.
The Quality version also allows for AI refinement.
At the bottom of the display, you can have GPT further refine the code based on whatever prompt you give it. They even have some handy suggestions, like using NextJS’s Image component instead of using <img> tags directly.
Finally, there is the copy button that you’ll want to use to get the code into your application.
In the video associated with this article, I’ll walk you through the entire process of converting this set of pages into a NextJS application–including extracting all of the images from the Builder CDN to local files in public and converting the <img> tags to Image components. I’ve built a little script for this that you are welcome to use.
As I mentioned at the start of this article, this process will prove to you that AI is never going to do all the work required to turn mockups into production applications. Which seems odd, given that I then went on to cover an AI tool that does just that. Or does it? Turns out there is a lot left to be done by web developers to get to production.
It’s Not Always This Easy
The first issue is that these Figma-mocked UIs are not always this easy to work with. The example I used was a reasonable design. However, the reason that web developers have a love/hate relationship with Figma is that Figma allows designers to do anything they want, including creating very hard to implement designs.
AI tools will get you really far with reasonable designs, but for the weirder stuff they will get you a certain distance and then it’s all on you to not just implement, but also to negotiate with designers on what’s reasonably achievable and what’s not.
Responsiveness
As I mentioned, Visual Copilot does a decent job of doing responsive layout of a well-designed mockup. But there are often times when the mobile version of a UI will vary widely from the desktop version, and web developers will need to make up that gap. Take the navigation menu in the header:
We only had the desktop version of the navigation menu in the mockup, so the AI did what it could with that and created a menu that scales really nicely down to mobile. But maybe the customer doesn’t want that, maybe they want a hamburger menu for mobile. It’s going to be up to the designer, product manager, and developer to work all that out.
Component Reuse
Probably the biggest issue I’ve seen with Figma mockups is that they rarely point out when we intend to reuse a component or what that reused component is supposed to be. Take these two sections of the mockup.
One version says “Featured Products”, the other section on the detail page says “You may also like”, but the carousel style UI underneath certainly looks the same in both cases. So, can these sections be reused? Should they be reused? These are choices that can only be made in conversation with the product manager and designer.
Full Implementation
Of course, the 800lb gorilla in the room is to make it actually functional. Obviously, this means wiring up the data to make it all data driven. As well as integrating the eCommerce functionality required to allow the customer to actually buy the shoes. And on top of that, there is accessibility and internationalization.
That’s just to implement what we see in the mockup. There is often hidden functionality we don’t see, like low data states, or functionality that is implied but not rendered in the mockup, like the carousel for “Featured Products”. Does that always take four products? Does it scroll on the desktop? Does it flick on mobile?
Conclusions
The great part about what’s left over after Visual Copilot has given you a fantastic start on the code is the fun part of engineering. That’s the great part about these AI tools. They aren’t meant to replace you. They are meant to take the tedious jobs, like converting a Figma mock into some reasonable HTML, and do those for you so that as a developer, you can focus on what you do best.
Personally, I’m endlessly fascinated by every part of UI, from design through to implementation. So, I’ve been working with Figma mocks and designers for years. I’m always on the lookout for tools that will help accelerate the process of going from a mockup to an app because I love seeing projects come to life. I strongly recommend trying out Figma plugins to help accelerate your workflow. And if you are looking for a plugin to go from Figma to React/Tailwind (and lots of other variations), Visual Copilot is the best plugin I’ve seen for doing that work.
Jack Herrington is a Principal Full Stack Engineer and YouTuber.
He is currently writing a course on Professional NextJS. Sign up for the free newsletter and get a full free tutorial on state management in the NextJS App Router.
