Building Prototypes with AI - Figma Make Live Demo

Uh today we're going to talk about building prototypes faster AI workflows for designers. Thank you all for taking

for designers. Thank you all for taking some time to come out and have a listen to kind of how you can integrate this into your workflow. As a designer

myself, I you know find prototyping as one of those things that's not necessarily the most creative. If you

have ever used Figma for building a prototype, I'm sure you're familiar with their noodle system and like dragging all of the noodles around your screen and clicking lots of buttons to make things happen so that you can demo to

either your team or stakeholders things that you would like to achieve in development. Uh so we're going to walk

development. Uh so we're going to walk through how to make that process happen a little bit faster and even do some things that you can't typically do within the normal Figma prototyping universe. So first we're going to talk

universe. So first we're going to talk about a little setup and getting started. I am going to give an overview

started. I am going to give an overview of some key terms. I wanted to make sure that this talk was inclusive of folks who have never used AI or are just kind of starting to get their feet wet with

the process. So, I'm going to talk about

the process. So, I'm going to talk about some key glossery terms that will help you in your journey to adding AI tools into your workflow. Uh then I'm going to talk about some different tools that

I've personally tried for prototyping.

We're going to do a live demo today uh using Figma Make and I'm going to talk about how to prep your Figma files, some best practices. I'm going to go into a

best practices. I'm going to go into a Figma make overview, talk about all the different things you can do with prototyping within there, how to set it up, and we are actually going to create a live clickable prototype of Instacart

search experience using AI today, which is very exciting. Um, and then very kind of final wrap-up after the demo, I'm going to talk about some limitations of

AI prototyping that I've run into. some

things to keep in mind as you're kind of working through the explorations in your own time and then some different use cases and real world applications where you can start to integrate this into

your own process. Uh finally we are going to leave uh 10 to 15 minutes at the end for Q&A open discussion and questions. Um so with that um a little

questions. Um so with that um a little bit about me. Um my name is Brianna Shabi. I have been a design lead uh with

Shabi. I have been a design lead uh with Headway for the last 5 years. Um and

I've have 15 years of experience working with startups and enterprise organizations within the tech space. Um

I'm a multi multid-disciplinary designer. I've led global teams in the

designer. I've led global teams in the past um at a pretty big market research firm and then moved over to headway uh in 2020 during the pandemic um and have been working here with lots of startups

and enterprise level organizations building uh both kind of like big software and then small mobile apps uh for startups. Um, prior to kind of those

for startups. Um, prior to kind of those uh kind of career highs, I actually started my career as a print designer at a very small catalog company. Um, and

yeah, that was kind of where my my design journey started. Worked in in design. The industry was a very

design. The industry was a very different space. We were just starting

different space. We were just starting to uh kind of learn about apps and prototyping and things like that. So uh

here we are very excited uh to kind of get to get to present on AI prototyping today. To kick us off, I wanted to again

today. To kick us off, I wanted to again just kind of give an overview of a couple of important terms to know. Um so

you've probably heard these terms in conversation. Maybe you have been

conversation. Maybe you have been experimenting with AI yourself and you're super familiar with these terms. Um, we have been kind of talking about AI a lot within our Headway team and

getting to understand the different principles and ways we can integrate it into our process. But the first thing that we did as a team was what the heck are these things that we're reading about and we're really trying to

understand uh we actually made a glossery in our team notion. So I

brought some of those terms here to help y'all. Um, so the first one I want to go

y'all. Um, so the first one I want to go over is just the open agentic web or web 4.0. know and this is basically just a

4.0. know and this is basically just a new paradigm shift in how we're interacting with the internet. Um so

instead of kind of our normal experience that we're used to, we're shifting to the use of AI agents that are acting autonomously and they're helping us to make decisions on their own and complete

tasks um without the need for a human to actually push the buttons on their behalf. Um, kind of alongside this

behalf. Um, kind of alongside this space, you've probably heard the term LLM, which stands for large language model. Um, and this is just a a term for

model. Um, and this is just a a term for a type of artificial intelligence that's trained on tons and tons of data to essentially help us generate um

different languages um that humans can interact with and read and understand.

Um so some examples of this are Google's Gemini OpenAI's chat GPT and um Anthropics Cloud. Um we also want to

Anthropics Cloud. Um we also want to make sure we understand the difference between an LLM and an AI agent. So the

agent itself is the system that uses the tools in its own reasoning to autonomously perform the tasks and achieve goals. That's kind of operating

achieve goals. That's kind of operating within the LLM. So the agent is the thing that you are specifically interacting with and the LLM is the model that that agent is working on to

perform those tasks. Um and then finally I'm going to talk a little bit about MCP today as well in context of a couple of the tools that I've explored as part of

my prototyping exploration. Um model

context protocol is what that stands for and it's essentially um helping to provide context to the RLM in a standardized way. Um, and what's cool

standardized way. Um, and what's cool about this is you can actually connect um multiple uh things together and it's a standardized way to do that. So, this

was like a huge revelation in the space.

Um, and now you can kind of link up things like Figma or um Loom or all these different um MCP tools. Um, you

can link those up into um your AI workflow which is again pretty pretty awesome. Um, so now that we have an

awesome. Um, so now that we have an understanding of these four terms, this should help with anyone who's new to the space, um, and understanding what we're going to be talking about today. Um, so

I mentioned I've explored a few different tools for prototyping. Uh,

some of the most popular ones that I have taken a look at are Figma Make, which we're actually going to be doing a demo with that tool today. Um, I also spent a lot of time in cursor and um, a

little bit of time in cloud code. Um

there are some pros and cons that I want to make everyone aware of and kind of some things to think about when um deciding for yourself which tool might

be the best for your specific workflow and needs. Um so of course we have Figma

and needs. Um so of course we have Figma Make. Uh kind of the big

Make. Uh kind of the big um pro to Figma Make is really just that it's built into Figma. It's already

within the workflow. It's already if you're on a paid seat on a professional organization or enterprise plan, you're going to have access to it automatically. You don't have to pay for

automatically. You don't have to pay for an additional tool and adding that expense into your tool uh software arsenal. Um so that's kind of a benefit

arsenal. Um so that's kind of a benefit in and of itself. Uh because of the fact that it's already in Figma, it's also very easy to work with. Um and it's kind of set up for design use um just by

nature of the fact that Figma is primarily a tool for designers. Um it

does leverage anthropics cla uh right now uh claw does have a kind of additional version out which is the 4.5.

Um so just kind of keep that in mind. I

believe they're still at the time when I was kind of going through this um a couple of weeks ago and putting this presentation together they were still running four. Um so perhaps they have

running four. Um so perhaps they have since updated it. But um another thing to kind of keep in mind here is that um you're able to export your design system

file for more accuracy. We are going to go through that process. Um knowing that a lot of design designers are using design systems, we wanted to make sure that uh that was something we covered

within this talk. Um and just being in Figma, it allows you to utilize a lot of the visual assets that you you have. Um,

and one kind of caveat with this is that you can pretty much only generate web designs. Uh, mobile design within this

designs. Uh, mobile design within this tool is very difficult. I would say that's a trend throughout the majority of the tools. It's very web ccentric.

Um, so hopefully in you know the coming months things will change if you are a mobile app designer. Um, there are some things that you can still kind of prototype and use, but it isn't going to

be as clean as building like a a desktop experience. Um so that's Figma make I

experience. Um so that's Figma make I did mention I did a lot of exploration in cursor. Um so cursor is pretty cool.

in cursor. Um so cursor is pretty cool.

Uh this looks a lot different than Figma make. It is much more of a kind of like

make. It is much more of a kind of like dev ccentric uh code view. Um it's you have your you have a real time editor which is really cool. Uh you can get in

here and actually edit the code V live which is um a little more complicated with the Figma make situation. Um this

does require connecting to the Figma MCP or you can also connect other MCPS if you're looking to have a more complicated flow and you're using other tools within your process that have MCPS

available to add. Um it does have its own interface which is very userfriendly. There is a a screenshot of

userfriendly. There is a a screenshot of it on this side. You can kind of see we have our um our live code that is editable on the um kind of side here and

then you have the area in which you're prompting and interacting. Um here one thing I really liked about cursor is that you can actually choose from

different LLMs. So here you'll see that in this particular screenshot um I was working with claude 4.5 sonnet which at the again at the time of kind of going

through this exploration a couple of weeks ago this was the best of the best for prototyping. So that was the one

for prototyping. So that was the one that I was using but I did experiment with some of the others. There are six or seven options in there. So if kind of depending again on what you're what you're looking to do with it there are

some some options. Um there is a cost for this depending on uh kind of what you're looking to do. There are some different tiers here which I have listed

uh just kind of for info. Um and then this was kind of like the I would say the intermediary tool uh between your Figma make and then somebody who wants a

little bit more of a dev experience um and can connect up different MCPS and do multiple things. And then kind of the uh

multiple things. And then kind of the uh I would say very advanced tool is claude code. Um you may have interacted with

code. Um you may have interacted with claude. Uh basic claude is just uh it's

claude. Uh basic claude is just uh it's more of like a GPT experience where you're just kind of textbased um communicating with the agent to get it

to complete tasks. Um however cloud code is very much a developer and engineer centric tool. It's terminal based. Um

centric tool. It's terminal based. Um

it's very cool. You can do multiple file operations at once. It's completely

autonomous. You could run multiple agents at once. Um it's very powerful and I would say that um the the biggest kind of barrier for me personally as a

designer was that I'm not super comfortable in the terminal. Uh so I had a lot more success with setup and use of both of the previous tools Figma make

and being in Figma. I'm super familiar with Figma. Um, and then cursor I felt

with Figma. Um, and then cursor I felt like was even not having um been super um in the the kind of like the code space in a while. I do know how to read

HTML, CSS, and Java. So, uh kind of going in there and being able to uh put that hat back on uh was not as jarring as uh trying to get into the command

line and uh work in that capacity. Um

however again if you are someone who has an engineering background or is um very close friends with an engineer on your team or um in your freelancing space um

this is definitely a really cool tool. I

recommend checking it out. Um but it is definitely positioned in the market for folks who are command line users and more of a power user situation. Um this

does also have a subscription fee for uh doing this type of work with the tool.

So again, this would just be like an added expense to your um kind of portfolio of tools.

Um so with that, we're going to go ahead and jump in to the Figma make demo. Um

now that you guys have an overview of some AI terms, um kind of what's happening within the space, some tools and pros and cons, um we're going to be taking a look at what we're going to be

building. So I'm sure everyone here is

building. So I'm sure everyone here is at least semifamiliar with Instacart.

Um, I know that I usually if I'm going to use this tool, uh, will order on my my mobile app. Um, but again, for the purposes of this prototype demo, I wanted to go with a web experience, and

that's since that's really where everything's happening. Um, so right

everything's happening. Um, so right here, we're looking at the instore experience for Aldi. Um, and you'll see

that we have this navigation on the top.

So for the purpose of prototyping, I really wanted to start with an experience that was already built. I

didn't want to start from zero because the problem I was solving for was how do I actually prototype something, not building the experience to prototype.

Um, so that's kind of how I was thinking about this. You'll see that we have this

about this. You'll see that we have this animation uh that's moving through the search bar uh that is suggesting this is Instacart's AI suggested search. So it's

giving us different search terms that we can populate. If I open this up, we do

can populate. If I open this up, we do get an active focus state. We have some these kind of search terms are appearing here in a scrollable list with some

tags. Um and then we have some hover

tags. Um and then we have some hover states with some images for all these different search categories. Um and this is also scrollable. In addition, we have like a toggle here for pickup and

delivery which gives us some different options. Um, so we're going to actually

options. Um, so we're going to actually be building out the search experience in the top. Um, we're not going to focus on

the top. Um, we're not going to focus on this menu on the side or the body. It's

really just going to be this top area and then this window. Um, so with that, I'm going to hop back over to Figma. So

from here, uh, the first thing I did when thinking about how to actually go about prototyping this was I have my link that we just looked at. I started

looking at like, okay, the search bar is animated and it's scrolling through suggested search queries and I kind of took these screenshots of all the things that we just saw live on

the website to kind of break down the pieces of the prototype that I would need. Uh, kind of thinking about if I

need. Uh, kind of thinking about if I were to show this to a developer or a client or a stakeholder on a project.

Again, like if we're thinking about search as a feature, the other stuff on the page doesn't really matter as much.

um we're just really focused in on the actual act of searching and what that what that is going to yield for the user. Um so the next thing I did is I

user. Um so the next thing I did is I built out some components. So I

mentioned that we're going to talk a little bit about design systems. Uh so here at Headway we have an in-house design system. You can actually download

design system. You can actually download it on uh Figma community if you're interested in checking it out or using it to experiment with prototyping with

AI. Um feel free to check that out.

AI. Um feel free to check that out.

Um, so I essentially just duplicated a a fresh file of Shipwrite Pro and I added that to my Figma file. You see we do

have token spacing, all these things.

And to get started, I have that added.

And then I went ahead and built these components with all of the atoms and organisms within that design system to kind of match what Instacart was doing.

I Instacart has a proprietary font. Um,

so I just went and found something that looked like moderately similar, updated all of my styles in uh the variables file uh portion of the design system and

then kind of published that out so that I could use it here. And then I ended up with uh kind of this experience. We've

got our search modal here with all those tags, uh some different categories, uh these chips. So kind of ended up with

this. And then what we're going to do

this. And then what we're going to do next is we're going to hop into Figma make and start prototyping this. So the

first kind of set step in prototyping is actually building out the mockup of what you want to make. So keep in mind we do have all of these screenshots that have like kind of different phases of the

prototype. All you'll need for Figma

prototype. All you'll need for Figma make is just kind of the final results.

Um you can you don't need to kind of add in every single in between step.

uh Figma make does a pretty good job of filling in the the gaps for you as long as you kind of prompt it accordingly. Uh

so just be very detailed in prompts. I

am going to talk a little bit about how to craft prompts and how I think about doing that as well. Uh so one thing you'll notice here is that uh I used the

same placeholder image. So we are going to ask AI to replace those images as well as part of this uh kind of experiment. So the first thing we want

experiment. So the first thing we want to do for Figma make is order to use our design system is we actually need to

publish our design system for use within uh the make space. So if I go here

and go into our library section, we're going to hop over and you should see um we are in the design system file.

So just keep that in mind. You do have to do this directly from the design system. We're going to go to publish and

system. We're going to go to publish and at the bottom um you'll see this export to Figma make. They've made it very large. You can't miss it. Um before you

large. You can't miss it. Um before you do that, if you have made any changes to your design system, you want to make sure those are published or hidden. Um

so that way that doesn't kind of interfere with anything that you've used in your files. Make sure your publication of the design system and is up to date. And then we can go ahead and

export this directly to Figma make.

So this is this is going to kind of appear at the bottom of the screen.

You'll get this little um thinker animation wheel here. Uh and this is going to take a couple minutes. So while

that is percolating over there, we're going to go hop back into our files. So very

important before you go into Figma Made to start building um connecting your design system, you want to make sure that your layers are named correctly. And you also

want to make sure that all of your variables and tokens and all those fun things are connected up. Um so you'll notice that we have our frame here.

We've got this search modal. Um, so I'm gonna actually use the uh rename layers tool here. Um, and

we're going to get AI to help us rename these layers. Um, re renaming your

these layers. Um, re renaming your layers is very important. Um, it looks like it missed a couple. So, we're going to have it

do that again.

And again, it is helpful to check these things. Um, we can have it

things. Um, we can have it go into here.

Make sure this is working.

And it looks like we still have a couple of frame five. So I'm just going to name this manually.

Container and container.

All right. Um, so again, not perfect and I think that's where like definitely check your work and check the work of the AI comes in. uh you want to make sure that everything is uh kind of

connected and working properly. So

again, important to check to make sure that anything that you've built using your components in your design system is hooked up properly. You want to make sure that you're using any of your

spacing tokens. Um

spacing tokens. Um if you have rounded edges, border radius, uh your fill colors, all of those things are feeding from the

library that you want to pull. Um,

and that should leave you with this. Um,

so let's go back and make sure. Oh,

nope. We're still extracting. Um, so

while that is thinking, I have already extracted this. So, I just want to we

extracted this. So, I just want to we can kind of move ahead here, but I did want to make sure that you guys all had an understanding of how to connect up that

library to the prototype portion so that you can get um what you need out of make. Um so, because I've already

make. Um so, because I've already connected that, essentially what happens is when this is finished, we'll get a notification saying that we can use it within make. Um once you've added it,

within make. Um once you've added it, you don't actually have to read it every time, which is pretty cool. Um so, I do already have it here. um kind of

pre-baked for you guys. Um and in order to start the prototype process, this is a fresh make file. We're going to press this plus button. You want to add your design system first, then go over to

this plus button, and we're going to attach a design. Um because we're in Figma, you can actually just attach the design directly from your file. Um you

can also upload an image if you wanted to do it that way. Um, I have found that this method works a little bit better and is more accurate. So, you're going

to want to copy the frame. Uh, so again, this is the last phase in that prototype that we're going to be building. And

we're going to go here, attach our design, and I'm just going to use the hotkeys to paste this in.

And the last step in this process is actually the prompt. So, for the purposes of the demo, I have pre-baked some prompts that I'm going to copy and

paste in. And then while this is

paste in. And then while this is thinking, um, I will talk about crafting prompts. Um, so once you've got your

prompts. Um, so once you've got your prompt in here, you can go ahead and press that blue arrow as I did. You're

going to get this, uh, fun animation while it's building out your idea, and it's going to tell you what it's doing on the side. Um, so it kind of takes what you gave it and spits out what it's

asking you to do. It'll tell you again like I'm creating this file and writing this code and so on and so forth. Um, so

what's really cool about Figma is that while this is thinking, I can actually go back into other files and work. That

is one of my biggest complaints about cursor. Um, when I was com when I was

cursor. Um, when I was com when I was working with cursor to try to get it to prototype and build the same exact thing, you actually have to keep your uh frame selected the entire time. So, I

have to keep this here. I cannot move off of this. I can't go work anywhere else. I just have to keep it like this.

else. I just have to keep it like this.

Uh, which these prototypes take a little bit of time to build. They're not uh super heavy duty, but you you know 10 15 minutes sometimes. So it does it does

minutes sometimes. So it does it does result in like if you're doing that multiple times throughout your work workday kind of just not being able to use Figma isn't the greatest. Uh so being able to

use uh Figma other files work within a file is really helpful. Um in terms of the prompt itself and thinking about prompting I've asked it to create a clickable prototype of the search design

that does the following. Um, so I have found that I like giving it like a list of things. And I try to think about uh

of things. And I try to think about uh prompting the agent as if it were a human person that I was giving instructions to. So if I was giving

instructions to. So if I was giving instructions to an intern on our team or a designer that was reporting to me in a meeting, I would tell them like, hey, here's like five things that I would like to have done by the end of the day

and paint done for them. Um, and when it's as it's kind of thinking here. Oh,

and look, we have a we have an example.

Um, I will uh kind of talk about this and then switch over to uh more prompting things um as we continue to

prompt it. Uh so you'll notice that it

prompt it. Uh so you'll notice that it spits out this version. Um we have the animation working because I did ask it to add functionality to the search input

field. um add an animation to the text

field. um add an animation to the text in which the text automatically changes every 1 second with the following queries.

And I did pull these queries directly from Instacart. Um and then once all of

from Instacart. Um and then once all of those options have been shown on the screen, you can restart the animation from the beginning. So again, very specific on what I'm asking it to do. I

did ask for a scrollable menu with chevrons and these all work. All of

these look exactly like my starting point here.

And then um if we you'll notice that if I click play on this to get out of the the make view, you'll get like a full window of this. Um

you'll notice a couple of things are not are not necessarily working how we want.

The first thing I notice, which is super obvious, is our nav is not full width.

So, automatically I'm like, "Okay, we got to fix that." Um, and then the other thing is that I cannot click out of this menu at all. It's just like totally stuck here. Um, but my animation is

stuck here. Um, but my animation is working. My scrolling is working. I've

working. My scrolling is working. I've

got some hover states. Um, all working here. And then my toggle also not

here. And then my toggle also not working. Um, so our next step in the

working. Um, so our next step in the process is okay, we've got a starting point. It's not perfect. So, we're going

point. It's not perfect. So, we're going to keep prompting. Uh so we're going to go back over to not ship right. Um we're

going to go back over here and uh you'll notice that we do get some warnings. Um so if you see these things

warnings. Um so if you see these things um you can have it fix it. And while

it's doing that I'm going to get our second prompt. So in terms of

prompt. So in terms of again kind of thinking about um speaking to a human uh you do want to be really specific. And I found that the more

specific. And I found that the more specific you are and like giving it a list of things does work really well, you'll notice that in the next um couple prompt sets that I'm going to drop in

here after it kind of adjusts this error. Um I do like to structure them in

error. Um I do like to structure them in like a list format.

It also like when it reads if you feed it like a a paragraph of text, it will end up spitting it out into a list and it it'll say like, "Oh, you're asking me to do number one, two, three." and it'll

just kind of go into that format anyway.

So, that was almost what gave me the idea to start prompting it that way. Um,

all right. So, it looks like it has fixed that error. So, we can go into this next prompt. So, I'm going to go ahead and

fix it. Fixed the update and is now

fix it. Fixed the update and is now using the CSS variables. Um, so we're going to scroll down here. So the next kind of step in the process I have is

adjusting those items that I just called out. So we're going to ask it to fix the

out. So we're going to ask it to fix the ability uh to actually close the modal so that it's not just stuck there. Um we are going to replace the images in the tiles

with things that reflect the label. So

we are still using that same stock photo of Seltzer.

Um so we do want it to reflect all the different categories. We do want it to

different categories. We do want it to um adjust the search animation. One of

the things that I noticed when I was taking a look at this and comparing it to the Instacart is that you'll notice that this is just kind of automatically changing the text, but it's not doing that. Um if we were to hop over to the

that. Um if we were to hop over to the Instacart, it has like a really nice um kind of like scroll upward sliding motion. So, just kind of describing that

motion. So, just kind of describing that to it. And then I had mentioned that we

to it. And then I had mentioned that we wanted it to fix our picker toggle. Um,

and the animation portion of this is really exciting to me personally, just because I can't tell you guys how many times I've been trying to describe to a client or developers on our team like

how I want an animation to look for something like this. And previously with uh the limitations that we had with Figma prototyping, we were really kind

of stuck with um going to find an example online and being like, well, I want it to look like this, but also I like these elements from this example and then kind of leaving it up to like

the client or your engineer to interpret what you mean. Um but now this gives you like an actual tangible representation of something. Um and and really being

of something. Um and and really being able to show that off. So, it looks like

we have fixed this, but I cannot click back into this. So, let's click play.

And that's weird. So, now I can't get into the search menu. So, we'll have to fix that. Um, so yeah. And again, I have

fix that. Um, so yeah. And again, I have gone through I think one thing that is worth calling out within this exercise is that I have done this specific demo

several times through. I've done it both on Figma make and cursor and have gotten different results every time. So, your

prompts do matter. Um, I will say that there is a level of consistency that I've seen each time, but there's not like a set path that is going to get you

the exact same result, which is a little interesting. Um, but it does kind of

interesting. Um, but it does kind of give you the opportunity to kind of work on on the fly with some of these things.

Um, so the last the last set I'm going to drop in here and then I will see what we get and then I'm going to try to fix anything that's

still broken. Um, so we're going to ask

still broken. Um, so we're going to ask it to make the following updates.

And from here, uh, so we're asking it to adjust the navigation to be full width since we still haven't fixed that. Uh,

the search modal should be closed at the start of the prototype because it was open. So I'm hoping that will fix this

open. So I'm hoping that will fix this issue here where we can no longer get in and out of the input field. And then we want to add hover states to our tiles.

Um which it may have added those already, but we're going to close out of this for now.

And we'll give this a few minutes.

Um, all right. And we have an updated

all right. And we have an updated version. So, as you guys can see, this

version. So, as you guys can see, this does move pretty quickly. It's like

really the initial version. um the the more things you're asking it to do, the longer it will take. Uh that first version is usually the thing that takes several minutes to really spit out, but

as you're um kind of prompting it and getting it to make adjustments, it does usually move a lot faster um in kind of my experience using this so far. Um so

it looks like it has changed our our full width. Uh the drop down is closed

full width. Uh the drop down is closed at the start. We'll we'll double check that for sure. And then we've got uh some hover states on the tiles. So um

you can view it here. And this is sort of like the if anyone used Dreamweaver back in the day, like the Wizzywig editor where you can kind of see what you're doing on one panel and then what you're getting on

the other. Um I like to view it in the

the other. Um I like to view it in the prototype window. I just think it's

prototype window. I just think it's easier to see. Um and it makes the interactive experience a little bit more robust. Um so our toggles are working.

robust. Um so our toggles are working.

This is not right. If you guys can see, our focus state or selected state looks a little bit different. And now we can't get into the input. So that's

interesting. Um, so we're going to let it know, um, can you make

some additional changes? Uh the search

input field is not um clickable

um and will not open when I try to access it. I would like it to

access it. I would like it to do the following.

Click on the um default state of the search input. I

would like the modal to open.

When I click outside of the modal, I want it to close. All right. So, let's

see um see what we get.

While it's doing that, um, this was a previous version of the demo, um, that I prompted with four sets of prompts. The

three that I fed it live and then also one additional one because I did notice an error. Um, so you'll notice that this

an error. Um, so you'll notice that this time our toggle was working. It pulled

our focus state correctly or our selected state.

And then this does click on and off. And

we can scroll. And we do have all of our images, which it did populate the images. So, just kind of a a note for

images. So, just kind of a a note for folks, this has happened um you know, multiple times when I've been using not only this tool, but um cursor and cloud

code as well. Um it's not always consistent. Um so, being able to kind of

consistent. Um so, being able to kind of look at what the output is and navigate that space. there isn't necessarily like

that space. there isn't necessarily like a a clear step-by-step process every single time because it does um

it does kind of work on its own um kind of space. So making sure that you're

of space. So making sure that you're again you're just checking checking the work that it's doing and kind of going through the output. All right, so search input is now clickable and the modal

closes on outside click. Let's see.

Okay, so this is working. Um, I'm sure everyone is looking at this. We're like,

"Okay, like it works, but it's all the way over here." So, we can have it um readjust to be centered on this input.

We could ask it to do that yet. Um, and

then we have our photos here. Um, one of the times I did this, um, I asked it to populate, um, photos and it gave me

emojis. So that I asked it to populate

emojis. So that I asked it to populate um just images. Um I'm not sure if we want this Halloween version of uh the seltzer. We're not really seeing

seltzer. We're not really seeing seltzer. Um so that's something where if

seltzer. Um so that's something where if I were going to continue on with this, I would be like, "Oh, you know, we should probably change that." This candy one looks a lot like sprinkles to me. So

we'd want to prompt it to switch out some of those items. Um, so again, you could have it you could ask it to find stock images that are a single item on a

white background. Um, things like that

white background. Um, things like that if we were to keep going with this. And

then the last thing I want to do is see if I could get this centered. So,

we're going to ask it to update the placement of the modal

when it is open to be center aligned to the search input fields and we'll see what we get for that.

Okay, so again, pretty quick here. That

was less than a minute. Um, if we open this up, it's still a little wonky. It's

over here. Um, so again, you're going to have to kind of look at what it's doing.

It tells you what it does. So, it's

setting it to left 1/2 and translate x 1/2. So, if you know CSS, that is an advantage here. Um, you can

definitely prompt it to kind of actually pull in different CSS variables and things like that. Um, however, again, if I were to keep going with this, I would

be working to kind of adjust this uh toggle. Uh, since it's not pulling in

toggle. Uh, since it's not pulling in the proper selected state from the design system, we would want to actually get this center aligned. I'd have to um continue prompting it. I'd want to switch out these photos. Um,

so that is the demo. Um, I'm gonna just in the interest of time here, I want to hop back over to the final section of our

slides and then we'll have some time for Q&A at the end. Um, so use cases for the workflow that I just demonstrated and the um just like prototyping with AI in

general.

Um I before we talk about um ways that you can really integrate this, I do want to caution on like some limitations which you guys were able to see live today. It's not perfect. Um but it

today. It's not perfect. Um but it definitely is a great starting point for creative problem solving. Um I would say that some areas to keep in mind is that you want to make sure that you check

with your development team to understand how they are integrating AI into their process. Um if there's workflows that

process. Um if there's workflows that you could share. Um, one of the things that we've done here at Headway is we have had different meetings um during um

kind of the exploration of some of these tools to understand how um each different segment of the business is integrating it and if there's any crossover. Um some things we've noticed

crossover. Um some things we've noticed is that we can share tools across teams um and not have so many tools. Um and it does make it easier to share uh some of

these outputs that you get from the AI.

Um, so if you're working in a cross functional situation, definitely recommend um just opening up that conversation.

Um, and then one of one of my favorite things here is ask a human. Uh, really

just ask a human to read and write um, code. It like if they understand it and

code. It like if they understand it and you're someone like myself who maybe has an understanding of some coding languages but doesn't use it all the time um, used to work in it or if you're

someone who really has no idea what you're looking at when it's spitting out all the code. Um, make sure that you if you have access to somebody who does read and write code, leverage those

people. Um, make sure that the output

people. Um, make sure that the output that you're getting does make sense because it it isn't perfect. And even

some some of the things that we've witnessed like look like it's working.

Like in the case of um some of the prototypes that uh like this one that literally looks it looks pretty good.

Like it looks like I could actually use this. Um, if you're not super familiar

this. Um, if you're not super familiar with code, you may not know if it's very heavyweight code. It could look like

heavyweight code. It could look like it's working, but it might not be efficient. Um, so there are, you know,

efficient. Um, so there are, you know, different pieces that you want to make sure that you are double-checking, especially if you're going to be um kind of looking to launch a user test or

something like that.

Um and then again just as another for info um many of the best use cases for this workflow um is really limited to desktop experiences at this time. It's

not super great with spitting out um mobile designs at this time. Um

hopefully again since that is such a big part of the design industry and the tools that we use every day, I'd love to see that improve and um getting like

some React Native code and things like that would be awesome. Um in terms of use cases um kind of outside of those limitations um ways that we've been

using this at Headway and integrating it into our process here. The first is sharing ideas with clients and stakeholders. So, as I mentioned

stakeholders. So, as I mentioned earlier, um being able to demonstrate something like an animation to your client or stakeholder, your engineering

team, that's going to be super helpful uh to getting them to understand your vision. Tell you if they like it or not.

vision. Tell you if they like it or not.

Um and it does kind of help you as the person who is ideating on these things and problem solving understand what's not working for them or what they're really enjoying. And it's a lot better

really enjoying. And it's a lot better to show it within the environment that they're expecting it in. Um, instead of just having like a whole bunch of screenshots or well, we're going to look at this link and we're going to look at

this link, but just kind of imagine them together. Um, I can't tell you how many

together. Um, I can't tell you how many of those meetings I've sat in and uh tried to like explain something and um the folks who are on Zoom or sitting across from me in person at the table

are just looking at me like, I don't get it. Um, so I love that this kind of

it. Um, so I love that this kind of solves for that in some capacity. Um,

it's also really great to be able to show your engineers who are going to be building these things. Um, something

that actually works um, in a perfect universe. Um, I'm hoping that we'll be

universe. Um, I'm hoping that we'll be able to leverage some of the code that these prototypes are spitting out and again just kind of delivering everything um, to your engineering team as like a

here is all of the things. Here's my

Figma file. Here's my prototype. um

talking through those things with them.

Here's the design system is really going to help set them up for success in getting something um live into production. And then finally, um

production. And then finally, um something that we're really excited about um and haven't actually done yet is using this workflow to test and do

user research. Um here at Headway, we're

user research. Um here at Headway, we're huge believers in user researching. Um I

would say the majority of the projects we run here do have a user research component to them. Um we are you know really big believers in testing ideas before bringing them to production, AB

testing things um in production all that fun stuff. Um, so if you are looking to

fun stuff. Um, so if you are looking to vet an idea, um, or change a feature, uh, being able to have a a really robust prototype, um, and get that out the door

a lot more efficiently than again, um, the old process of like stringing all the noodles up together on screen, um, is just going to be that much better, um, and getting that like real live

feedback on, um, multiple concepts, um, much quicker, I think, is going to be a really cool unlock for this specific workflow.

Um, so with that, um, as an o overview of everything we've covered today, we we started the conversation with reviewing, um, some AI terms and popular options

for prototyping. Um, like I said, I

for prototyping. Um, like I said, I chose to go through Figma make today just because I do feel like it's the most accessible to designers since it is in a tool that most folks are familiar

with if you're in the design space. Um,

however, there are some other really great tools out there. If you're um interested in checking those out, highly recommend um you know doing your own exploration um you can actually take the same

exercise and use it across all three tools um in other tools that you're looking to um explore. We did the in-depth demo of Figma make and then we also went through some use cases as to

how you might think about integrating these into your workflow. Um, so with that, we've got about 10 minutes left, so I want to open up the floor for Q&A

and I'll hand it over to Jacob, who has been hanging out in the comments.

>> All right. Yeah, let me get back to the top here. Thank you for everyone for

top here. Thank you for everyone for engaging in the comments here uh in the chat. Just wanted to give a shout out to

chat. Just wanted to give a shout out to a couple people. Um, someone has been using Figma make already and then just bouncing off chat GPT, which is, uh, pretty fascinating. Good to hear. It's

pretty fascinating. Good to hear. It's

all about experimentation. Um, but

here's here's a good first question.

Once we generate the prototype, will the developers be able to understand how the underlying code works and what's the overall quality of the generated code?

>> Yeah, so that's a great question. So

I they will be able to access the code.

Um, so it is um it does actually have it available. Um I I'm not gonna try to

available. Um I I'm not gonna try to find where it is right now. Um but it is in here. Oh, here it is. Right at the

in here. Oh, here it is. Right at the top it says code. Um so they you can actually export this um with this export button here and they can you can give

them this file. You can also get them um a shared link to the Figma make area.

But then if you wanted to actually publish this out, you have the ability to do that. You could publish it live to the web. um with this process. Um so

the web. um with this process. Um so

kind of depending on how you're looking to deliver it um your developer will be able to read and and edit and write code in here. Um, I cannot speak to the

in here. Um, I cannot speak to the quality of the code itself as again someone who is I'm like pretty decently versed in HTML but not to the point

where I would be able to tell you if it's like super lightweight or you know like really garbage. Um, so I would love

to kind of explore that a bit further with our engineers. Um a lot of our engineering team just transparently they're working with cloud code because again I mentioned that specific tool is

really meant for power users in command line. Um so I think that that tool in

line. Um so I think that that tool in particular has a little bit more um kind of power to it. Um but it does work. Um,

but I definitely would recommend that again within your process if you're looking to actually launch something or test something having somebody who is

familiar with it um, take a look before you go ahead and do that.

>> All right, awesome. We can go to this next one. In case we modify the design

next one. In case we modify the design in Figma make, will they be able to address potential bugs or inconsistencies effectively?

I'm not sure. I'm trying to remember the context of when this was asked, but >> um h let's see.

So identifying bugs um within the code again um you guys saw while I was prompting this, it will flag errors as you're going. Um so if the AI flags an

you're going. Um so if the AI flags an error in something, it will let you know and then it'll ask you, would you like me to fix this? Um so that is one way.

Um if like let's say you have a problem with your um like your variables and tokens, it's called linting. Um there

are plugins within Figma. One is

actually called Figma Lint that you can integrate into your process and go through um to help with any errors before you actually get into Figma make.

Um that's a whole other conversation.

So, I wanted to kind of keep it um tailored to more so like the Figma make portion. Um but that is one way you can

portion. Um but that is one way you can help with bugs before you get into Figma. Once you're in Figma make and

Figma. Once you're in Figma make and like actually tinkering with the prototype, it will flag things. Um bugs

outside of that. Again, you'll see that this is >> Oh, just a quick note. This person just shared in the chat that this was part two of the previous question they asked.

>> So, it was related to the code generated just to clarify. Yep.

>> Okay. Um bugs within here, you'll notice like it just doesn't work the way you want it to. So I again like really check what it's doing. Um and then you'll have

to kind of prompt through it. Um there

are I would imagine like tools that um are used in more like engineering spaces to check for bugs and like QA things. So

if you're again really looking to um integrate that piece into your process, there's probably a a better tool than this space to actually accomplish that task where you could take your the code

that um we just reviewed that's exported and like feed it through a debugger.

>> Yeah. All right, let's go on to the next one. Have you tried without pasting the

one. Have you tried without pasting the design and just using the library with a prompt?

So in terms of like just feeding it the design system and then prompting it. So

I have not tried that specific example.

Someone on our team has and they have gotten some decent results with it. Um

so I think that's definitely an opportunity to explore. Um because I was really trying to make something specific

where like I already had the um like the Instacart design in mind. I rebuilt that from scratch, but I think that would be definitely a good exploration to to try

out to see if we could get it to make the exact same thing with just the design system components.

>> Yeah. Awesome. Uh, next one. Are you

currently using it just for experimentation or have you already integrated it into a production workflow with AI?

>> Yeah, so we have doing we've been doing a little bit of both. Um we have shown some things to clients that we've generated with AI as like part of our

process as like um a kind of like a starting point. Um we haven't taken

starting point. Um we haven't taken anything specific yet fully into production but we are using it as part of our workflow at like different steps to see like where it actually makes

sense. Um so we've done like in terms of

sense. Um so we've done like in terms of like mockups and ideation we've done some work there. Um, we started doing like like I mentioned the prototype space of like demoing different pieces

of features that we've prototyped. Um,

but I would say that's probably where it stops at this point. Um, we haven't um fully like launched like a endto-end AI experience.

>> All right, next one. Super specific.

Have you tried Superbase? And if yes, can you walk through how it works?

So I have I am aware of Superbase. I

have like opened it up and clicked around it. I'm

not an expert in how that works. I've

seen a lot of folks integrating that with Lovable as well as like a an AI workflow tool. Um for this specifically,

workflow tool. Um for this specifically, I really wanted to focus on um tools that I had seen being used specifically for prototyping. And I think that's

for prototyping. And I think that's where a lot of what I've at least seen superbase being used for um is more like that ideation stage stage and creating

mock-ups. Um and I think like one of the

mock-ups. Um and I think like one of the ways that I'm trying to think about AI in general is that like I like designing. I like the process of making

designing. I like the process of making things and I don't necessarily want the AI to do all of that for me. Like if it can give me a jumping off point, great.

But I do really like making things. Um I

really hate prototyping. Like if you're gonna ask me like, "Do you want to sit and make mockups or do you want to like drag noodles around a screen?" Like I'm going to pick the process of like being creative and like really solving a

problem and not just like linking up a bunch of stuff to make it a visually like clickable experience. Um, so that's really where like I thought this would be a great breakin point of like here's

a task that I don't love and would love if this was like automated for me because the power of prototyping and showing folks what this full experience could look like and allowing them to

actually click through and we could test these things is so important and impactful. It's just not my favorite in

impactful. It's just not my favorite in terms of like all the things that you do as a designer. Um, so I think that's kind of where I was approaching this for of like what is something that I would

love help with from yeah an AI.

>> Awesome. All right, we got uh looks like we have two more questions. So if anyone else is going to put a question, not sure we can get to it. We run out of time here. Uh, this next one is when you

time here. Uh, this next one is when you bring your design back into Figma, do you spend a fair bit of time having to rebuild components if you're using elements from the AI? Uh she said she's

found rebuilding with auto layout etc. necess a necessity.

>> Yeah. So I think that depends um if you are again using the Figma make tool as more of an ideation space to like make mock mockups from the ground up. And in

the previous example we talked about where we're just linking up the design system and we're not giving it a a mockup. I would imagine that you would

mockup. I would imagine that you would have to go back and do some rework. um

having not done a ton in that space, um it's kind of something that I would have to do more exploration with to really have a like a solid answer for. Um but

in terms of the prototype itself with the different explorations I've done, um I did a couple other things outside of this Instacart example as well, both

within cursor and Figma make. Um, and

every time I really tried to um, get the design to a point where it was using the components like as if I were going to send that over to a developer. Um, and

everything was like really tight within Figma. Um, so I've noticed that that

Figma. Um, so I've noticed that that leads, at least in my experience, to having less exporting back and forth between the two or going back into Figma. And that's kind of the advantage

Figma. And that's kind of the advantage of having the design system linked up.

Um however again, with the focus being on actually getting an endto-end clickable prototype, um, and not being let me make something from the ground up. So, I do think that use case is a little bit

different and you might find yourself having to flop back and forth, um, without having that like fully baked mockup.

>> Yeah. All right. This is the last one.

How early in the process has your team been implementing use of these rough prototypes? Are teams ideating with

prototypes? Are teams ideating with these or have these been used in uh uh post-g grassroots ideiation and focus methods?

>> Yes. So I would say that typical design process we focus on getting the idea across first. So, and what I mean by

across first. So, and what I mean by idea is like let's focus on what it like if we're working from the ground up like what it looks like um what the contents of the screens are before we even get to

the prototype. So again, we are still

the prototype. So again, we are still like working in Figma. You can integrate AI into that ideation process and then kind of take that back and forth into Figma. Um but the prototyping itself

Figma. Um but the prototyping itself um really for us whether we're doing it the previous way of like linking everything up or now with leveraging AI

to do some of this stuff um is coming in once we have kind of finalized all of the different screens. Um, I do see a universe in which now that this is like getting a lot better and the experience

is I I would say pretty slick at this point and usable whereas I would say like even six to 12 months ago it was still kind of like very malleable and not clear how we could integrate it. Um,

I could see where we could almost speed up that process and we can start um showing some of these prototypes earlier on in the process. Um, but I do think these really these really help

conversations and have help conversations with like demonstrating a concept to a client. Um, or again if we're at the point where we have a flow completed, it's signed off on and we're

trying to have a conversation with our developers on how to actually build it.

Um, having like visuals of things, um, I think is really really strong and that's something that we've definitely been doing.

>> Awesome. All right, folks. thanks for

joining us today and thanks to Brianna for sharing uh everything that she's been learning and walking through this this demo. Um it's just I think it's

this demo. Um it's just I think it's everyone we're all we're all trying to figure out this stuff all these AI tools how it impacts our work um and what the future of work looks like right like we're all trying to figure out so I

think it's important to just kind of like share the journey together uh and again uh we really appreciate everyone taking the time today ask asking questions and just uh joining us along that journey so everyone uh take care

and I don't know Brianna if you want to share anything before we wrap things up.

>> Um yeah thanks everyone for coming. I

super appreciate your questions and enthusiasm for AI. I know we're all really excited about it and trying to figure out what the the best way uh to use it is. If you, like I said, if

you're interested in checking out this process, um we do have some of these things available on Figma community. So,

go check that out. Um if you have any questions, um you're welcome to also reach out on our kind of social platforms. um where I believe Jacob or

at Headway everywhere. Um so feel free to uh give us a shout if you're if you're got a question. But yeah, thanks for coming and hopefully we'll see you all at some additional startup week events.

>> Awesome. Take care everybody. Thanks

again.