Notifications
Pixel-perfect design and clean code are two sides of the same coin called great product design. It’s not enough to design a great page/screen; you also need to turn it into clean code. Just a couple of years ago, to do that, you had to work with front-end developers. Nowadays, AI tools can help you with that.
Figma Make and Anima Playground are two popular AI tools that allow you to quickly turn your design into a tangible solution. Both tools work in a similar manner — you need to submit your Figma design, and the tools turn it into code. In this article, I will guide you through the entire process of using these tools so you will have a better idea of which tool is best suited for your task at hand.
Before we move to the part where we discuss the actual tools, it’s essential to do one crucial thing: create a decent UI mockup. Regardless of the tools you choose to use, ensure that you’re utilizing auto-layout. For our comparison, I will be using the landing page of a food delivery service. Below you can see a design of this landing page created in Figma.
Next, I simply need to click on the frame with my design and ask the tools to generate a working version of this landing page.
To use Figma Make, we need to open a new Figma tab in our browser and select the Make option from the top-level menu. Right from the start, this extra step is not very convenient because you have to switch between contexts — design context and implementation context.
Figma Make is essentially an AI assistant that allows you to provide a design as a frame so that the tool can use it as a reference when writing code.
Since we have our design in Figma, let’s simply copy the frame, paste it to Figma Make, and ask it to turn it into code.
The first output that the tool generated for me looked quite odd — Figma Make generated not the entire page but rather a mix of its different sections. And what made things worse is that this layout is not pixel-perfect. If you look closely at the bottom navigation section, you can see that the spacing between the company logo and menu options is too dense and it’s inconsistent with the other two blocks.
We can refine this design by submitting a follow-up prompt — ask the tool to use the entire page when creating a layout. Before we do that, I want to mention one interesting thing — in Attributions.md file that Figma Make generated for us it mentions that it uses components from [shadcn/ui] (https://ui.shadcn.com/) for our design, so the end result will look a bit different from the original design in Figma. Quite funny that Figma doesn’t ask you to choose a tech stack for your project — it does it for you. While this approach can benefit some product creators, many times, product creators want to have more control and choose a tech stack themselves because they know precisely what technologies they will use in a future product.
After the second attempt, with a prompt “Fix design, include all sections from original Figma File in the same order”, Figma Make fixed the problem and created a layout quite close to the original one that we had in our Figma file.
While the solution looks okay from the first glance, there is a critical issue with it — the quality of code. Despite the fact that the code is distributed into individual functions, each function is a collection of nested divs with visual styles hardcoded as attributes. In order to make this code production-ready, you will need to refactor it first — break the app.tsx file into separate files with a clear functional purpose.
Anima Playground is available both as a web app (dev.animaapp.com) and as a plugin for Figma. Web app makes Playground more accessible to non-designers as they can start their design journey by copying and pasting links to design to Anima.
And the Anima plugin for Figma makes designers’ lives much easier because when you use it, you don’t need to change the context in order to send your design to an AI assistant. All you need to do is to select the frame with your design and activate Anima plugin for Figma. Anima will analyze design for you, generate a preview of it, and turn it into code.
This approach is more convenient as you can tweak the design in real time without moving between browser tabs. But what makes Anima great is that you can change the tech stack for your project in the right hand side panel. For example, in my case, I will use the React and Shadcn combination simply because I want to do an apples-to-apples comparison with the Figma Make. But in your case, you can change it to something else (i.e., React and MUI).
Once Anima generates a code for your design, you can click “Prompt in Playground” to refine it. As you can see in a screenshot below, Anima’s first iteration of turning design into code was more successful than the first iteration of Figma Make. We’ve got a fully functional page with almost pixel-perfect design. And what makes this even better, Anima provides a dev script so we can easily deploy our solution.
It’s worth saying a few words about the code that Anima generates. The way Anima organizes project files is more aligned with how the dev teams do it. Apart from that, Anima provides relevant comments for individual code blocks that make it easy to scan the code if we want to introduce changes.
Both Figma Make and Anima Playground are excellent tools that have many advantages and a few limitations. Figma Make is a part of Figma’s native toolkit, available to users on a paid plan. Despite that it’s a native part of the Figma toolkit, in order to use it you need to switch to a different context (open Figma Make in a separate tab). It gets the job done, but has one key downside — the code it generates is messy with lots of unnecessary divs and spans, hardcoded styles and poor organization which makes it challenging for devs to work with. The tool also tends to skip parts of the pages during initial iteration, and this is even more noticeable with long pages.
Anima Playground is a 3rd party solution that is available as a plugin for Figma or as a web app on dev.animaapp.com. But to use it, you don’t need to switch to a different context (it’s available right in Dev mode). In comparison to Figma Make, Anima generates cleaner, semantic, and fully exportable code that’s more relevant to production-ready solutions. It also handles design more accurately, so you will get a more relevant solution right from the first attempt.
Turning design into code: Figma Make vs Anima Playground was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
