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! 🎉
. 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.
. For this example, we will use a . 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 , which requires specific configuration within the project.
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.
. Here you can check out the
Thank you for reading!
SOCIAL SHARE CARD GENERATOR