Designing and Building an Application with Anima, Figma, and React
The tech industry moves at a rapid pace with new tools arriving all the time. I was fortunate enough to have the opportunity to try out a cool new tool by Anima, the design-to-code platform. In this guide, I’ll document my journey from designing a Habit Tracker in Figma to deploying it online using Anima, React, and Netlify. We’ll cover the full workflow — design, build, and deployment — showcasing how Anima converts Figma designs into a React project.
This is what the original Figma design looks like:
And this is what the final design looked like in Anima:
As you can see, they almost look identical. It’s worth mentioning that I decided to make some changes, improvements and refinements to the original design, when going through the build process with Anima. Like adding a button to check off habits when they are completed, which was missing before. I could have used more prompts to improve the final build significantly, but this is already enough to showcase how good Anima is at converting a design into React code.
You can find the codebase and a live demo of the app online here https://github.com/andrewbaisden/habit-tracker-app
So if you are a designer aiming to boost your prototype skills. Or a developer looking for an efficient way to build a modern application this tutorial will show you how using a tool like Anima can level up your game.
What is Anima?
Anima is an AI-powered platform which is capable of doing design-to-code, and is available as a plugin for Figma. This basically means that you can create a design. And then turn that design into code automatically using artificial intelligence. This can be a very effective way to convert designs and prototypes into programming code which a developer can use straight away.
For example a designer could design some components in Figma. These design components can then automatically be converted into code which a developer can integrate into their application straightaway. This can drastically reduce the time that is required to design and build new features. Anima is a very effective coding assistant. Developers can build features faster. Designers can be sure that their design is being built accurately.
Building a Habit Track App with Anima
The technical stack is as follows:
Anima builds a React project using Vite. This was my first experience of using Anima so I will document and go through most of the prompts which I used for building this app. I think this is also a good introduction and proof of concept of how “prompt engineering” or “chain prompting” can be and how effective it is at building applications from an existing design.
Converting a design into code
I will now go through the process of building an application using Anima for the first time. I had no prior experience so everything is real and unscripted. The mistakes I made and what I learned and how I finally learned how to use the platform. To begin with, I designed the Habit Tracker App myself using Figma which took a day or so and then I used the Anima plugin to convert the design into React code.
Converting the design into code required zero user prompts as Anima was able to do it all seamlessly. I did use two user prompts to make some refinements at the start though. In total it took me around 17 user prompts to get to what I believed was a good Minimum Viable Product (MVP). This inlcuded adding features, bug fixes, refinements and much more. It could have taken fewer or more prompts it all depends on your choices.
Before we begin I should mention that Figma needs to be in Dev Mode, not Design Mode which is the default. The Anima plugin requires Dev Mode to convert the design into code. Dev Mode requires a paid Figma Professional Team account. You can use the menu bar at the bottom of your Figma design file to switch to Dev Mode and then you should be able to use the Anima plugin to convert your design into code as you can see here. By the way when you are designing your application in Figma its best practice to use components as it makes building much more straightforward and falls in line with component driven development that we are all used to in any JavaScript framework project like React:
I created one big component for all of the smaller components in the app, and Anima generated a React codebase which included TypeScript and Tailwind CSS files for the whole app. The code was generated in the right sidebar window in Figma, and took less than 1 minute. There were also two buttons at the bottom of the sidebar, one for opening in the playground and one to download selection.
I chose to open in the playground and the React project and codebase opened in a new web browser window on the Anima platform as you can see here. On the left is the text box that gives us the power to write prompts to iterate over the build, make changes etc…
Anima built the project and codebase for the app and then created a running server which showed the app working in the browser and it did this all in one go which was impressive! Usually this would take a developer a few hours or days to setup the project arcitecture, build all of the seperate components, design the page, do testing etc… But Anima managed to accomplish the building part of this task in seconds!
However I did notice that the status component was missing the picture for a user’s image. I also noticed that the Repeat frequency selection list was missing from the habit component. Considering that Anima had managed to get this far without any user prompts was already a fantastic sight to see. My design was not perfect from the start I could have cleaned up the components but it was nice to know that Anima was still able to build the app to this extent. I imagine that most designs could be built with Anima with ease. I knew that the Anima plugin could generate the code for any component so this gave me the perfect opportunity to see how well it could adapt and fix missing elements in the design.
So I used the Anima plugin to generate only the code for the missing components which inluded the TypeScript and Tailwind CSS files. Then I copied and pasted the code for the Repeat frequency component, into the prompt window on the left hand side of the Anina pltaform, with my prompt description of what I needed to be done. Anima rebuilt the app with the new changes and sucesffuly updated with the missing components!
These were the two prompts I used to resolve those issues:
Anima Prompt 1
Anima Prompt 2
And this is what the design looked like after these prompts:
I’m not too bothered about the image being broken at this stage because I could give Anima a link to the image online. Also I know that manually downloading the image and adding it to the project will probably fix the broken image issue. What important at this stage is just getting the code to match the design.
Having knowledge of both design and development is highly beneficial when working with the Anima plugin. Knowing the right technical lingo to use as a designer and developer when writing prompts can be very helpful. The original design does not have white borders around the components, whereas the one created with Anima does. I could change it but I think it looks okay for now, so I decided to leave it and focus on other areas.
The initial basic design is at a very good point after two prompts and I have only spent a few minutes working on this project. Anima definitly makes a developers job much easier and faster, it could have taken a few hours or a day to get this far without using Anima. So my starting goal has already been accomplised thanks to Anima, the design has succesfully being converted into a React codebase.
So that was pretty easy right? The onboarding went fairly smoothly and did not require that much technical setup. Lets quickly go over the steps it took to convert a design into code using Anima:
- Design your app in Figma
- Switch your Figma file into Dev Mode
- Use the Anima plugin to convert the design into code
- Open the codebase in the Anima Playground
- Wait for the app to compile, build and run in the browser
In the next section I will take things much further by using chain prompting to add new features and fix bugs which is exactly the type of work that a team would be doing when working on a project of this type. With each individual given various Jira tickets to work on. With Anima all of this can be achieved with little hassle.
Using chain prompting as a prompt engineer
Prompt engineering is essentially the process of writing instructions as a way to get the best results when working with an AI model or tool in this case, Anima. Ok so we have a starting point with the design, the next phase we will be adding functionailty, fixing bugs and improving the design. The next issues to work on was making the checkmarks green like in the design, ensuring that the progress bars in the profile component had colours and doing some alignment fixes for the habits. The following prompts fixed those issues:
Anima Prompt 3
Anima Prompt 4
Anima Prompt 5
The design then looked like this after the changes:
As you can see, the calendar is now too big for its container. The next 4 prompts fixed those issues and also better aligned the red cross delete button:
Anima Prompt 6
Anima Prompt 7
Anima Prompt 8
After prompt eight, the delete button was put outside the row component with the habit data, which was incorrect because I wanted it inside the white border. However, the positioning is acceptable for now because I do not think that it ruins the design and might be ideal because it is not in the same space as the calendar widget.
Working on this app has made me aware that prompt engineering is likely to become a legitimate skill if it has not already. Getting designers and developers to iterate a design or some project code with various prompts. It can create a very good starting point or even get you close to the final design. For areas where the AI fails to get the desired result, you can manually take over and do the design or work on the codebase as normal. The key bonus here is that the AI did a significant amount of the work, and you only needed to work on a few fixes to get the desired result. That’s a lot of time saved. What used to take days or weeks can now be done in a few hours.
With the design phase more or less completed to an acceptable standard, I decided that it was time to write the business logic for adding and removing habits, which is a major feature of this app. The following prompts accomplished this task:
Anima Prompt 9
Anima Prompt 10
Anima Prompt 11
The application now made it to this stage after these new changes:
As you can see, Anima successfully implemented streak management functionality. I wanted to add logic for tracking streaks because it was hardcoded. Anima went a step further and added working streak management and was clever enough to add a check button next to the delete cross button.
Streaks also now start at zero and you can add and remove habits. The application is coming along well, there is just one big feature left to resolve. Getting the habit calendar to work, the streak counters and also the profile section which has gamification. The upcoming prompts got all of these features working:
Anima Prompt 12
Anima Prompt 13
Anima Prompt 14
Anima Prompt 15
After these prompts, the habit tracker app reached this phase:
The app is looking good and has basic functionality. Earlier in one of the builds I did notice a bug, though. You could toggle the completed habit check button on and off, and it kept updating the streak, which I guess was okay, because the app currently had no way to track real times or dates. I was thinking that the day-tracking circles in the habit should probably reset after 7 days to reflect a whole week instead of filling up and then staying the same. These bugs seem to be resolved now, though.
After Anima Prompt 12, the logic seems to be working for the counter, and the days, although other than physically waiting for the day to change, the only other way to see if it is truly working that I can think of right now would be to write some logic and maybe build a component for test purposes to simulate day changes for the app so I can see it in action. Prompt engineering with iteration and refinement is a good example of how humans can work with AI.
Okay, lastly, I want the title in the profile component to change depending on what level the user is at. And to also add to the gamification structure. I used two prompts to achieve this goal:
Anima Prompt 16
Anima Prompt 17
I could continue iterating forever, making improvements, changes and adding new features, but I think in its current state, it’s good enough for a basic Minimum Viable Product (MVP). There are lots of feature improvements and likely bug fixes.
Some improvements that could be made to the app with further prompts include:
- Making it fully responsive
- Adding error handling
- Persistence state/data for the habits like a database or local storage
- Improving the gamification
- The ability to edit and update habit names
- Multiplayer
- Being able to change a profile picture or a profile picture that changes based on level
- A leaderboard to compare with other users
- Charts and statistics data
- Export, import and backup data
- More pages/screens for additional features
The list goes on, and with each new feature, it turns from a simple app into a SaaS/PaaS, but regardless, this has been a good introduction to using Anima for app building.
The final step is deployment to Netlify which is quite easy and if your an experienced developer you have no doubt deployed many apps there already. If its your first time this guide on A Step-by-Step Guide: Deploying on Netlify should be very helpful.
Conclusion
In this tutorial, we walked through the process of building an application using Anima. We used prompt engineering to create an application which was fully functional and required little manual intervention from a developer. Anima was able to build the design straight from a Figma file in a very short space of time with fairly high accuracy. If anything, this should hopefully convince many developers to improve their design skills and learn how to use Figma because this will definitely help them to have more diverse skills and get more job opportunities.
AI continues to surprise and show off its capabilities, and Anima is right up there with the best design-to-code and app-building platforms out there now. With new LLMs like DeepSeek R1, o3-mini, Gemini 2.0 Flash, Grok 3 and the reliable Claude 3.5 Sonnet, which has been consistently reliable for coding. We truly live in a great time where dreams can be realised much faster.
Stay up to date with tech, programming, productivity, and AI
If you enjoyed these articles, connect and follow me across social media, where I share content related to all of these topics 🔥
