Figma Live: Figma Make + Supabase

Hello everybody.

Welcome to the live stream. We're going

to be talking about Figma Make and Superbase today. Um, real quick before

Superbase today. Um, real quick before we get started, um, this is being live streamed. uh please be polite in the

streamed. uh please be polite in the chat and uh we're excited to talk to you today about the partnership we have. Um

let's do some quick intros first. I am

Jack Maholik and I am an engineer here at Figma Make and I'm based in San Francisco and Superbase today. Um real quick

before we get started, this is being live streamed. Uh please be polite in

live streamed. Uh please be polite in the chat and We're excited to talk to you today about the partnership we have.

Sorry. Uh Tammy, can you Sorry. There we

go. Thank you.

Oh, yeah. Okay, cool. Um, hi, my name is Tammy. Um, and I am a product product

Tammy. Um, and I am a product product designer here at Figma, um, working on make and I'm super excited to show you all a little bit about Subase.

Hey everyone, my name is Chris Caruso. I

am a solutions architect at Superbase and the Figma team invited me today to help present about Figma make and how it works with the Superbase platform.

Sweet. Uh so let's talk about Figma Make real quick. Uh so Figma make is a prompt

real quick. Uh so Figma make is a prompt to app tool that lets designers and product builders build out anything you can imagine highfidelity prototypes for

what you want to build uh and without any need for a technical background. It

means that it's a lot faster for you to sort of figure out what kinds of things you want to build. Just, you know, keep riffing and trying out new new approaches.

And Superbase is the backend as a service that spins up a full database set of authentication, signin, signup flows, as well as a ton of other functionality directly on the back end

with one click. And if you are thinking there is a similar name to this, there is a Nicki Minaj song, but this one is not for I think it's the the boys with the boom in system, but for all developers from side projects turn startups, emerging markets to

enterprise. And the really exciting part

enterprise. And the really exciting part today though is to see how Superbase unlocks Figma make.

Cool. And this is kind of where the magic happens. Um, with Superbase you

magic happens. Um, with Superbase you can now unlock flows like adding loginins, saving user data, being able to store uploaded images, files, and even more being able to call private

APIs without actually leaking or hard coding any of these secrets. Um, so with that, I think it's time to jump into some of the examples that we can do

here. I'm going to quickly take over the

here. I'm going to quickly take over the share screen so y'all can see what we are looking at. and let's get started.

Okay, so first off, I have obviously my make file open. And for our first demo, I kind of want to take you through the whole experience of building this app with make and spit base. Um, I kind of want to do this kind of fun hot takes

game where, you know, we can like crowdsource how people really feel about some hot button topics. Um, so I took a stab at making some designs in Figma already to just be like this is kind of

what I want it to look like. Um, I have gone through and just um like designed it exactly the way I want to. And now I can very simply just copy this design,

paste it in here. I might grab both just to be like I want to use both of these at the same time. And this is where I

can now prompt it and say make a hot takes game like these two images.

um where it shows the second design when someone clicks an option.

Please make the percent animate in the background and make the options

funny, please, because we all want funny options. Um, as that goes off and, uh,

options. Um, as that goes off and, uh, the LM continues to think about how it wants to do it, um, and starts writing the code, I'm going to talk a little bit

about how I set up this design, um, I to practice like like some good flow and hygiene, I made sure to use auto layout all the way through, making sure that the way that I want this to flow,

potentially how I want things to resize is somewhat coded within the designs themselves. Um, this also helps the AI

themselves. Um, this also helps the AI better understand how you would want this to behave once it's actually built out. Um, and you can see here it's going

out. Um, and you can see here it's going to go through and um pull in all of the design stuff that I have built and um

write out the code. Um, it's also uh gone through and like made sure that it's covering the funny hot takes because that's like to me the most

important part. U making sure it's like

important part. U making sure it's like hilarious. Um, and now we can start

hilarious. Um, and now we can start going through.

Oh, and just in time, it has gone through and made it. Um, and there you go. Um, the first take. Cereal with

go. Um, the first take. Cereal with

water is perfectly acceptable. Um, and I agree that this is a crime against humanity. Um, and look, it did a pretty

humanity. Um, and look, it did a pretty good job of building the thing out. It

had a couple of issues here and there.

And this is perfectly where we can use our prompt and edit tool where I can say, well, this little bit is like off.

I don't really know if I like the fact that it's like cut off. I can then use my prompt and edit tool and say, um,

this is overflowing.

Can you make sure it uh is properly uh cut off by the card and then watch it

go off and make the little tiny changes that you want to do. Um and then we can keep going as it goes. I'm going to keep playing this because it's kind of fun.

Um socks with sandals are the ultimate comfort combo. Oh, that's now going

comfort combo. Oh, that's now going through and actually making those changes. And let's see. Oh, okay. I

changes. And let's see. Oh, okay. I

think it improved a little bit, but I think we can like keep going from here.

Um, so as you can see, up until now, all this data is kind of um like mocked up.

And so this is where we think Superbase fits right in. I can ask uh the LLM to say, can you add a database that will

save the users uh votes, please?

And let it go off.

And at this point, it's thinking through about like what um I've asked for and it'll understand that maybe this is the right point for me to now connect to Superbase. Um and then we get a little

Superbase. Um and then we get a little bit of a a UI that helps you connect this up. I will press connect. Um and

this up. I will press connect. Um and

luckily we have a Superbase account already set up that I will then authorize. Um, and then once it's ready

authorize. Um, and then once it's ready to go, I can take back to Figma, at which point we can start actually

creating the right project for this. So,

if I set up a project, I have a bunch of products already set up, but maybe I want to create a brand new one. Um, and

here I can set up the project name, make sure I have a good database, um, and like just let it keep going. Um, and as it starts running, Chris, this is where I'd love to learn a little bit more

about what's happening in the back end here. Um, so tell us more.

here. Um, so tell us more.

Yes, absolutely. So, as Tammy mentioned, when you link to Superbase, you create a project which as previously mentioned gives you a whole database. And so, that is a Postgress database built with

tables and columns that you can query.

When Tammy created a new project, she selected the region. We have databases around the world that are fully able to scale up and down as required. And

what's really cool here is with just the prompt, as you maybe saw in the AI reasoning, is that they're actually going to store the votes as you participate in the database and then in real time, it'll calculate the

percentages based on real responses. And

so previously, there was just kind of the fabricated numbers as part of the demo. But now hopefully, fingers

demo. But now hopefully, fingers crossed, we will actually start to see real numbers be insert into the database and queried back with just a prompt. No

having to deal with the database driver if you will, no setting up multiple steps like in AWS. All of this was nearly instantaneous and hopefully we'll be done in just a moment.

Yeah. And you can see the AI is now also just making sure it's writing all the code it needs to to connect to the back end um and setting it all up. So

everything should just work um out of the box.

And I'm just going to keep playing it as I wait.

Um okay. I think it's ready to go. Let's

see how it works.

Okay.

So, okay. Let's get started with the first one. Water is just unflavored

first one. Water is just unflavored milk. Um, it has updated a little bit of

milk. Um, it has updated a little bit of the the version. Let me Oh, did I refresh?

Oh, we have to Did we publish this already? I don't think so. Um, this

already? I don't think so. Um, this

might be it might not have the right data.

Um, I'm going to ask it to see if I can like make sure it was correct cuz I don't know if that those numbers are right.

Um, can you make sure the uh numbers match the real uh database data

and see how it goes.

Yeah, it might have looked like it hadn't properly counted the votes yet.

and off we go.

Let's try that again.

This um I think it seems like it's collecting all of that data. So, I'm going to try and tweak it again. Um the

data should be for each card and individual question please.

Let's keep trying.

Oopsie.

Um, can you make sure it is it is collecting the right um data from the

from the real votes that are stored in the database

um as the users press options. Let's see

if that helps.

So, it looks like it has found the issue that it has that went into this. Let's see how it fixes it.

I think what's nice about this iterative approach is, you know, sometimes LLMs aren't able to get the full context or aren't sure where the error are. And of

course, as we're iterating, maybe we didn't write the full code stack as we saw here, but just using natural language, you can communicate with Figma make, which then can communicate with the database to hopefully find the right

tables to write queries to to query from. And so fingers crossed that it

from. And so fingers crossed that it that it works. But it's nice that we can go through it in this approach versus maybe having to debug code as there's already 10 files for the next hour.

Yeah. Oh, and

I don't not sure if this is updating correctly. Edit the comprehensive

correctly. Edit the comprehensive logging to make sure it's there. Um,

let's make sure that can you make sure the values are reset? Um, sorry, the

values show the real database numbers.

Please Okay, there is probably a good chance that the database stored some of the placeholder values to begin with. So, I'm going to

try and see if we can reset um some of those values um to begin with and then have it start at zero.

Tam is also going to add that there's maybe a chance that it's using still kind of the dummy data as you saw mostly because there are no values in the database perhaps and so functionally

maybe it's just trying to replace those and maybe prompting it to say if there's zero votes returned it's okay to return zero since technically you're the first user and maybe once we share it out we'll start to get more participation but we'll see.

Okay, let's try that. Let's try that out. So can you ensure you are um break

out. So can you ensure you are um break the database for the results of each

question?

Um and if none exists,

um can you show zero? Um, only show

results or answers that have existing answers. Um, and let's see where that

answers. Um, and let's see where that goes.

and This is also um really fun for me cuz you kind of get to play back and forth and see what little tweaks you can make uh while you are uh designing or working

on this to be like, "Oh, how can I make this better? How can I make this

this better? How can I make this improve?" Um it's a lot of fun like

improve?" Um it's a lot of fun like trying to debug it and seeing like what went wrong? what um areas can we, you

went wrong? what um areas can we, you know, make this better?

I don't know um Jack if you have any like tips or just in general like how to kind of help with the AI when it's like when you're trying to figure out how to debug things.

So, I've definitely felt in my experience it makes sense to sort of think through the plan that you want to get to and and break it up into smaller

pieces. Um so um you know I'll when I'm

pieces. Um so um you know I'll when I'm building something with superbase I'll often first just directly ask it to connect to superbase get that first step done um then I'll explain oh I want you

to store this in the database and it'll start storing the values then I'll say I want you to like start fetching those values for this purpose and I think guiding it along like that um means that

you can have a better success rate for each step along the way. Um, and another thing that can be really helpful, and I

I think I first saw Tom talk about this was um suggesting to the AI to add debug logs. So, if something's not working,

logs. So, if something's not working, you can say, "Okay, you know, this isn't working how I want it to."

And we're sort of getting stuck in a loop here. like how about you add some

loop here. like how about you add some debug logs so that um we can have you know all the information you need whatever you print to the console I will

copy and paste and show to you um and then the AI will go ahead and add all these logs and you can copy and paste it and I've I've definitely had a bit more success going through that technique

specifically it's a good way to get unstuck I think hey those numbers look good okay I think we finally got back on track um And so now the EI has hopefully gone through and done it properly. And

now when I'm submitting my votes, you can see, okay, now the votes are coming in. But obviously, uh, the most exciting

in. But obviously, uh, the most exciting and fun part about this is seeing everybody else's hot takes. So I'm going to go ahead and publish this. Um, and

then we are going to probably share this in the chat and see what you all think.

Um, and so I've gone up here, pressed publish at the top right. Um, and now we're waiting for this thing to publish.

and then we can kind of go for that.

Um, and so if y'all have access to that link, I'm going to refresh my uh my demo here and see what people vote for as we

go through. Okay, so

go through. Okay, so let's see if I can see if some of the votes are already coming in. I think

that one's that one's me.

Yeah, I don't I don't think we have people voting yet. I I know there's definitely a bit of a lag to the uh the stuff going out on the live streams. So, let's let's give people a couple of

minutes and um or maybe you know 45 seconds and um and then we can check in.

Yeah, I'm too excited. I get like Okay, everyone go immediately and start voting right now.

Okay. Well, I mean for this one I think we need to discuss. Um this is a crime against breakfast. That is quite clear.

against breakfast. That is quite clear.

Um I am not going to take any other other opinions here.

I mean, like, what if you're hungry, but then there's no milk? What are you going to do?

I I already cannot express how disappointed I am when I have to fall back to almond milk. Um, so water would just be a bridge too far.

Okay. Um, I agree with you. I've changed

my mind. Let's just say it's a crime.

Oh, there we go. Now we're starting to see the the numbers come in. I guess

most people also believe it is a crime against uh breakfast. Um, next one.

Socks with sandals are the ultimate comfort combo. Um,

comfort combo. Um, I feel like as a designer, I disagree.

Um, my eyes are bleeding just thinking about it. So, I'm going to go no thank

about it. So, I'm going to go no thank you. Um, and so you can start seeing

you. Um, and so you can start seeing like um, oh, some of y'all feel like this fashion is temporary. Comforts

eternal. Fair. Valid. I accept that. Um,

but as you can see, some of these votes are now coming in. They're live. Um,

pineapple belongs on pizza. Absolutely.

It is my favorite. I will not be taking questions. And now you can see some of

questions. And now you can see some of the votes that are coming in live. Um

that is the that was really fun. I've

been playing with this a lot. Um it'd be so cool to just keep doing this over and over again.

All right, that was it for demo number one.

Awesome. So I will start sharing my screen again. Um,

screen again. Um, and we're going to talk through a couple of additional demos. Um,

additional demos. Um, this first one. So, so for these next two demos, we're not going to be updating things live. Um, we've we've pre-baked them just to save time, but we're going to talk about some more

things that you can do with Superbase.

Um, so for this first one, one of the, you know, big requests we get from customers specifically is that they want to be able to prototype LLM based

applications. Uh, and that is absolutely

applications. Uh, and that is absolutely something you can do in Figma make and and something you can take to the next level with the Superbase integration.

Um, specifically in the context of, you know, building an app that uses LM access, you need to have an API key to

be able to call the LLM. Um, and you don't want people getting access to your API key or they're going to waste a lot of your money. Um, so Superbase can hold

on to that that API key for you and keep it secret. Um so you can see in in this

it secret. Um so you can see in in this initial message I was saying I wanted to build um an app which uses an LM to build web apps. Um I do want to say very

briefly the reason I wanted to show this is because at Figma make we often uh prototype the things that we want to build in Figma make ourselves. Um it's

great experience using the tool and uh provides a lot of value for us. So, I

described, you know, basically what I wanted it to build and then here at the end here, I said, you know, we're going to be accessing Claude Anthropic,

um, Anthropics LLM for, uh, you know, handling these requests.

So, please go ahead and store a secret in Superbase. Um, and so we we start off

in Superbase. Um, and so we we start off with that and you'll see in the Figma experience, you know, it goes and thinks a little bit. We connected to Superbase here and then you can see we have stored

our anthropic API key here. Um do you want to hop in and talk about secret storage real quick Chris?

Absolutely. As Jack mentioned, there's a lot of cases where you're building applications even with LMS that you'd like to integrate with other software, right? Whether it's OpenAI, Anthropic,

right? Whether it's OpenAI, Anthropic, maybe some sort of search engine tool and you need a secure way to store your secret keys otherwise you'll get built against it, it could be abused, etc. And so of course you do not want to store it

on the front end. That is extremely insecure and something we'll talk about a little bit more later. Superbase

natively offers something that we call vault and it is a secure storage of secrets that is separate from any other project. So it is completely secure in

project. So it is completely secure in our own infrastructure which I'll kind of digress from. That being said, with just a prompt inside the Figma platform, you're able to submit and give a key

with a specific key name as the anthropic API key is shown here. And

then in a secure way, the Figma platform is able to reference that key, make calls out to the API. So when you hit that publish button that Tammy did earlier, you're able to go from prototyping, designing to production

without risking any of the security there, which you would if you just copy and pasted it in.

Awesome. Thank you. Yeah. So that's that is the um the the core feature we wanted here. Um the secret storage that helps

here. Um the secret storage that helps you set up um you know the ability to interact with this LLM. And I

additionally let me see um so the next thing was similar the data storage. I I

think one big thing that you want to see right after you've got this prototype is are people using it like like what is the value that my customers are are

seeing from this thing that I've built or my my uh you know beta testers whatever. Um so I explicitly asked it to

whatever. Um so I explicitly asked it to start storing all of the messages sent in the database on the back end. um the

analytics information from this isn't something I want to directly expose to my users, but it is something that I want to have. So, we're storing all those messages in the back end. Um I

don't think there was anything else super interesting um in this chat history. We uh you know made some design

history. We uh you know made some design changes. We made some some tweaks to get

changes. We made some some tweaks to get some little bit of better performance.

But if I I hop on over to the uh Superbase dashboard here, this is a specific page within the Superbase dashboard. You can see these are some

dashboard. You can see these are some test messages from much earlier um that we have all the messages that were being sent. And now if you want to use um you

sent. And now if you want to use um you know perform some analytics on this data, understand how people are using it, you can really make a lot of progress here and understand how things

are being used. Um Chris, do you want to talk briefly about how we might, you know, utilize this data to to better understand?

Absolutely. As you can see here, this is what we call our table editor. It's kind

of on the lefth hand side. Databases can

be confusing, especially if you're coming from a noode history or low code.

And so we want to create a kind of uh Google Sheets or Excel style interface here. And so you're able to see the data

here. And so you're able to see the data very clearly. you're able to do some

very clearly. you're able to do some kind of basic filtering and sorting which is kind of right under the table name in the the center left of the screen if you want to do some basic queries there. There also is a built-in

queries there. There also is a built-in AI assistant because why not uh that allows you to write some pretty phenomenal metrics and queries and so you can even ask it to say you know what

is the most common role of the values here or what is the most common type of content or color and it can help either create those queries and display graphics and metrics around that without ever having to write any SQL which at

the end of the day it is and so as much as there is simplicity hopefully here and it's not overwhelming there's also a lot of depth and I'm happy to go a little bit deeper at the end during the Q&A session.

Awesome. Great. Thank you. I I do want to clarify to anybody who's not a developer. Um I am a developer. I know

developer. Um I am a developer. I know

for some people this is maybe a little bit overwhelming. This is not something

bit overwhelming. This is not something that you have to engage with when you're using uh Superbase in combination with Figma make. Um but it is something that

Figma make. Um but it is something that in the right circumstances really can provide a lot of value. Um so with that, let's move on to our final example. Uh

you may have heard of something called Earworm. It's uh I I think we demoed it

Earworm. It's uh I I think we demoed it at Config originally. It's uh a really fun uh music making application, a little digital groove box. Um and I'm

really excited about this because it it shows how you can take your makes to the next level with integration with Superbase. Um this is something that was

Superbase. Um this is something that was originally designed without any um you know connectivity, any backend anticipated. And so you can see we've

anticipated. And so you can see we've had um I think I'm the fourth person to modify this file now. Uh we've had Peter, we've had Nico, we've had Holly all contributing to this uh making

changes making it what it is today. And

most recently I decided you know what the UI is great. What this is missing is the ability to like sign in and and uh

you know have your songs and then share them with people. Uh so specifically I started out saying like we need some authentication right superbase has ooth

support um like let's make sure that users have to sign in and then I for this demo I I decided to uh tell it to prefer email and password. Um email and

password will work right out of the box.

There's a small amount of setup um if you want to have some other off options but for this quick demo I wanted to do that. Um, I'm going to sign in real

that. Um, I'm going to sign in real quick and uh let me get this out of the way. It's

going to keep showing up unfortunately, but I will that will be okay. Um, so now here we have we're signed in. Um, this

is my account. Um, and I actually don't know is um I don't know whether my

my computer's audio will go out on the live stream or not. Um, no. Okay, that

is okay. This is just a pattern to everybody watching. Um, so this is this is the the core earworm studio experience. Um, we've added that signin.

experience. Um, we've added that signin.

Um, Chris, do you want to talk about OOTH real quick? Yeah, I'd be happy to talk about authentication. As anyone

who's ever built an application or worked on one know that's kind of the a requirement step one almost after you have the initial idea with the superbase integration to Figma make you're able to

with just a prompt allow users to sign in or up with email password handle forgot password user management etc. And then on top of that, as Jack mentioned, you can set up social authentication

with Facebook, LinkedIn or SSO, single sign on for your more enterprise products, whether that's via Google, via Azure, etc. And on top of that, once you have the sign-in process, you can put

access controls in place. So, if I'm trying to destroy Jack's beautiful uh piece of ear artwork here, he can put controls in place that blocks me and allows me to see it and play it, but not completely ruin the musicality that he

has.

Awesome. Thank you. Um, so from here, what I really wanted was the ability to share these these out. Um, and so it didn't take much more to get to that.

Um, yeah, I had one request and then there were a couple of small errors that I asked it to fix. So basically I said, you know, make sure these songs are stored in the in the database and then

change the UI so that we can extract an ID and paste an ID for sharing the song.

Um, so you know, right up here I have the ability to save this existing song.

Sorry, I wish I'd blocked one password before this. Um, and so we have this ID

before this. Um, and so we have this ID and that song is now saved. If I if I change this to be something else and paste this ID back in, um, it goes back

to the state that it was before. And

this is just connecting to the database and loading all of those values. Um, so

I can for example send this song to somebody else and they will be able to hear the exact same thing that I created here.

Um, I think that is most of the stuff that we wanted to talk about in the context of this example.

Um, so let me switch back to the slides.

All right.

I think we have Q&A now. What questions

do we have?

Um I think we have one from Swan on X.

Um so after using Figma make to create UI, can you switch back to design mode and edit? Um so right now we are

and edit? Um so right now we are actually working on that but we don't actually have timelines to share. Um, in

the meantime, you can use the point and prompt tool to select an element and then make UI changes or prompt it to be better.

Um there's there's one question about make and super basease integration and noticing that sometimes it gets stuck or

unresponsive. Could this be an issue in

unresponsive. Could this be an issue in the future? Thoughts on that, Jack?

the future? Thoughts on that, Jack?

Um I I guess it's not immediately obvious to me what is um getting stuck and unresponsive. Um maybe maybe they're

unresponsive. Um maybe maybe they're saying make is taking a while to respond. Um definitely,

respond. Um definitely, you know, if you're asking for a pretty significant app, it can take a long time to write out all the code that is needed

to uh make everything functional. Um, it

can also spend quite a bit of time thinking before it's able to to make progress. Um, I would say if if you're,

progress. Um, I would say if if you're, you know, spending more than a minute waiting for something, um, I would I would encourage you to reach out to support. Um, that doesn't sound like the

support. Um, that doesn't sound like the experience we would expect.

Um, someone asks, uh, could we make an app with these features with as little human input as possible?

Um, yeah, I I I think definitely Figma make is intended to support building out these uh experiences without requiring

as much human support. fundamentally you

still need somebody to, you know, have the vision, uh, like have the input of of what is going to be built. Um, but

this definitely opens a lot of opportunities.

Um, for what it's worth, I actually think the fun part is just me being able to sit there and tell you what to do with as much detail as I want to. Um,

and I think we could definitely get to a future where it can do that, but like what's the fun in that? Like the the joy is being able to create something with our own thoughts and our own mind and like being able to direct the the things

that we make.

Yeah. And you're definitely able to riff at an unprecedented speed at this point.

Uh what I was originally most excited about in the context of make is the ability to prototype at the interaction layer. Um I think you know Figma has a

layer. Um I think you know Figma has a long history of allowing people to prototype static designs. Um, and being

able to very quickly test out new ways of interacting with your prototypes, um, is really a big unlock from a lot of the customers I've talked to.

Cool. Yeah, sorry, catching up on the chat here.

It looks like we have a question on making sure more about being able to use your own custom domains. Um I think we already do support that. So when you go to publish it, there should be a setting

for you to connect your own domain. Um

and you can follow the flow for that.

Yeah, there will there will definitely be a um help center article about that.

Can I store secrets for other services?

Yeah. Um the secret storage is a generic secret storage service. Um so in in this

example, we used the um you know, we used Anthropic to make requests to Claude for for uh building this out. Um

but absolutely any service that has an API key you can you can store that in superbase secret storage um for for

connecting with that service.

Um uh here's one make sometimes changes things that you don't want it to change.

We often have to tell it do not change anything except for XY Z. any fixes uh coming for that. Um we're definitely working on stuff. Um but obviously like we're going through like there's no

clear timelines on that yet. Um that

being said, some of the things that I like to do to deal with this is asking the LM LLM to just um you know chunk up the things that it makes into separate files into separate areas so there's a

less likely chance that it's going to touch everything within a single file.

Um so making sure your important pieces are individually uh you know moved into its own areas will limit um how likely it is to change lots of other things.

So I think there's there's one interesting question here. Um will it work normally in other languages? Um,

you should expect this to work reasonably well in in pretty much any human language that has like a written

form. Um, we will only be officially

form. Um, we will only be officially supporting languages that, you know, Figma generally supports for all of its

products. Um, but

products. Um, but just as as a side effect of the way that it's built, this will work reasonably well in pretty much any language.

Um, another one here is can I bring my design file into the base to protype it?

Um, you can bring your designs themselves. So like the frames that you

themselves. So like the frames that you can copy and paste. Um that will help you that will help give make a starting point that you can then build your prototype on. You can continue to bring

prototype on. You can continue to bring in other designs as you're working through and chatting with it. So if you have one design, you can bring in another design at a later point while you're prompting to say, "Okay, now add

this screen or this screen." So that it can like iteratively build out the full prototype that you're looking for.

Oh, there's a there's a good question maybe for Chris. Um, what is the lifespan of these database back prototypes? How long do they stick

prototypes? How long do they stick around for?

Yeah, that is a phenomenal question. So,

when you create a Superbase connection through the Figma make platform, you get your own project on our free plan, which I'd like to think is is quite good. You

get all the functionality that is included with the the other paid plans.

you get I believe it is five days give or take maybe it's three to six days of uh unused projects before they're paused. So if it's not accessed in any

paused. So if it's not accessed in any way for a week it does get paused because we kind of pay for that on the other side. That being said as soon as

other side. That being said as soon as you access it again it'll spin the project back up. So it is auto pause after a couple days. It comes back up if you use it. And thank you for superbase

question. I appreciate that.

question. I appreciate that.

So Chris, are there any implications to uh a superbase project being paused?

Yeah, a a really good question. If you

build a make, say you publish it like this game and it doesn't get used for a week or so and then you share it with your friends on your next weekend because you know you're sharing apps on a Friday afternoon, then what could

happen is that the database is not be able to get queried and you'd have to go to the Superbase dashboard and just click a little button to resume project.

So it wouldn't add an extra step. Be

wary if you've come back after a week or so, but in the long term there shouldn't be any issues of restarting a paused project.

Okay awesome.

I'm seeing another question about can I download and run the project locally and I think we can. Um in the code view of make there is a button for you to

download um your code.

Yes. Um so that is that is functionality that um we've had for a little while now. Um and we're aware of some feedback

now. Um and we're aware of some feedback related to it. Um stay tuned for some exciting updates.

So, we're seeing a lot of questions around design system integration. We

definitely have a lot more coming soon here, but nothing specific to share quite yet.

I do see a question regarding limits of Superbase and Figma on request size, concurrency, etc. And so maybe Jack afterwards I can let you touch on the Figma side. On the Superbase side, it is

Figma side. On the Superbase side, it is just a Postgress database. And so I believe it's 500 kilobytes, but I'd have to get back to you on the the total request size. Of course, as is good

request size. Of course, as is good heruristics, having small requests at volume is better than extremely large requests. That being said, if you were

requests. That being said, if you were doing something like an object store to upload an image, you can go up to 500 GB on an image size with partial uploads.

If it's data inside the database, whether that's information about the votes for the game or the JSON that Jack showed us for the musical app, then there should be no concerns there. In

terms of concurrency, that's a a pretty uh specific topic. The high level is that it is one computer, one database instance that you get and so you can with all Postgress databases make

requests in parallel and it'll handle to make sure that the source of truth stays linear. So there's no problem there. But

linear. So there's no problem there. But

if there is any specific questions, feel free to reach out to me afterwards. I'm

happy to give my email and I would be happy to nerd out about it for a while with you.

Great. Yeah. And and and just to follow up on the Figma aspects of that, I don't think there's really too many constraints that we place on this. Um

this is a make that runs in your browser. So there con basically the

browser. So there con basically the constraints will be whatever the brows the browser imposes upon it from Figma's side. Yeah.

side. Yeah.

Okay, we we got um one question about whether Superbase functionality is available today in make and it absolutely is. Uh we launched a couple

absolutely is. Uh we launched a couple days ago. Um so please try it out and uh

days ago. Um so please try it out and uh and let us know what you build.

I see one regarding how Superbase syncs context or content rather within Figma components. You give examples of text

components. You give examples of text layers, image files, etc. I will not speak to the Figma side, but when you store with Superbase, you can think about it more storing your user data,

right? So, if someone enters uh their

right? So, if someone enters uh their votes to the chat app or creates a web form for a shopping list or a to-do app, that's the data that's stored in Superbase. The superbase database

Superbase. The superbase database doesn't actually host any of the Figma specific design elements, i.e. the text

layers, the image fills, etc. Jack, I don't know if you want to talk a little bit about that, but that is not where the superbase part fits in. More so the end user data.

Um, I don't I don't think we have too much to say on that topic. Um I I did want to shout out um one of my favorite Superbase features which we actually

didn't demo today. Uh which is the like real time functionality of Superbase. Um

I have built a lot of really fun games based on this. You can you know uh live or like real time update players locations um and scores things like

that. Um, I also built a

that. Um, I also built a uh like online painting canvas where where you know people can collaborate on on uh building a picture together. Uh,

lots of really fun stuff. It's um not quite as um the things I've built haven't been as as focused on, you know, like business

value, but uh they've been a lot of really fun things. And honestly, they're the ones I've enjoyed the most.

Let's See you.

Jack, did you see the one by chance on the the stack? Obviously, I'm happy to talk about the back end, but if you want to talk about the default stack of what Figma make creates. Um, sure. Yeah, I

I'm I'm glad you uh clarified that. I

had skipped it because I I didn't quite understand it, but it makes more sense in that context. Um, yeah, on on the front end, we are primarily building

React apps. Um we have like we will

React apps. Um we have like we will typically include shad CN components um

for the default but um you know the make is not forced to use those you can you can add additional constraints um and other interesting aspects uh

besides react it's typescript which helps a lot um and then there's a few components that are Figma specific that we use. But

um when you do download the code, we we you know have a sort of eject functionality for that.

See, there was one or two superbase related questions. One regarding I'm

related questions. One regarding I'm going to ping pong a little bit here about maybe projects that you can have.

I will say that with Superbase on the free plan, you get two free projects.

From there you can the next plan is 20 bucks a month, 25 maybe and you can get unlimited projects from there. And so

hopefully it's enough to get you started and and hopefully I believe that the the cost isn't prohibitive if you want to have 5 10 20 projects from there. Um

once again I'm happy to speak more about it offline. And then I think there was

it offline. And then I think there was maybe one more superbase question. Um

yeah there was a good one for designers leveraging the Figma make and superbase integration. How can we best utilize

integration. How can we best utilize seamless back-end capabilities, eg real-time data authentication and storage? What a phenomenal question.

storage? What a phenomenal question.

Just like we use some of the features today, authentication and uh the database, you should be able to prompt the Figma make agent to design it for you. You can say, I want to use real

you. You can say, I want to use real time within Subabase. I want to stream changes to this table or this view within the front end. I want a button that allows me to drag and drop a file

to upload. And it should configure it on

to upload. And it should configure it on the back end. It'll make use of the different products within Supabase, whether that's object or image storage, whether that's real time, as you said, authentication, and hopefully you should

be able to just prompt via natural language and have the functionality come up without ever having to write the code. And if it does have issues, then

code. And if it does have issues, then you can use the iterative approach that we saw in the first demo to kind of work towards that solution.

I see more Superbase questions, so I'm going to roll with it um until you tell me to to not. Um, one more question was regarding connecting APIs that are stored in Superbase. How easy is it to

fetch the APIs to Figma make and how secure is make when handling the APIs?

Another really phenomenal question. One

part of Superbase that hopefully makes it work well with make is that when you create a database and you have a table per se, we automatically generate data APIs we call them and that allows you to

directly call them from the client side.

And so hopefully when you prompt Figma make it'll make use of those APIs. It is

just part of the JavaScript or TypeScript software development kit or SDK that we have. And so you're able to directly call it from the client side. A

good call out you had is how secure it is. If you use keys correctly, as Jack

is. If you use keys correctly, as Jack kind of showed, and store them in vault and don't put any public or private keys on the client side, you'll be able to query the database securely and the

APIs. So, um, it can get a little bit

APIs. So, um, it can get a little bit complex as you get into the nitty-gritty detail, but similar to the other features, you should be able to get started with just a prompt and go from there.

Awesome. I think that's about as much as we have time for. Um, so thank you everybody for joining us today. Um, was

there anything else Tammy or Chris you wanted to say real quick before we wrap?

Just thank you all so much and we're so excited to see what you make and all the cool stuff that y'all come up with. I'm

always so impressed about uh when you design this kind of stuff and then you see what people actually come up with it. It's just like mind-blowing the

it. It's just like mind-blowing the things that everyone is able to do and create and how you can like really push it to the limit. And so, please use it, give feedback, tell us more. Um, and I'm

just excited to see what you'll make.

Sweet. Um, thank you all for joining.

Thank you very much, Chris, for joining us today. And I hope you all have

us today. And I hope you all have