This tutorial was designed for a Figma Make Vibe Coding workshop I hosted in partnership with Friends of Figma NYC in Fall 2025. You will learn to…

build an interactive prototype with Figma Make based on a Figma design.
create an interactive prototype based on a Figma design.
power your prototype with a Supabase database.
write prompts that lead to better outcomes.

Live recording

Follow the tutorial below while watching the live recording.

Step 1. Create your first Supabase project

Note: Supabase has changed parts of their interface since I wrote this tutorial, so if something isn’t exactly the same, that’s why 😊

Supabase is an open-source platform that manages backend services like databases, ways to store and organize information. You can think of databases like spreadsheets capable of handling many rows and columns. Databases are stored online, which means data is accessible from anywhere and can be shared between users instantly.

For example, if you were building a drawing app, you could allow artists to store their doodles in a database. A database would allow other artists to browse a gallery of artwork and even like or comment on pieces they enjoy.

Sign up for Supabase. It is free for personal use and small datasets.
Create a personal organization.
Click “New project” to create a new project.
Choose a project name and database password. Don’t forget to save the password in a password manager. This password is needed if you ever want another app to make edits to your project. I recommend naming your project “Figma Makes” because you can use the same project for all your future makes.
This is the project page. There are a lot of features, but today we will mostly be using the “Table Editor.” Click on “Table Editor” in the left rail.
Click New table.
Name it “artworks.” It is important that you name the table artworks because the prompt we use later uses artworks as the database name. DO NOT CLICK SAVE YET.
When create a new table, you can either manually add columns or import data from CSV. Today, we’ll save some time by importing data.
Download my CSV file.

artworks_rows.csv
Click Import data from CSV. Upload my CSV file. Click Save.
After you click Save, you will see this error. It is expected!
Check the Primary checkbox next to the id field.
Click Save and you should see all the same data as me.
If you want to add new artwork, you can press the Insert button.

Create your art gallery

You will be creating this! Explore the working version here.

Duplicate my Figma file
Click on the frame and do Cmd C to copy the frame.
Create a new Figma Make and paste the frame directly into the Figma Make chat.

Then, use this prompt to make your gallery interactive. It’s important that your Supabase database is called “artworks.” If it is not, update the prompt to reflect what your database is called.

Make my art gallery interactive. The data populated should come from an existing Supabase database called "artworks". Help me set up my Supabase integration.

This is the scheme of my database: create table public.artworks (
  id bigint generated by default as identity not null,
  created_at timestamp with time zone not null default now(),
  name text null,
  artist text null,
  description text null,
  image text null,
  year smallint null,
  country text null,
  constraint artworks_pkey primary key (id)
) TABLESPACE pg_default;

Use the name, artist, year, and image from my database for the homepage.

How did i get the database schema?

The database schema explains how the database is structured. If you make your own database in the future, you can click the ... next to your database to get the table schema.

Prompts to try

Now, it’s open-ended time for you to explore! Here are some things you can try:

1. Explore different visual styles

Try exploring new visual styles. You can also pull inspiration from inspiration images.

Make it look 8-bit.

Make it look like Windows XP.

Make it look like Swiss design style.

2. Add new features

There are so many features you can try adding! With the Figma and Supabase integration, you can allow people to add art to the database by using the add artwork feature.

Add a feature that allows people to add artwork from this page.

Want to add more art? Use the The Art Institute of Chicago page for inspiration.

3. Explore visualizations

There are so many possibilities here. These are a couple that worked well for me.

Generate a color palette for each work of art. Put swatches under each artwork.

Create a timeline view that shows the paintings in a row

4. Design a mock up.

Using the Figma file you copied, design a new mock up. Make sure to paste the frame directly into the chat.

Make my prototype look like this.

Share your work

Publish your Figma Make site by clicking Publish.
Click Publish. It might take up to a few minutes depending on your internet connection and project complexity.
Copy the URL that appears next to URL. This is the link you can share with the public.
If you ever make changes and want the live version to be updated. Press the Update button.

How to customize the URL

Click the settings icon located next to the Publish button.
Navigate to Domains in the left menu.
Click Edit domain button.
Press Save to update the domain.

create an art archive

Published on September 17, 2025