Over the last decade, we’ve seen an increasing number of tools that assist us in creating software projects. These tools have become essential in our workflow, not only saving time but also helping us meet the market demand for speed in adapting to changes and delivering continuously.
In the frontend space in particular, concepts such as SPAs, web-components, modularization, and new ways of styling and building applications have made workflows more robust and full of opportunities. These advancements have significantly improved web applications and opened up endless possibilities for products.
The big challenge, however, is that frontend development is extensive. There are countless details to consider when creating a frontend application that interacts with clients at a basic level. Here are some key points:
- Project setup: installing and carefully syncing all the tools we’ll be using.
- Developing interfaces that reflect the designed layouts.
- Applying responsiveness to ensure smooth navigation across various platforms.
- Setting up APIs, backend endpoints, and creating services to connect with data.
- Configuring page routes and user navigation flow.
- Making calls to fetch data and rendering it within the pages.
- Handling loading states, errors, etc.
- Implementing custom functionalities like search, filters, and page navigation.
- …
- … and much more!
The list is long and keeps growing. For this reason, among the tools that claim to automate frontend development, very few offer true end-to-end integration—covering design, data integration, responsiveness, and deployment.
Luckily—and thanks to significant technological advancements—things seem to be changing. Today, we’ll explore a fascinating tool that promises to help us build and deliver frontend applications in record time while integrating tools we already use in our daily workflows.
Introducing Anima! 🎉
Anima App is a tool for frontend developers that assists in creating projects from design to deployment. The platform offers extensions that help streamline workflows, whether working within design tools like Figma and Adobe XD or directly in VSCode through Frontier, leveraging AI to support daily tasks.
Anima enables the creation of frontend applications from the initial setup, allowing you to choose programming languages like JavaScript/TypeScript and libraries such as React, Vue, or plain HTML. It also integrates seamlessly with interface libraries like Material UI, Antd, Shadcn, TailwindCSS, and more. Additionally, it supports on-demand code integration through Gen AI, helping with all the details of your application. Examples include fetching data, rendering UI elements, managing application states, creating custom functions, and more. All of this culminates in the export of clean, functional, and production-ready code.
Example Project
Let’s create a mini product entirely with Anima, named ‘Your Next Party’—a small application that cover the points mentioned earlier, including setup, frontend interface creation, server calls, data rendering, state management, and more. This will allow us to see how the tool assists in all these steps.
The complete application design is available at this link. It is a web page where users can find venues to visit. The page will display a list of venues with their respective details (name, location, rating, price per person, and music genre), allowing users to filter via a search field and navigate between music genres, simulating some of the small tasks we perform daily in a real project.
Design
The goal is to use Anima to transform our design version into a project, rather than directly creating all the steps of the interface. The application UI has very simple elements: a header containing the application title, an icon, and a search bar; a navigation section for quickly filtering the page data; and a list displaying the venue results.
1. Install and Login
To get started, you need to create a new account on Anima’s official website. For this example, we will use a Figma template from the community. Open the application and install the Anima plugin. Once the plugin is installed, run it, log in with your account, and you’re ready to begin.
2. Project Setup and Preferences
With our Figma template designed and the plugin installed, the next step is to configure the technologies we will use to create our application.
As mentioned, Anima offers extensive compatibility, allowing you to define the technologies for your final project. The configuration process is straightforward: open the Anima plugin, select the layer, and choose the desired settings for your project.
For our project, I will configure it to use React with TypeScript, Shadcn with Tailwind.
Where the magic happens 🪄
The process to convert the design into code is simple. Within Figma, with the Anima plugin open, simply select the area you want to export as code:
When exporting, you receive a .zip file of the project fully configured with the chosen technologies, staying as true as possible to your template. It reuses components from your application and implements them with the tools you selected. With just one click, you get your entire application set up, with the interface built and ready to deploy! 😮
Fetching Data and Custom actions
The second part involves integrating data and adding extra functionalities such as search, navigation, and listing data from a real API. To implement these features, we will use Anima’s Gen AI, which allows us to implement these functionalities via prompts.
Some considerations regarding the data implementation:
- For the backend and APIs, I will use Supabase, which requires specific configuration within the project.
- When page loads, the application should fetch data from a table called events via Supabase and render it in the venues list on the interface.
- The user should be able to navigate between the categories listed at the top and update the venues displayed on the screen.
- The user should be able to filter the results by name.
To achieve these functionalities, I will use the following prompts:
1. at ui page, create a supabase instance
2. use https://juwlfiepovrtgsuwcvmc.supabase.co as supabaseUrl, and <my-key> as public-anon-key.
3. when the page loads, get the data from supabase in a table called events, that will be the data that I want to show, the response is shaped as {id, genre, location, price, image}[]
4. at the search input, filter the events in base of their names (be aware to use the names as a lowercase to avoid non-match)
5. filter items in base of they genre when click at navbar items and when the category is selected, shows a border bottom to show users which one is selected.
To implement the prompts and update the initial codebase, you need to click the Add Prompt feature within Figma.
Once activated, you will see an interface where you can add your prompts. After that, click Done. Once the changes are applied, you can click to generate and Download your project with all the necessary updates.
Once generated and exported, we have the functional application source code that can be deployed to any hosting service. In this case, I will use Vercel. Here you can check out the Live Demo and see the final result!
Live Demo
The result is EXCELLENT and very positive! ✅ The customizations quickly applied data fetching, rendering, and all implementation details while creating a visual interface that meets expectations with clean, production-ready code.
Anima has tremendous potential to greatly aid in project development, even for more tasks such as Design Systems, and beyond. It’s definitely worth investing time to explore and make the most of what Anima has to offer!
Here are some important links:
Thank you for reading!
Top comments (0)