Figma Make Tutorial: Build Interactive Apps with AI

Ever designed a great UI and thought, “I wish I could just make this work without jumping through extra tools or workflows”? What if you could bring your designs to life by describing what you want, no handoff, plugins, or context switching? That’s precisely where Figma Make comes in!

Figma Make, launched at Config 2025, is Figma’s AI-powered prompt-to-code environment that allows designers to build real, functional prototypes directly inside Figma. Unlike traditional files, it lets us use plain English to add logic, navigation, responsiveness, and interactivity to our designs without requiring manual coding.

Let’s build a personalized finance app using Figma Make.

Building a finance tracker app

In this project, we’ll build a personalized finance tracker that helps users do exactly that, with a clean and interactive dashboard powered by Figma Make. This app gives users a snapshot of their financial health. It includes features like:

• A dashboard showing income, expenses, and account balances
• Monthly report generation, styled like a bank statement
• A transaction history with filters, tags, and categories

It’s inspired by tools like Plaid, QuickBooks, and Notion-style finance templates, but it’s streamlined for personal use.

Let’s start by defining the visual structure, the wireframe. A strong wireframe sets the foundation for meaningful AI output.

Also, here’s a video tutorial that walks through the same concepts step by step—with visuals, examples, and a real-time build. Use it alongside the text or on its own—whatever helps you learn best.

Step 1: Create wireframes for your app

A wireframe is a low-fidelity blueprint of your app’s layout. Create a wireframe for this app, focusing on the structure, which answers:

• “What goes where?”
• “How do screens connect?”
• “What components does the user need to interact with?”

Unlike typical prototypes, where wireframes are handed off to developers, in Figma Make, your wireframe becomes part of the functional build process. You can:

• Use it to plan the layout and logic clearly
• Feed it directly into the Figma Make file
• Guide your prompts more effectively, since the visual hierarchy already exists

Let’s look at each screen in detail.

Screen 1: Dashboard overview

The dashboard is the main landing screen. It gives the user details of their current financial health, including their earnings and spending, and forming trends.

This screen will have:

• A top navigation bar with the app name and profile access
• Summary cards for total income and total expenses
• A toggleable line chart that switches views between income and expenses
• Quick action buttons like “Add Transaction”, “View Report”, “Export Data”

Here’s a sample wireframe of the dashboard screen:

Note: The wireframes used here are just examples and you can use your layouts as the foundation for your prompts in Figma Make.

Screen 2: Monthly report page

The monthly report page will mimic a formatted statement view. Think of it like a printable snapshot of a user’s income and expenses for any given month. It’ll have the following components:

• A header with the report title and date filters
• A summary block showing totals and net savings
• A breakdown table by spending category
• A footer for optional disclaimers or notes

Here’s a sample wireframe of this screen:

Screen 3: Transactions details page

This is the most data-dense screen, designed to show the user a history of every transaction they’ve made. It’ll have the following components:

• A page header with search and tag filters
• A transaction table with columns for date, description, category, amount, and type
• Filter chips for quick sorting
• A floating “Add Transaction” button

Now that our wireframes are ready, let’s bring them to life using carefully crafted prompts.

Step 2: Writing the prompts

Once the wireframes are ready, the next step is bringing them to life using natural language prompts inside Figma Make.

In this step, we’ll tell Figma Make how our app should look. We can either:

• Reference an existing wireframe and describe its functionality, or
• Describe the whole layout and behavior from scratch.

Let’s start with the dashboard screen and look at both approaches. Go to the figma website and click on “Make” on the top right corner.

Prompting for the dashboard screen

Prompting using the wireframe

Import your wireframe into a Figma Make file with a prompt that can be straightforward and direct. You don’t need to describe every component, Figma Make will interpret the visual structure and apply the logic accordingly. Example:

Here's the wireframe for the dashboard screen of a mobile app. Turn this into a functional screen with toggling charts and active buttons. 

Copy to clipboard
Copy to clipboard

Once the prompt is given, Figma Make will start building the code required for the components in the wireframe. After a few moments, it will preview the output of this code automatically.

Here is a sample output design generated by Figma Make for the prompt given earlier:

The output was generated quickly, but as we can see, there are slight differences from the original wireframe, which is expected with AI-generated layouts.

Prompting without the wireframe

Let’s try using a detailed prompt without a wireframe this time. To do this, our prompt needs to describe the layout and the functionality in detail for Figma Make to build everything from scratch. Think of this as briefing a designer with no visuals. Here’s an example prompt for the dashboard screen:

Design the mobile dashboard screen of a personal finance tracking app. Include the following: 

- A top header with the app name on the left ("Finance Tracker") and a profile icon on the right  
- Two summary cards placed one below the other: 
  - Card 1: "Total Income" with a green accent  
  - Card 2: "Total Expenses" with a red accent 
- A "View All Transactions" button placed between the two cards, having a light grey background 
- A toggleable line chart below the cards with two tabs labeled "Income" and "Expenses"  
- Three action buttons stacked below the chart: 
  - "Add Transaction"
  - "View Monthly Report"
  - "Export Data" 
- Make sure the layout is designed for mobile (portrait) and is responsive 

Copy to clipboard
Copy to clipboard

Here’s a sample output design generated:

This detailed prompt helped Figma Make generate a well-structured mobile screen with all key components placed and styled correctly.

Prompting for the monthly report screen

For this screen, we will not be using a wireframe, our prompt must be descriptive enough for Figma Make to build the entire layout from scratch. We’ll guide both the visual structure and the logic in one go as follows:

When the user taps the "View Monthly Report" button on the dashboard screen, navigate to a new screen called Monthly Report. Design this screen from scratch with the following layout and components: 

- A top header with the title "Monthly Financial Summary"
- Two dropdown filters at the top for Month and Year 
- A summary section stacked vertically with three blocks: 
  - Total Income 
  - Total Expenses 
  - Net Savings 
- Below the summary, include a clean breakdown table with these columns: 
  - Category, Amount, Percentage, and Notes 
- Add a footer note: "This report was generated automatically based on your transaction data." 
- Ensure the layout is styled for mobile portrait view, with clear spacing, typography, and formatting that makes it export-ready for printing or sharing. 
- Enable vertical scroll if the content exceeds the screen height  

Copy to clipboard
Copy to clipboard

A sample output design is as follows:

Prompting for the transaction details screen

This screen must balance clarity with interactivity, especially since users expect to filter and explore data quickly. Here’s an example prompt:

When the user taps the "View All Transactions" button on the Dashboard screen, navigate to a new screen. Design this mobile screen with the following components: 
- A top header that reads "All Transactions"
- A search bar at the top to allow users to find transactions by keyword 
- A tag filter dropdown beside the search bar to filter by category (e.g., Food, Travel, Bills) 
- Below the filters, add a scrollable table that includes these columns: 
  - Date, Description, Category, Amount, and Type 
- Make each row interactive, tapping a row should visually highlight it for selection 
- Add filter chips above the table labeled: 
  - All, Food, Bills, Travel, Other 
- Include a floating action button labeled "+ Add Transaction" in the bottom-right corner 
- Ensure the layout is optimized for mobile portrait view, with smooth scrolling and clear spacing 

Copy to clipboard
Copy to clipboard

Here’s what a sample output of this prompt looks like:

If you look closely, you’ll notice that some designs weren’t exactly what we had envisioned, specific layouts felt off, or a few elements were misaligned or missing. That’s where prompt construction becomes crucial. The way we write our prompt directly affects what Figma Make builds. Let’s break that down.

Good vs. bad prompts

Figma Make can interpret various instructions, but it still needs guidance. The more precise your prompt, the better the output.

Here’s a quick comparison of weak vs. effective prompts:

The difference is all in the specificity about what you want, where you want it, and how it should behave. The more intentional your prompt, the more accurate your output will be.

Now that the screens are designed, how can we make them feel polished, responsive, and truly user-ready?

Step 3: Improve UI design with customized prompts

At this stage, our app is functional, but it’s not been refined yet. Now it’s time to make it responsive, polished, and visually dynamic. Figma Make allows you to stack improvements through new prompts, so you can iterate without rebuilding from scratch.

Making the layout responsive

Our goal is to ensure the screens work seamlessly across both desktop and tablet views.

Make this layout responsive for desktop and tablet. Stack the summary cards vertically on a tablet and resize the chart section to fit smaller screens. 

Copy to clipboard
Copy to clipboard

This tells Figma Make how to adjust spacing and flow without affecting core logic.

Customizing layout logic

Now, let’s add conditional logic, useful for handling states like “no data available”.

If no data is available for income or expenses, show a placeholder message: 'No data yet, then start by adding your first transaction.' Otherwise, display summary cards and charts. 

Copy to clipboard
Copy to clipboard

This improves the user experience, especially for first-time users.

Adding Lottie animations

To give your screens a modern, dynamic feel, you can add subtle animations using the LottieFiles plugin.

Add green and red dollar icon Lottie animations at the top of the Total Income and Total Expenses cards, respectively, using LottieFiles.  

Copy to clipboard
Copy to clipboard

This adds life to the interface without overwhelming the layout.

Theme toggle (Dark/light mode)

Give users control over the interface’s appearance based on their preferences or environment.

Add a theme toggle switch in the top-right corner of the navigation bar. Enable users to switch between light and dark mode. 

Copy to clipboard
Copy to clipboard

This is especially useful if you plan to export the prototype for stakeholder review or end-user testing.

UX Polishing: Hover, scroll, modals

Finally, refine user interactions with micro-interactions and smooth navigation cues.

Add hover effects to the action buttons. Enable scroll behavior if the page height exceeds the viewport. When clicking 'Add Transaction', open a modal with a simple form. 

Copy to clipboard
Copy to clipboard

These final touches bring usability and clarity, transforming the Dashboard from a static screen into a responsive, user-friendly interface.

After applying these prompts, here is what our finance tracker app looks like:

With these enhancements, the dashboard is now responsive and interactive. Let’s preview the working prototype and see how it all comes together in real time.

Step 4: Exporting and previewing the app

After designing and enhancing your UI inside Figma Make, the final step is exploring how your project behaves and what you can do with it outside Figma. Let’s explore some of the features that Figma offers.

Live preview panel

As you work, Figma Make continuously compiles your design and logic into a functional prototype. We can interact with:

• Tab switches (like toggling between income and expenses)
• Modal interactions (like an “Add Transaction” popup)
• Lottie animations (e.g., wallet animations or loading icons)

The preview pane updates in real-time with every new prompt. This gives us instant feedback on layout, logic, and usability without leaving the Figma interface or writing any boilerplate code.

Code panel

Figma Make also provides a Code tab, which shows the actual code generated behind the scenes. This isn’t throwaway code, but a structured, React-based output you can edit, extend, and deploy.

The code is written in TypeScript (.tsx files) and standard CSS (.css)

Based on our prototype, here are the key files generated:

• App.tsx: The main app container that renders all your components.

• components/: Modular files for each UI block like Header.tsx, SummaryCards.tsx, ChartSection.tsx, ActionButtons.tsx, TransactionModal.tsx, etc.

• components/ui/: A library of UI primitives like buttons, dialogs, calendars, avatars—styled and reusable.

• ThemeProvider.tsx: Handles light/dark mode switching across the entire app.

• WalletAnimation.tsx: Includes animation logic using Lottie, embedded directly in the UI.

• EmptyState.tsx: Renders messages when no data is available, based on logic prompts.

• Guidelines.md and Attributions.md: Documentation generated automatically with usage notes and credits.

This level of structure allows developers to plug in real data, integrate APIs, or even migrate components into production workflows.

Sharing and publishing options

Figma Make gives you flexible options to distribute or hand off your work:

1. Share the Live Prototype

• We can copy the shareable link inside Figma Make and send it to your team, stakeholders, or clients.

• They’ll be able to click through and experience the full UI, no dev setup needed.

2. Download the Code

• You can export the entire codebase as a .zip file.

• Use this in any React environment or extend it with APIs, backend logic, or integrate into an existing app.

3. Publish with Figma Sites

• If you want to make your app publicly accessible, Figma lets you publish it using Figma Sites.

• This converts your working prototype into a shareable, hosted web app ideal for demos or MVPs.

With all the key screens in place and interactive, your finance tracker is now a fully functional prototype ready to preview, share, or build on!

Conclusion

In this tutorial, we explored how Figma Make lets you turn wireframes and ideas into fully functional, responsive prototypes using natural language prompts. From writing effective prompts to customizing UI behavior, adding logic, and exporting production-ready code, you’ve seen how design and development can come together in a single, AI-powered workflow.

To continue building your expertise in UI/UX and interactive prototyping, check out Codecademy’s UX Designer Career Path which is a hands-on program designed to help you master the tools and techniques used by modern product designers.

Frequently asked questions

1. How do I use the Figma Make feature?

To use Figma Make, open Figma and create a new “Make” file from the file creation menu. Inside, you’ll find a prompt panel where you can describe your app or design using natural language. Based on your prompts, Figma Make generates UI layouts, logic, and functional code you can preview, edit, or export.

2. Is Figma better than Canva?

Figma and Canva serve different purposes. Figma is a professional-grade design tool built for UI/UX, prototyping, and collaboration—ideal for building apps and websites. Canva is optimized for quick visual content like social media posts and presentations.

3. Is Figma Make free?

As of now, Figma Make is available as part of Figma’s paid subscription. Check the official Figma pricing page for the most up-to-date details.

4. Does Figma require coding?

No, Figma itself doesn’t require coding, it’s a visual design tool. However, Figma Make can generate working code (HTML/CSS/React) from your designs using AI.

5. Can Figma Make generate HTML and CSS?

Yes. With Figma Make, your UI designs can be translated into HTML, CSS, and even React (TypeScript) code. You can view, copy, and download this code directly from the “Code” tab within a file, and use it in your own development environment.