How I Vibe Code as a Designer at Intercom

How do designers at intercom do prototyping with AI tools?

>> We've done a lot of work to make sure that every single component in Figma is connected to code under the hood via code connect. So if you check this

code connect. So if you check this button for example and you see here in developer environment de mode you will see that it's essentially connected to code connects. So when a designer is

code connects. So when a designer is ready with a design, if they want to start in Figma, some designers start directly in code and that's totally fine. But if they want to start in

fine. But if they want to start in Figma, they can essentially only all the only thing they have to do is copy a link to this design. So copy link to the

selection, go to back to their IDE and this chat to cloud and say build the dialogue from this link in this

page. We'll send that to Cloud. And if

page. We'll send that to Cloud. And if

we navigate back here to this side playground, you can see here that he added the button that I requested and I added the the dialog and he did it in one shot. So it looks exactly the same

one shot. So it looks exactly the same as the one in Figma. So bingo. Before

you begin working on any project or any feature, where do you go for design inspiration?

So a tool that I use a lot.

Hey folks, this is Jay. Welcome to sneak peek. Today with me I have Domingo who's

peek. Today with me I have Domingo who's a staff product designer at Intercom where he's leading the AI tooling and infrastructure efforts. Domingo, super

infrastructure efforts. Domingo, super stoked to have you on. Nice to meet you, man. Today I'm really excited to show

man. Today I'm really excited to show you some of the stuff that we've been doing to enable designers to prototype using our design system and using essentially the code environments that

our engineers also use. So, Domingo,

most people watching this video are going to shout that, "Hey, Jay, skip the foreplay. Show us the good stuff." So,

foreplay. Show us the good stuff." So,

I'm going to skip to the good stuff, which is how do designers at Intercom do prototyping with AI tools.

So, one of the things that we've been working on in my team over the past six months or so is figuring out the best way for designers to use our design

system to prototype things quickly in code. Not in Figma make, not in another

code. Not in Figma make, not in another prototyping tool, but actually in our codebase. So we've given

codebase. So we've given >> every single designer access to the codebase and we've been building tooling to ensure that they can

quickly fire up the developer environment, quickly install it and quickly essentially send links to CL to create experimental builds and create prototypes basically. So what you have

prototypes basically. So what you have here in front of you is the design playground and the design playground is a dedicated section within our codebase

um that designers can use to start prototyping things. So all they need to

prototyping things. So all they need to do is make sure that they are in their own branch. they can fire a single

own branch. they can fire a single script and once that script is running which I have running right now and you can see here it's running they will get essentially get a link where they're

going to have a section of the app that is dedicated for them with a few examples in here and they can use those pages to basically prototype. So they

can essentially just take everything out of here. They can add components. They

of here. They can add components. They

can add interactions. And it's been really interesting because designers are using this to prototype, but also engineers engineers are also finding this kind of mechanics to do things

easily helpful for them because they they have these dedicated pages that they don't have to kind of worry about plugging in and connecting and and doing all the like the ground work and it's they can just pro use to prototype. So

we have access here to storybook to the thigma library guys to code connect and guides to cloud skill basically and perhaps I'm going to show you here an example of how this will work in

practice.

>> Okay let's do it. Yep. Yep. I want to see a demo.

>> Let's say I'm here in in in my master.

The first thing I always tell designers you need to make sure that essentially you put your pull your latest changes you know as usual. It's the kind of stuff you learn when you are working

with code environments and obviously create their own branch. So let's create a branch here. Call it playground

example sneak peek. Yay.

There you go. And then right now I'm in the example playground which means that I can essentially now start making changes in in this branch like at ease

and I can make changes in here. So you

can do this in multiple ways. You can

essentially like you have cl code in here and you can start asking it, hey, can we just rebuild this page to look different and it will get it because you're in the same codebase. It will get it will do a pretty good job because it

has the context and all of the tooling that all engineers use to kind of work with our design system. But we've also kind of found another way that is kind

of more close to the design workflow that is really helpful for designer and that is essentially using cocon.

Basically right now what you see here is Figma and we've done a lot of work to make sure that every single component in Figma is connected to code under the hood via code connect. So if you check

this button for example and you see here in developer environment de mode you will see that it's essentially connected to code connects. You can view that connection you can see essentially the

code path to that component and that works for every single component that we have every single icon as well. So every

single icon is connected to code. Every

single dialogue on every single every single thing that you can think of as a component. So like things like input

component. So like things like input fields, they're connected to code. Text

areas, they're connected to code as well. These switches in here, they're

well. These switches in here, they're connected to code. So when a designer is ready with a design, if they want to start in Figma, some designers start directly in code and that's totally fine. But if they want to start in

fine. But if they want to start in Figma, they can essentially only all the only thing they have to do is copy a link to this design. So copy linking to

this selection go to back to their IDE and this chat to cloud and say build

the dialogue from this link in this page and ensure it opens

when we click a button in the top in the page header.

Uh we'll make sure we're in context here. We'll send that to cloud and a few

here. We'll send that to cloud and a few things will happen here in the background that we've set up in my team and we've set up with the engineering team essentially. So we've been making a

team essentially. So we've been making a lot of use of cloud skills and essentially both close skills and the Figma NCP to make sure that when we send

a link from Figma, we we get all of the context from that Figma file. So we get the name of the component, we get the name of of like the tokens and everything. This will give clot the

everything. This will give clot the necessary context it needs to ensure it uses the same component. So it will it will see in the context you will see hey I already have this button I already

have this input field I'm just going to go in and import it directly from the codebase instead of creating a new one which is one of the problems that you had in the past with at the beginning when we started playing with all these

tools every time you'll ask something to AI you will kind of tend to just create a new thing it will create a new button now with all of these context you actually like just create it just

imports the actual component that we have so you can see here how like cloud is working is getting essentially it's connected to the developer tools that from Figma. It's getting the screenshot

from Figma. It's getting the screenshot of the component that I just sent and dialogue is getting things like you know and it's trying to import everything in here. So it's getting like the the

here. So it's getting like the the dialog component all of the packages is reading it. It's reading all of the

reading it. It's reading all of the stories within the codebase and it's basically working in the background to make sure that this it creates this automatically for us in this page. So

it's very easy for a designer to just essentially instead of having to fight with AI all back and forth they can just come in here send the link and continue designing in Figma perhaps or continue

doing something else and just have claude in the background just building the thing for them automatically and you can see here how essentially is he's is checking all of the rules and it's checking the table config and he's

basically creating the the dialogue under the hood basically. So this is what I always tell

basically. So this is what I always tell this is what I always tell designers and this is something that still with kind of it's still going to be an issue for time for a time to come is like it takes

a while sometimes when like AI is thinking or like with claw is doing work so they essentially they can just always come back here and they can do more things and like while like claude is

working in the background basically but it's he's making a lot of decision decisions in here as you can see so he has everything he needs and he's giving me a couple of insights here so the the

dialogue is saying in here that he uses this. He's kind of having some decision

this. He's kind of having some decision about like the AI behavior and the switch component. And you can see here

switch component. And you can see here how in one shot he included all of the thing he needs to build that. So he

include essentially the dialogue in this import the input the label the switch and the text area. And these are all the same components that I have here. you

know the dialogue itself as a as a full dialogue, the switches, the text area, the input field and the button. So

everything that it needs is importing it to make sure it's available in the page and you can start building it. So

instead of building things from scratch, it's importing the components that we already have in the codebase and it's using that information and those components to basically build the thing that we needed basically automatically.

>> Gotten like a million noob questions.

But like while it's doing that like you your team specifically built a cloud scale to make sure that you're not just relying on the basic

Figma MCP and you know cursor connection. So what would have happened

connection. So what would have happened if you not built that cloud scale and just use the default Figma MCP connection that's it nothing else.

>> I mean it would have still done a pretty decent job. I think one of the but we

decent job. I think one of the but we have essentially we've been working a lot with skills on the on intercom and the cloud skills are

not only beneficial for our designers with this all the stuff that we're doing for prototyping but they're also beneficial for engineers because it allows us to kind of automate certain

behaviors with that very quickly. So

things like you know every time I create this to create an experimental build or every time I send you a Figma link make sure you check certain files in the codebase to make sure it quality checks.

So we have a bunch of skills that everything from single thing very simple things to create a new component to every time I send you a link you need to make sure it runs it it kind of passes

all of these quality checks essentially.

So it lets us as a team and as an engineering infrastructure team >> add our own extra layer of like quality and like performance and security an

extra an extra checks that perhaps that might be needed for our own code to pass basically if that makes sense.

>> Got it.

>> And then while it's doing that another question I had is like I noticed that you're using cloud and I know cursor has his own AI model as well. So I'm kind of curious to know like why are you

specifically using the cloud model over the cursor one? So we use close directly because our engineering team we actually have a team within intercom called team

builder tools and they spend the last year testing all of the models to figure out what the what is the best model that we can use to code and because this is

not only for us as designers it's for engineers as well and they they found that cloud is the best one because what Antropic is doing with cloud they're really building a platform that you can

essentially layer skills on top, layer integrations on top and we are constantly seeing that cloud is just

it's just more nuance and the output from the code that we see from cloud is just amazing. So our engineers are using

just amazing. So our engineers are using it and we are now it's kind of mandatory now across intercom to use clot. So we

are all >> meant to be using clot and we all need to have set it up and it's the only AI model that we should be using for for

Cody basically and that is the reason I >> makes sense.

>> So you can see here that it changed it did it gives me a whole summary of the changes and if we navigate back here to this playground you can see here that it added the button that I requested and it added the dialogue and it did it in one

shot. So it looks exactly the same as

shot. So it looks exactly the same as the one in Figma. You know, you might it might have some little things in here here and there, but it's pretty close.

And the best thing about it is this is actually using our design system components. It didn't create a new input

components. It didn't create a new input field. It didn't create a new toggle. It

field. It didn't create a new toggle. It

just essentially is using exactly what we created in the design system. So,

this gives designers a really speedy way for them to just prototype things really quickly. Perhaps they started in Figma.

quickly. Perhaps they started in Figma.

They have a couple of screenshots or they have a couple of like components working in there. Copy the link, send it to cloud, start building it, go back to Figma, build it a bit more, go back, send another thing and start kind of

layer layering things on top. And you

can see here that in the whole process, I never checked the code. Okay, the code has been changing in here, but I never checked it. But because of our skills

checked it. But because of our skills and the MCP and everything that we have in here, I can be certain that like he added the design system components that I needed and is pretty good basically.

Yeah.

>> Quick question here. So you mentioned that it did not try to recreate any of the other components. It only used intercom design system components. A lot

of times I've noticed that AI when you give this prompt even when using the Figma MCP and all these things sometimes it will recreate some components on its own.

And in your case, it did not do it. Is

it because of the claw scale and maybe specific instructions that are encoded in that like do not ever try to like build your own components

or is it like cursor rules? It's a

mixture of the three things. It's a

mixture of the Figma cocon being connected to the MCP. This is something that designers don't understand that like sometimes they use the NCP

and without an actual proper code connection which is good right like it's going to the link that you're sending to AI it's going to include a lot of information around like the spacing the

token the color but it's not real code connection the real power that you find is that when you actually connect these components let me just show you this button here and go to dev mode when you

connect them to cocon here and you see that connection you're actually giving claude the actual path to that component in the codebase. So like when you send a

link cla is getting the path is getting the button already exists under this path.

You don't need to create it again. You

can just import it. So it's a mixture of like the MCP being plugged in code connect being plugged in our skills being layer on top and also kind of the the some of the rules that we have for cloud being kind of set up as well.

Yeah.

>> Wow. Okay, that makes so much sense.

>> So the thing that I will do next and this is what happens a lot, right? We're

like, okay, I'm here. I'm working on my local. I have like a prototype. I can

local. I have like a prototype. I can

see some I can see this dialogue may let's say and this is a very simple design that I can I use showing you as an example, but like let's say that I wanted to like send this to an engineer.

So one of the things that we've been doing with skills as well and I can show you here in a prototyping hub and we can talk more about this in in in detail in a bit later but like we have a bunch of like tooling in here in skills that will

allow designers to do things very quickly and one of the the skills that we have is essentially creating deploying experimental builds to share and it's as easy as essentially copying

this copy this or just typing it directly to cloud and saying to clot deploy an experimental build of my prototype.

That's it. And basically this will trigger the prototyping skill under the hood. And you can see here how it's like

hood. And you can see here how it's like trigger it. And it will basically do a

trigger it. And it will basically do a bunch of stuff in the background that we've created to generate a link and a PR in GitHub automatically with all these changes.

>> Oh my god.

>> A designer doesn't even have to worry about this stuff, right? They they

design something in Figma. They send the link to claude. Cloud build it in one shot and then they said to Claude, "Hey, can you just create this an experimental build and that's it. Claude is doing all

the effort. All you have to think is you

the effort. All you have to think is you know your design the the problem you're trying to solve." And you can see here how like it's telling me, "Hey, you want to commit it first? Should I just commit the current changes before the plan

permits the build?" I say yes and submit the answer and then plot will essentially do everything for me. is

going to spit back out like an actual just like URL link that you can share.

Oh my god. You know, that solves a lot of problems because like you don't have to worry about, okay, I've got this in my local environment. How do I, you know, push it out? It's Oh my god.

Exactly. And it's solves a lot of problems as well because and this is the beauty of being in the same coding environments as your

engineers. you know this will create a

engineers. you know this will create a change in a branch that lives in GitHub in the same repositories that your engineers are using. So just speaking their language, you can just give them a link to that branch

>> and they can just go on with it and they can just run and they can just keep working on it like and this is how I've been working with some of the new patterns that I've been developing for integr when I've got them to a really good

standard. I create an experimental

standard. I create an experimental build. I'll send that to an engineer and

build. I'll send that to an engineer and in many cases my engineers are like oh great I can use 80% of that and then I'll just add my own layer of complexity that is what I want to worry about and you can make sure the interaction really

really works basically.

>> Oh when you say 80% like you mean the engineers can literally use 80% of the code from all the stuff that you've been oh wow >> if you're using the right components and stuff they can probably use it even

more. Sometimes we're creating new

more. Sometimes we're creating new patterns. So they need to

patterns. So they need to >> they will do their own checks. They will

do their own work to make sure everything works. But you can see here

everything works. But you can see here like the skill run >> the draft PR is live. So it gave me a GitHub link and it gave me a link to the experiment to build. So if I click on

the GitHub link I go here a link to GitHub with like everything in here, right? like and the set of dialogue is a

right? like and the set of dialogue is a draft and we we will do a lot of checks in here in the background um to make sure that like in in something like 2

minutes it will essentially post the same link in here when it's live and this is what I'm saying right like you I'm now here in the same developer environments as my engineers I'm in GitHub so I can you send a link to this

GitHub PR to somebody and they can check the code and check the commits >> and even if you want to do research Claude gave you a link to this experimental build. So you can just

experimental build. So you can just share this with the research team or anyone else and they can use this link to like just play around with it.

>> Yeah, theoretically. So right now we we're still exploring ways to make sure that we generate links that it can be viewed by external people. All of these links are viewed by like our own

internal people, but it's something that is that we're investigating basically.

But yeah, you can essentially send the link to of this PR to an engineer so they can go in and like figure out if they like the code and if they want to use all of it and then you can use the

link that will be posted here in like a second to prototype it on the browser.

If they post it here, you can see it here. This is the experimental link.

here. This is the experimental link.

It's going to be live in the next two to three minutes.

>> So this is the experimental link you will send to your product manager if you just wanted to explain or have them play around with interaction. Got it.

Exactly. Exactly. And I can show you some things that people have been building. So let me show you some

building. So let me show you some experimental links. So this is an

experimental links. So this is an experimental link that we have live. And

you can see here how it's an experimental version and with a with a version. And this is something I built

version. And this is something I built to essentially showcase to my team how I want like banners to work potentially.

This we're still exploring them >> and and this is all kind of prototype in the playground and they can and check it. But I've also kind of gone to the

it. But I've also kind of gone to the way of like, okay, what if we have like a notification tray? This is how I want it to work and I can see all of all of like, you know, I can simulate information in there to see how that

feels. Or perhaps we want to kind of

feels. Or perhaps we want to kind of check how like banners work and if we like them and we want to check them with three cards, with two cards. So like

we're really using them to this to like this mechanism to just prototype things and like interactions to make sure that we can this is real, right? This is not a Figma page. This is like code. You can

actually zoom in, figure out if it works, zoom out, see how it kind of behaves in the browser. It's great. We

got another one here which I'm also building which is shows you how like how different filters can work and how can you navigate between filters. And this

is like something that I took a it was really complicated to like explain. And

let me just show go you to Figma to so you can see how >> I was exactly about to ask you. Yeah,

this was this was me trying to explain how this was going to work. And you can see here I had like some screenshots of things that I'd seen in all the places that I like and I kind of like started putting them together and I was going to

spend hours like you know doing it and like I had like all these like things in here and and these sketches is just me.

This is a working session with me and an engineer just kind of talking about things. We have like these pages that we

things. We have like these pages that we call like scrapbooks and it's just me and an engineer just talking about things and how things would work and we pointed things and for the filters we had this idea that you can like navigate

between them really quickly with a keyboard and he keeps saying to me yeah I think it's possible maybe maybe oh is it is it possible how does it work how does it feel so I just decided to build

it and I build it here and you can see here it's like a whole experimental build that actually showcases to my engineer how I want the and I'm using my keyboard right now. You can see here I

can I can type with the text. I can see how that feels like. I can select something. I can ch go again. I can

something. I can ch go again. I can

select something from a multilelist.

It's all perfect but it's enough for me and to for him to be like maybe that works or maybe that doesn't work or like oh should I just change it

or should how does the interaction work?

How does it look when you click on it?

Is it too much? Is it too fiddly?

Shouldn't we change the spacing? And I

found myself in a really weird situation which I did everything here in code and I had to go back to Figma to document it just

so it's in Figma for the future, but it doesn't have to be. So, it's kind of this weird situation where like for this example here, I actually went straight to code and I I built all of this in

code and I had to go back to Figma and document this for the design system and the mechanics just so designers can find it. So, let me ask you a question there

it. So, let me ask you a question there because I literally got this question from a sneak peek subscriber before our interview. The question was like let's

interview. The question was like let's say you're changing something in code.

So like in the in the design playground example, let's say you change the dialogue here. You're w coding with me

dialogue here. You're w coding with me and you do some change here in the code.

Now you like the change, I like the change or maybe the engineers like the change and then how do you keep parody with the Figma designs cuz like do you then go back and manually update all the

Figma files or you're like you know what we did it in code cuz like now there's going to be a discrepancy right cuz like you're going to have to manually go back or is there like any way you've automated that? I'm still haven't found

automated that? I'm still haven't found a way to automate it. It makes me I think there is a real gap in the market.

I think Figma should do this if they really want to stay current for the future. But like there is a gap in the

future. But like there is a gap in the market for infinite canvas tool where the things that are on the infinite canvas it's actual code

that is real and it's not just some screenshots. It's not some you know some

screenshots. It's not some you know some vectors. It's not, it's actual code and

vectors. It's not, it's actual code and it behaves exactly the same as it behaves in your code in iOS, in your code in the web because I show you those

filters, right? And and we we're pretty

filters, right? And and we we're pretty happy with them. Like we we're still kind of developing them and I'm I'm actually like adding more layers of like interactions to them. Like how do we display them where they're compact? How

do like can you interact with all of these little things in here? A bunch of stuff. And I had to actually go to Figma

stuff. And I had to actually go to Figma and like document them manually, you know? I have to like almost like take

know? I have to like almost like take screenshot, but I actually go back and document them manually, but I coded them first. And it's kind of a weird

first. And it's kind of a weird situation that I don't think we're going to be doing this for a long time. And I

think this is going to change. I think

there's somebody's going to come up with a mechanism. Maybe it's going to be us.

a mechanism. Maybe it's going to be us.

Maybe we'll figure out a way for us to essentially prototype directly in code.

when we're happy with the interaction um we'll just document it automatically in something like storybook or in like some code format that is realistic and then that's what you share with

engineers and with designers I only added in Figma so designers can copy it and use it in their designs and or use it with code connect which is the thing that I show you.

>> Yeah. What if every designer is like you at at some point in intercom they're like we're all going to start directly designing in code. Do you think then maybe this whole thing of going back

into Figma and updating it just goes away if everyone was doing it the way you did?

>> I think it's a question mark because we are seeing it. There is designers already doing this stuff at inte we're just starting with code or like we'll sketch something in Figma real

quick like the sketch that I show you for the filters then we'll go to code we'll build it and then we're all in this situation which is like oh we I already gave it to my engineer my

engineer can already use the code it looks great I know it looks great why do I add it back in Figma we're still going to be adding things back in Figma for a little while because there There's still

some designers that haven't actually gone full in into these whole ways of working, but I don't think it's something that's going to last for a long time. I think um I think you're

long time. I think um I think you're going to do a sketch in Figma or like a quick design. You're going to copy the

quick design. You're going to copy the link as I show you. You're going to send it to code and then you're just going to do the whole 100% in code. But Figma is going to be for sketching, for like a

quick design, for like putting things on a canvas because you want to see it visually and then copy the link, send to cloud, build it and start like playing directly in code basically.

Now, right that point you said where every designer's not, you know, on board like let's just design and code directly and I see a lot of designers I talk with them DMs and stuff that they're really

scared of this AI revolution. And then

there's a lot of designers like you in different different teams around the world that want to get their teams up to speed on using this AI tools, but it's like how do you train everybody on the

team? So what I want to know is how did

team? So what I want to know is how did you and your team train everybody else at intercom like hey this is how the design team is going to use AI tools.

This is how we set everything up. This

is basically your quick start guide so to speak. So I'm very lucky that I work

to speak. So I'm very lucky that I work in an organization that is really behind this. So and shout out to to Tom Rimmer

this. So and shout out to to Tom Rimmer which is our design director our engineering organization and our CTO Dra. he's really on board of every

Dra. he's really on board of every designer having access to the developer environment, every designer and engineer using AI to make them faster. Um, so I'm really lucky that I'm in a part of

organization where like they want us to do this. So that resolves a lot of

do this. So that resolves a lot of questions automatically because you're empowered to try tools, you're empowered to make it so faster with AI. And I

recommend everybody reading I'm going to show you this prototyping hub, but I recommend everybody reading this post. I

think is really important for like any engineer product design organization.

There's a post from our CTO called 2X that really talks about and is in our fin ideas.ai.

fin ideas.ai.

It really talks about like our change of mentality within intercom around how can we be faster and how can we leverage these tokens. It doesn't replace us. We

these tokens. It doesn't replace us. We

still need to have critical thinking to make sure that we are solving the right problems. we have the right kind of like we're going taking the right path and we have we're distinguishing between the

outputs of AI but it's a really since he posted this internally and he created a version that he posted out externally >> we've seen like a real big change across the organization like every single

engineer is using it they're finding different ways to do it every single designer is trying it some of them are trying it for prototyping some of them are trying it for analysis some of them

are trying it for ideation for doing things like you know doing audits for a little bit of everything. But let me let me confirm this real quick. I'm seeing

most designers struggling to convince their engineers to use these AI tools.

And in your case, your CTO and engineering team wants designers to use AI tools 100%. And I think it comes from the

100%. And I think it comes from the point of we all believe we can be faster. You

know, we have a big mission at Intercom around building like the best AI agent.

We're all moving fast. We're all

exploring. And

if I can explore quicker directly in code and I can save time for my engineer for him or her to do the most complicated work, so I can actually I

can get the interactions right and I can be certain that he behaves and he feels the way I want. Why would I not do that?

It seems crazy for us not to do it. So,

we're all on board. And engineers love that because they are getting builds and they're getting prototypes that they it makes their job way easier. And it means that they can focus on the problems that they really like, which is a really

complicated system problems and like connecting the data and all the pipeline and everything else. And then we can focus on making sure that it feels right and and it behaves right. And we're

getting away with those prototypes that are not unrealistic. And we're actually getting prototypes that are this is real code. It it's going to work this way,

code. It it's going to work this way, you know. I know it can because I've

you know. I know it can because I've built it and it works, you know. Yeah.

So, I wanted to show you the prototyping hub. And the prototyping hub is

hub. And the prototyping hub is something that my team built to help every single designer and product manager at Intercom to just get started with this stuff, right? Like I show you all the things that I've showed you

today is me already have everything set up. I know how to do it. I know how to

up. I know how to do it. I know how to put the links in. I know how to move around my developer environment. But a

lot of people starting from scratch. A

lot of people are joining intercom and they're like, "Oh my god, I need to set the set up the developer environment or how do I send the link? How do I use cloud skills? How do is Figma connected?

cloud skills? How do is Figma connected?

How do I know if it's connected?" So I created this hub to essentially explain everything to the team basically and it becomes like a living repository. I

might make it right now using Koda which is our documentation tool but I might actually make it a website at some point for the team. But it includes things like code 101 from designers explaining basic things that designers are not used

to understanding in like a language that is very easy for a designer to understand.

>> Oh wow I love it.

>> What is git is like git is like version control history in Figma but for code it tracks every change you make to your files so you can also see what's changed. So includes a little bit of

changed. So includes a little bit of everything. So was a clone versus a fork

everything. So was a clone versus a fork was push and pull was an SCP server was local host what's an API you know like what's what is a terminal and what is a package manage a bunch of information

that is very interesting for them to understand include things like how to set up your local environment you know like what do they need to do and I cannot show anything here but you get the idea uh they includes things like

what code editor you should you should download maybe you want to use Xcode maybe you want to use code cursor it includes how to set plot, how to set it up, how to make sure it's working, how to make sure it's working for us, how to

install our own plugins that we've developing so to help them and our own tooling and then like five coding tips, Figma code connect using close skills, our component libraries, and then what

we call prototyping modes and what I show you today is the design playground mode. We also allow designers to do full

mode. We also allow designers to do full changes into the developer environment.

So designers are empower as well. If

they want to fix a bug, they might have to do a little bit more, but it's all here and for them to do it if they wanted to basically. But if you go into this mode, it will explain what it is, how to use it.

>> Oh, you got a video example. Wow.

>> Videos examples for everything. And it's

just me, >> oh my god.

>> Step by step firing up the design playground, making a change to create experiment to build. And it's all super explained. And I even have like all the

explained. And I even have like all the video recordings in here of like every single tutorial that I've done for for the >> you know how to use code connect with Figma model, >> how to fire up the developer model, how

to do this, how to do that. And

obviously it's great because in the background every single pattern that we add to the system, every single component that we add to the system, it becomes a new piece of code that

designers can use to prototype, that PMS can use to prototype, that engineers can use to prototype and build. And it's

kind of like it's like a compounding effect essentially. So the more things

effect essentially. So the more things we add to our design system in terms of components and patterns, the better cleanups that we do and the more tunings that we do, everybody kind of can benefit from them basically.

>> Yeah.

>> Wow.

>> And now like a lot of designers looking at this are going to be like oh my god how can I create a copy of prototyping hub for my own team and organization?

But like something I want to know is like did someone tell you to create all this or you just like you were motivated to do it on your own? Because some

designers might look at this and I'm like well I'm a only designer is not part of my job description like the amount of time I have to put to create something like this prototyping hub to uplevel everybody create all these

videos. I don't know what would you say

videos. I don't know what would you say to that? I think you if you're

to that? I think you if you're interested in it you should do it. I

think there's two ways to look at this.

Like I did this because my team we own the infrastructure of the front end of the application. We own the design

the application. We own the design system. We own performance of the front

system. We own performance of the front end. We own things like AI tooling to

end. We own things like AI tooling to prototype and to code in the front end.

We own patterns. So like global patterns and how things work like navigations and things that perhaps teams don't have the time to own. Um, and it kind of fits

perfectly in our situation because we want them to use all of this tooling that we are kind of playing with because it helps us. So, I just said I think designers keep asking for information about it and I said to myself, you know

what, I'm just going to put everything that I know in a single place and it's been great and there is always someone here. There's always someone in the

here. There's always someone in the prototyping hub and like checking a guide. And so, that's one way to look at

guide. And so, that's one way to look at it and I think we did that for that reason. But another way to look at it is

reason. But another way to look at it is like the process of creating this has been really good for me to learn about this stuff. And that's sometimes

this stuff. And that's sometimes designers they say to themselves, oh, I'm not going to do that because it's going to take me a lot of time and I don't like think about your own learning. Like I had to learn a bunch of

learning. Like I had to learn a bunch of stuff about coding and developer environments and all our tooling and I had to play with a lot of our tooling to set this up and it was a great learning experience and I actually got better at

it by the just fact of creating it. So I

think if your team's going to be better for it, you can tell a really good story about how you're speeding your engineers, how you're speeding yourself, how you're learning about all this stuff and also you're learning things that will set you up for the future.

Basically, I think every designer should be playing with these tools because our jobs are changing and it's going to look very different and there's no reason for you not to play it. And perhaps your

company doesn't allow you to. Perhaps

your company doesn't want you to touch these tools. Great. just on your own

these tools. Great. just on your own time on your own computer, pay for cloud and then start building apps on your own, which is something I I do as well on the side and then start playing

around with the best way to like build things on your own and like be current because I think the world of spending 8 hours a day in Figma is going to change.

It's going to be way way different in the future basically.

>> So the bingo before you begin working on any project or any feature, where do you go for design inspiration?

So it always depends on the project. It

depends on what the problem you're trying to solve. Obviously there is some projects where the design inspiration or the kind of the solution and inspiration it's directly just talking to your users

and kind of figuring out things internally and talking to a bunch of people internally. There is other

people internally. There is other projects where like you're dealing with a very complex interaction or something that is entirely different and you haven't seen it before. And a tool that

I use a lot is my mind. My mind is where I save everything. So you can see here I save videos. I save illustration. I I

save videos. I save illustration. I I

like lots of baseball stuff. So I save baseball stuff. I like, you know,

baseball stuff. I like, you know, stamps. I I save UI that I find really

stamps. I I save UI that I find really interesting. Typography that I find

interesting. Typography that I find interesting. So I think it's very

interesting. So I think it's very important for designers to to have a dedicated space where they're saving stuff that they like and they're really

examining that stuff that they like and they're creating it essentially because the act of saving all of this of creating it of sometimes removing something because you don't like it

anymore or like starting it just builds your taste and it keeps you kind of always sharp on like what you like, what you don't like, what you think is good, what you I think it's good. So, I tend

to save a lot of things in my mind. A

second place that I use for inspiration is X. X is great. I'm constantly

is X. X is great. I'm constantly

checking in X. I don't post that much, but there is always really good uh inspiration for product. Some

interactions are great, some interactions are weird. There is some some illustration as well in here. And

you can see here this is really helpful for like even for some of the stuff that we discussed today. This whole idea of like drop downs. And then I use mobing.

I use mob as well. A moment is great essentially when I'm getting closer to building a pattern that I want for that pattern to be very robust and I want to just cross check if

any any other company is facing the same problems with that pattern basically. So

and this is very very helpful when you're checking for you can when you're checking for kind of something that a lot of other companies are experiencing

in terms of like design. of things like how does every company handles navigation?

How does every company handle search?

How does every component company company handles like a stepper component? And

and and you can really get inspired here about how they do it. And it's great because actually you can search for specific sites, you can say for categories, you can go in directly into

an app that you like. So you can if you like OpenAI you can go into OpenAI and you can actually like check the whole flow. So you can check for screens for

flow. So you can check for screens for UI elements and for flows and you can really go into town into that flow.

Obviously it's you can always open OpenAI yourself and navigate with it.

But this is great because it gives you all of the screenshots. you can save that screenshot into Figma and and I've been using it a lot and I think and even for like the filter designs that I show

you at the beginning when I was doing examples and I did a whole kind of like of like how all the companies are doing filtering and moing was great for this.

You can see here that I save things created with moing and it's just me checking like all the apps and kind of annotating them and this is where mobing is is great. You can actually check all

the apps. And this is where when for in

the apps. And this is where when for in my mind now Figma shines, still shines is for this. It's like the whiteboard aspect of it. Being able to like put things on a canvas, annotate it with a

post-it note. You're not going to build

post-it note. You're not going to build anything here. It's just like a thinking

anything here. It's just like a thinking tool for this is great. And that is essentially how I'm collecting inspiration.

>> Got it. Thank you so much, Domingo, for coming on Sneak Peek and showing us your AI design process.

>> No worries. It was great to be here and thank you for having me.

>> Hey, this is Jay. It means the world to me that you watch this video. If you

want to unlock the AI design and growth design interviews with designers at some of the top companies in the world, then head on over to sneak peek.design and

subscribe to the newsletter.