Turn a Figma Design Into a Working Dashboard App in 5 Minutes

I just turned a Figma design into a working dashboard app with real APIs, data, and pagination in less than five minutes.

And the best part is: I can export my creation as clean code across multiple files, including reusing your existing components in your codebase and/or design system.

React, Vue, Tailwind, SwiftUI, and many more outputs are supported, and everything is customizable.

Let me show you how to do it.

The process

Step 1: exporting from Figma

First, in Figma, launch the I used.

Note: If you use the dashboard design file I did, you will likely have to duplicate it to your drafts first so you have full access:

Note: This plugin works the same in account yet, you will be asked to sign up, which only takes 2 quick steps.

Note: If you use the same , and without it your results might vary. In this case, this design imports pretty well without auto layout, so we can ignore it.

Step 2: adding context for the AI

Now that we’re in Visual Editor AI chat released with when your accent gets access

For my dashboard, I used these instructions. Feel free to copy and use them, including the API used:

We have an API that can list our users that works like:



https://user-api.builder-io.workers.dev/

https://user-api.builder-io.workers.dev/?page=2

https://user-api.builder-io.workers.dev/?sortBy=name.first

https://user-api.builder-io.workers.dev/?sortBy=location.city



the output looks like:



<output>

{

  "page": 1,

  "perPage": 10,

  "total": 100,

  "data": [

    {

      "gender": "female",

      "name": { "title": "Mrs", "first": "Aada", "last": "Ojala" },

      "location": {

        "street": { "number": 9896, "name": "Pyynikintie" },

        "city": "Loviisa",

        "state": "Tavastia Proper",

        "country": "Finland",

      },

      "picture": {

        "large": "https://randomuser.me/api/portraits/women/51.jpg",

        "medium": "https://randomuser.me/api/portraits/med/women/51.jpg",

        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/51.jpg"

      },

    },

    ...

  ]

}

<output>



when adding tables of users include their images too. also make tables horizontal scroll on mobile



for loading states, give things a nice spinner

Notice that at the bottom I included a couple extra tips. For instance, I want the AI to generate tables with images in them, to make them horizontally scrollable on mobile, and be sure to use a nice loading spinner.

Instructions are infinitely customizable, so experiment with them! Use trial and error to find out what works best for you. With the right approach, they are incredibly powerful.

Note that you can also instruct the AI to use well known APIs without much guidance (like specific input/output examples). Some other fun ones to use and try:

• 
  catfact.ninja: returns random cat facts


• 
  dog.ceo: random dog images by breed


• 
  pokeapi.co: Pokemon data (stats, moves, types)


• 
  jservice.io: trivia questions from the Jeopardy! game show


• 
  Open Notify: space data like the current location of the ISS and people in space.


• 
  RandomUser.me: random user data (names, photos, addresses)


• 
  Advice Slip API: random pieces of advice ()


• 
  Open Meteo: weather forecasts, historical weather, and current weather data

Can't find a public API that interests you there? Just try asking Visual Copilot, and it can recommend an API for your use case too.

Step 3: making it interactive

Creating the user table

In the case of our design, it wasn’t even complete!

But is a full .

Add custom instructions

You can also add completely custom instructions in natural language for any additional preferences you have — including frameworks, styling frameworks, testing frameworks not mentioned previously, as well as anything completely custom — like stylistic preferences, libraries you use, or even samples of your existing code so your code can be reused or the AI can match your coding style.

In my case, I love React Query, so I have this custom instruction saved for all code generations so that React Query is always used for data fetching:

use @tanstack/react-query for all data fetching

Generate the code

When we’ve got things setup the way we like, we can just click Generate Code to get our code.

Keep in mind you can always change code after the fact too — by chatting to make modifications, as well as by updating your custom instructions and generating again.

This process can take trial and error to get exactly right—- but is worth it to make sure the system is outputting code just like you and your team would write.

And remember, the AI can respond to nearly any kind of feedback. If there is anything that makes you say “no I would’ve written this differently”, just tell the system.

Step 5: getting the code into your project

Now what good is code if it's not in your codebase. I got u fam don’t doubt me so much.

1. Click Sync Code.


2. Copy the provided command.


3. Run it at the root of your project.

Yes, yes I know I need to update Cursor.

And there you have it — the dashboard code, with functionality, tests, and reusable components is yours!

Bonus: Map Your Components

This is great and all — but what if you have a design system of components already?

Ideally, we’d want to reuse those components when importing and generating, including any other components local to our codebase that we typically build with.

For instance, here is an example of code I generated using the

Fear not, Builder .

Give it a try — I can’t wait to see what you build!

Resources

• from the


•  (+ with