AI transcript
0:00:07 what if your figma design could become a working app just by asking in this episode of the next
0:00:12 wave our guest is david kosnick from figma he showed us a demo of figma make a mind-blowing
0:00:17 new tool that turns your designs into live working code with nothing more than a prompt
0:00:21 whether you’re a designer a founder or just someone dreaming up ideas on the train
0:00:26 this is the next evolution in software creation no more handoffs no more designer versus dev
0:00:32 debates just collaborative multiplayer magic live in the browser david walks us through how figma make
0:00:38 builds dashboards games and real data-powered apps on the fly he shares figma’s vision lessons learned
0:00:42 from their first ai rollout and what the future design and creation might look like in a world
0:00:47 of ai native workflows if you want to see the future of product design this is it but before we get
0:00:51 started you know we spend a lot of time on these episodes and it would mean a lot to me if you could
0:00:56 hit the subscribe button it helps us grow the show and get on better guests to provide more value to
0:00:59 you so without further ado let’s jump in with david kosnick from figma
0:01:10 cutting your sales cycle in half sounds pretty impossible but that’s exactly what sandler training
0:01:16 did with hubspot they used breeze hubspot’s ai tools to tailor every customer interaction without
0:01:22 losing their personal touch and the results were pretty incredible click-through rates jumped 25 percent
0:01:27 and qualified leads quadrupled and people spent three times longer on their landing pages
0:01:31 go to hubspot.com to see how breeze can help your business grow
0:01:37 david thanks for coming on the show thanks for having me super excited to be here
0:01:42 yeah you know kind of a crazy story i’ve been a user and a fan of figma for a long time
0:01:47 actually originally one of my designers my previous startup binded he told me you’ve got to try figma
0:01:51 out and i was like oh okay i’ll try it and i’ve loved it ever since it’s been awesome to see how big
0:01:56 figmas become and how it’s become kind of the standard and then when ai started happening i was
0:02:00 like oh god i hope figma’s gonna be okay i mean just everyone’s using figma now all the designers
0:02:04 but what happens when ai starts coming to the picture how is that going to change things and
0:02:09 i saw dylan introduce figma make you know maybe a few months back and uh like okay i’ve got to get
0:02:13 someone from figma on the show and also just to learn you know how it works and like where you guys
0:02:17 are planning to take figma in the future yeah i think if you want to start off like explain what
0:02:22 figma make is a little bit and then let’s just show them how it works yeah and maybe before jumping
0:02:27 to make i should mention so figma ai has been around a couple years and we have a ton of ai
0:02:32 features embedded in all of our products so you can use them in fig jam to summarize stickies and help
0:02:39 you brainstorm inside of figma slides you can generate images and rewrite text inside of figma sites you can
0:02:44 fill in content as you’re building out your site we’ve totally rebuilt our search engine to use
0:02:50 multimodal embeddings so it can search by text by frame or by image but the thing we’re most excited to
0:02:56 talk about and focus on today is our biggest net new gen ai native product which we’re calling figma
0:03:03 make yeah so figma make is a prompt to code tool that lets you get started with either natural language
0:03:10 or a screenshot or a figma frame and it will write code for you and show you an interactive
0:03:15 playable version of the app that you can riff with we’ve built it to be multiplayer first so multiple
0:03:21 people can be in here chatting alongside each other using code visuals and language so just to give you a
0:03:25 quick sense of it i mean it’s one of these starting prompts for data dashboard so you can see here the
0:03:30 prompt is create an intuitive and visually appealing dashboard that provides users with a whole bunch of
0:03:35 more specific things i’m going to go ahead and send this off and you’ll see here the model is starting
0:03:39 to reason so it’s starting to think about you know what different components it’s going to need
0:03:44 it’s summarizing its action plan and now it’s going ahead and starting to write some typescript files
0:03:49 over here we’re seeing the code starting to stream in from the model based on this prompt there’s
0:03:54 actually a whole file structure different components here of code that’s been preloaded and generated by
0:03:58 this and sometimes it can take a couple minutes depending on the complexity of the thing you’re asking
0:04:03 for so while this goes ahead and streams i’m going to pull a little bit of a martha stewart and swap this
0:04:09 out for another version of the exact same prompt which i already ran ahead of time so this is the
0:04:13 same prompt you know you can see the the whole set of reasoning it did and it went ahead and created
0:04:18 the first version of this dashboard application you’ll see one thing it just immediately followed up with
0:04:23 is please note figma make is not designed for collecting personally identifiable information but
0:04:29 we can actually add a whole database to this to make the data real oh wow so we can go ahead i’ll show
0:04:34 you that in a second but we recognize for lots of applications from prototypes to internal tools to
0:04:39 straight up things you want to publish being able to persist data real data and connect to data sources
0:04:44 is really important so anyway we’ll look real quick at what it actually made so it says you know here’s the
0:04:48 dashboard you can see there’s some interactivity and hover states on this chart here a couple different
0:04:53 charts showing different breakdowns so this actually you know looks kind of nice there’s a hover state
0:04:58 there’s a list of project entries some of this stuff is not fully hooked up but it gets you started
0:05:02 this seems like a great way to like prototype something yeah totally and i think you know one
0:05:06 of the things we’ve really seen too is that uh this brings a whole team together where you know we’ve
0:05:11 really optimized for designers which i’ll talk about more in a second but everyone can come in here and
0:05:16 start riffing and building on this simply with language and so i’m just going to go ahead and create
0:05:23 a new project here um this is a test project using superbase which is a third-party tool we integrate
0:05:29 with that basically can host data and so you can see here it stood up a database based on the underlying
0:05:35 schema of the prompt of the project i was describing where it’s going to store this data and it’s also
0:05:41 starting to write now server code not just front-end code that will be able to handle what happens when
0:05:46 you click buttons and you want to add new things and store them and so this is a really powerful piece
0:05:50 functionality to make these things long-lived that’s awesome and so it like it just figured
0:05:54 out the schema you needed and i guess if there’s anything that you might have missed it’ll go and
0:05:58 update the database and add new tables and everything like that yeah exactly and this is something you can
0:06:04 iterate on over time say add new columns add another table for users not just for you know revenue as an
0:06:09 example right here and so yeah this is a you know really powerful sort of building block to make even
0:06:14 richer experiences and so a lot of what we’re starting to see people you know use this for is
0:06:20 building richer sort of higher fidelity prototypes and interactions to prove out ideas and get more
0:06:25 feedback on them and so traditionally in the product design process you know making mocks and figma is
0:06:30 great even making traditional prototypes in figma where you hook up noodles to connect you know workflows is
0:06:36 really powerful but also it’s kind of time consuming and there’s also a limit to what the fidelity is of those
0:06:41 experiences you know there is no data stored on them you know they’re not actually code backed so you
0:06:47 don’t get the full fidelity of of interactions and so what we’ve seen is people using this both if they
0:06:51 don’t have the skill set to engage in figma design as fully as other you know professional designers
0:06:57 and also for designers to pick up where figma has traditionally ended you know a lot of designers
0:07:02 don’t know how to code you know that deeply and so it feels like a superpower to get something where you
0:07:07 can bring in your designs and keep going yeah totally i mean like i’m an okay designer and an
0:07:13 okay coder i’m not amazing at either one and i’ve always like when i use figma i was like okay you know i
0:07:17 spent a lot of time making something beautiful and then to go actually code it oh my god it’s a lot of work and
0:07:21 usually when i go code it i end up getting lazy and it looks slightly different like okay that’s good enough
0:07:26 that’s close enough so i was like if i could actually get my beautiful design and like press a button in the future and
0:07:30 then be able to tweak it in the eye that would be amazing totally 100 so while this is checking on on the
0:07:36 database piece which you can imagine i just wanted to show sort of a couple other pieces so maybe just to pause the
0:07:41 database example to give you a sense of how this works with design systems we know design systems are you know really
0:07:48 important for teams you know they create consistency for users and what to expect you know out of the product and so they
0:07:53 allow you to you know have a next level of consistency i’m super curious like how does a design
0:07:57 system work at this so i may not even know the full functionality of like regular figma because i know
0:08:02 you can like save colors and things like that in fonts yeah is it beyond that can you like save your button
0:08:07 types and all kind of things like that and yeah great question so basically taking your design systems
0:08:14 in figma which have tokens and variables they have you know colors fonts themes and converting that into
0:08:19 something that can be used basically as an input to this generation and so actually over here i did have
0:08:25 an example where i converted the same output into the figma simple design system which we’ve open sourced
0:08:31 and using those set of uh stylings instead so you can see it’s like you know now using this sort of figma
0:08:36 branded aesthetic and we’re excited to do over time much more here you know hear a lot of requests to like
0:08:40 use my literal components and i can show you the workflows we have for those today as well yeah that seems
0:08:46 powerful like i’ve been using uh clod code and factory book a lot more uh to like create you know
0:08:51 prototypes and just play around and uh you know one thing is like getting them to actually follow design
0:08:54 systems like the best thing i’ve figured out is like you can kind of like map out part of your design
0:08:58 system in like a markdown file or something and hand to them but then it keeps forgetting so if you had
0:09:05 something just directly in figma it seems better to me totally yeah and i should mention as well like you
0:09:10 know people are used to riffing and editing in figma so it’s not just in prompts you know you can use this kind of
0:09:15 magic pointer tool and starts to go ahead and just riff on things in line and you can do that with
0:09:20 your team there is the multiplayer aspect of this so you just yeah yeah exactly so i can go ahead and
0:09:24 share this file and everyone sees the same thing just like you expect from figma design yeah and
0:09:28 actually multiple people can chat so you see my avatar here in a multiplayer file you’ll see other
0:09:32 people’s avatars with their prompts and something we’ve invested a lot in is making that work across
0:09:40 modalities so if someone makes changes you know visually here versus via prompts or even versus via code it all
0:09:46 plums through to everyone else and so we want this to be a surface where an engineer can come and riff
0:09:50 with the pm and the designer and make their own version on like okay here’s how exactly this should
0:09:55 feel and how does the multiplayer work with the prompting like i assume it’s one person prompting
0:09:59 at a time and then like what everyone kind of sees like okay it’s i mean they just see it happening and
0:10:03 they have to wait i guess yeah yeah good question basically what happens while prompt is running is
0:10:07 that you know you get a loading state and you can pause it to run a new one and so everyone gets that same
0:10:10 experience you can either like wait for the thing that’s been running to finish running or you can
0:10:14 kill someone’s stuff before you and we found that works pretty well so far and you know if if i want
0:10:19 to start riffing on this i could have like an inline contextual prompt for it but i could also like jump
0:10:25 on over and see exactly the piece of code that corresponds to this and start changing that directly
0:10:30 as well there if i have that context you know i grew up on irc for me seeing this i’m like uh
0:10:34 imagining some crazy collaborative project where everyone’s just like messing around and making
0:10:39 something together and like just sharing the link online it’ll be fun but yeah i could see how teams
0:10:44 could actually get real use out of this so yeah 100 yeah i mean i think that’s been the magic of figma always
0:10:50 is like figma was born on the web it was multiplayer first it’s just sharing a link um i think there are
0:10:54 starting to be more and more of these you know prompt to code tools but i think you know we have
0:11:00 put a ton of effort in to making this work really well with your team across different personas and
0:11:04 modalities yeah i’m curious about that i mean obviously you know lovable has been taking off and
0:11:10 then there’s v0 and there’s a few different ones so i mean some of the functionality looks similar but
0:11:14 you know what’s the main difference is the main difference is it’s more like designer first
0:11:18 you can actually kind of get in there and tinker with the designs and and things like that you know
0:11:22 i’d say first and foremost this whole category is really early yeah you know like we talk about
0:11:28 the whole space like none of these things existed like a year ago right it’s like this whole space is
0:11:33 getting figured out right now which is really exciting and a lot of that is you know building on the new
0:11:38 capabilities of these models and trying to figure out the workflows that make sense and so i’d say you know
0:11:44 right now we’ve invested a ton in multiplayer as the sort of core thing you come to love and expect
0:11:50 from figma and a lot on interop with the rest of figma you know say you have a mock you’re trying to
0:11:56 build a sort of interactive visualizer for a solar system this is a traditional you know figma layer
0:12:02 just from figma design i’m gonna literally hit copy paste on this thing and go over here and say
0:12:08 make this interactive and what you’ll notice here is like there’s a little fig mic on here like this
0:12:14 is not actually just a screenshot this is all of the rich structured data that comes over with
0:12:19 this it’s every layer name it’s every token every variable every property and we have done a ton of
0:12:27 work on quality to be the best place at generating high fidelity results from designs as a starting point
0:12:32 and we’ve seen a really high percentage of our users start with designs as well and we’ve optimized for
0:12:37 that you know even in the blank prompt box we say at the top like put your design in here and so i’d say one
0:12:43 of the things you know we’ve really focused on is taking the workflows designers already have in
0:12:48 figma and letting you go much further to express things at a higher fidelity through code through
0:12:52 interactivity in a way that’s much lower effort than people have had before
0:13:01 okay let’s be honest your ai prompts aren’t giving you the results you deserve but with a little coaching
0:13:08 you can transform from basic prompts to engineering conversations that get you exactly what you want
0:13:14 from chat gpt that’s what this playbook delivers not just random prompts but a step-by-step system with the
0:13:20 exact techniques top ai professionals use every day you’ll have your own personalized prompt engineering
0:13:27 system that delivers consistent results get it right now scan the qr code or click the link in the
0:13:32 description below now let’s get back to the show when i think about figma you know when it was first
0:13:37 suggested i use it i used to use photoshop back the day i still use it a little bit but you know using
0:13:42 photoshop to create to design a website is a pain like just dealing with all different layers there’s a
0:13:45 lot more manual work to do small little changes and then you get into figma it’s like oh everything’s
0:13:50 easy to move around and and then not only that but then like you know you guys started giving all the
0:13:55 like code or you give like css rules and all that kind of stuff you can use and so obviously this is
0:13:59 like a natural evolution like well okay now just give you the rules because if you don’t know how to code
0:14:04 that’s hard to like know what to do with but now literally just create the code for the designer totally
0:14:09 yeah and so here this example finished cranking so this was going to bring in a you know a mock
0:14:15 that had different itemized planets or the solar system and you can see based on literally make
0:14:20 this interactive as the prompt and the underlying structure of the design that we brought in
0:14:25 it inferred that you know each of these different planets is its own entity moving at different
0:14:32 speeds they move around the circles it created you know this functional speed scrubber that works
0:14:36 if i click on one of these planets there’s an overlay that comes out did it know that because
0:14:40 of the layer names or did it actually look at a picture or like how did it know that
0:14:45 how did infer that yeah that’s right so you know if i go back to the original design here like i
0:14:49 can you know drill down a bit and you can see you know each of these different planets
0:14:55 has been sort of like itemized with the planet name so like you know uranus orbit along with the arc
0:15:01 that it takes and so like we found this kind of context is like incredibly helpful for the model
0:15:06 and so like you take a random screenshot and give it to any of those these tools like we’ll do okay
0:15:10 especially if you write a longer prompt but to the point of like where is figma different is like
0:15:17 figma is already the workflow design teams product teams are using to articulate design intent to detail
0:15:23 out specific workflows and that data is super super valuable to models and they can pick up so much
0:15:29 context from that to make the output really really good with less effort makes sense it feels like
0:15:34 you guys have done a good job when i was thinking about what figma doing ai i was like well right now
0:15:38 at least from like twitter discourse i know twitter is kind of a bubble but you know it feels like the
0:15:44 design community is very passionate about things and in terms of ai right now uh you know there’s
0:15:49 definitely been some cohort of like the design community that’s the kind of anti-ai or at least that’s
0:15:52 what i’ve been seeing on twitter and it feels like you guys are kind of doing a great job of
0:15:58 making it clear like hey this is not replacing you i mean like if i was a full-time designer this is
0:16:04 amazing because like for me whether you’re designing or coding you know it is the art of creating things
0:16:08 right you’re creating things out of nothing and now the idea that you could be a designer and not know how
0:16:13 to code and you created something out of your brain and turned into a real design and then now you turn
0:16:18 into a real product that’s just like that’s amazing i don’t think like most people realize
0:16:23 like how magical that is hundred percent yeah it’s been totally inspiring and i think we’ve been blown
0:16:29 away by just how much people can make with this and so maybe just to finish the demo section with a couple
0:16:34 of fun examples from real customers you know this is one of a map and like you know this looks a lot
0:16:40 like a mock and i think traditionally a designer might end here but like you can actually use this map
0:16:46 and like you know that’s like one prompt to add that level of interactivity and like you know
0:16:51 imagine the feedback you’re going to get in a user study around you know exactly how this works to
0:16:58 find coffee shops yeah based on this another fun one this was for a conference collecting all the
0:17:03 different iconography and the logos for a team that was planning the conference and so it became a little
0:17:09 bit of like their micro site for the design system of the conference that they all put together and published
0:17:15 and sort of added all this wraparound with figma make that is so we’ve seen internal tools start to really take off as well
0:17:21 and so this was a really fun one of like a color palette generator that someone on a design team built
0:17:29 to make it much easier to get the right sort of compliant colors with the exact mixes and different scenarios
0:17:33 and like this is the kind of thing that you know is so much more powerful as an app
0:17:37 you can explore and send around relatives like a static thing and you never would have gotten a you
0:17:42 know internal tools team to fund right but now someone can actually like go ahead and post their
0:17:45 team because they don’t have to wait right they just cut the idea and they design it and then
0:17:51 and then it makes it totally and the last one like i’ve just been blown away by stuff we didn’t optimize
0:17:57 for you know based on how good these underlying models are and so like people have built full-on
0:18:02 three video games in this which is like kind of insane here’s one that someone built which is i
0:18:06 haven’t actually even finished this game there’s like a whole different world a bunch of different
0:18:11 spells there’s like creatures that are kind of come out and start going after me i’m like wow this is
0:18:16 insane they’re like you know literally just through prompting you’re able to get to this level of
0:18:20 expression you should make a like a old school rpg with this this or my i used to play every quest
0:18:24 that’s actually how my career got started yeah yeah it reminds me of playing every quest and like
0:18:27 kiting mobs and like you got to do a spell and you got to run a little bit then they’re still
0:18:32 coming at you yeah someone actually recreated um doom oh cool which was pretty well very cool
0:18:41 my first million hosted by sam parr and sean furry is brought to you by the hubspot podcast network
0:18:46 the audio destination for business professionals my first million features famous guests like
0:18:51 alex romozi sophia amoroso and hassan minhaj sharing their secrets for how they made their
0:18:56 first million and how to apply their learnings to capitalize on today’s business trends and
0:19:03 opportunities they recently had a fascinating episode about how you can scale a profitable agency
0:19:09 with zero employees using ai agents listen to my first million wherever you get your podcasts
0:19:17 so i’m curious like who is the user of figma make is it going to be primarily designers are you guys
0:19:21 trying to reach out to people beyond designers as well because i i definitely see how this becomes a
0:19:27 superpower for designers i am curious you know how other people outside of design would use this or how
0:19:30 they get value out of it if they’re not a designer or if you guys don’t care about that you’re just
0:19:36 serving designers only you know and if other people use it that’s great you know yeah yeah great
0:19:41 question yeah we optimize for designers to start and so we’ve done a lot to you know as i mentioned bring over
0:19:46 that context from figma design but also make this a great place for whole product design engineering
0:19:51 teams to work together and so the fact that code is there and you can change that the fact that you
0:19:55 have a pointer and can directly you know change different aspects of the experience like all of
0:20:02 these have been designed so that your designer your pm your engineer can use this as a collaborative
0:20:07 multiplayer surface to iterate on what the product experience should feel like together which is what
0:20:12 figma has been great at historically as well and so you know that’s definitely they’ve been the core
0:20:16 right now i’d say you know we’ve started with prototyping as a hero scenario and we’ve been
0:20:23 surprised how blurry the line is between what is a prototype and what is production right and it means you can
0:20:28 publish and start sharing with users and getting feedback and start using code libraries to hook it up to
0:20:36 a real back end to storing data like you know we’ve seen people pitch vcs and get funding on things that
0:20:42 they built in figma make without you know anyone else involved with real users using it yeah wow um
0:20:49 and so i think we’ve been just totally blown away at the breadth of cases people are already using it for
0:20:56 yeah and maybe to share one more example we did a ton of dog fooding on this before it went live it was really
0:21:01 helpful in iterating on quality we all generally have a dog fooding oriented culture at figma but
0:21:07 this was over the top that we called it the great figma bake-off and we had like 20 different meetings
0:21:11 scheduled for the whole company in every time zone where people from the team would be there
0:21:16 to answer questions or troubleshoot or help you work with bugs we had a competition like what were the
0:21:22 coolest things people made and all sorts of people made inspiring things and i think one of the coolest ones
0:21:28 for me was someone on the hr team who had zero design background zero technical background they
0:21:36 use workday as our source of truth for people data they found a workday api and they built a game that
0:21:41 uses the real people data of the company that shows four faces and four names and you had to guess who is
0:21:46 who yeah and it like became viral within the company of people like playing this game and trying to you
0:21:51 know get to know their colleagues and i was like wow this is something that like no one would have
0:21:58 funded as like an internal what the hell are you talking about that’s my pitch that right yeah let’s
0:22:03 go spend resources on this and it’s like you know it’s a persona we didn’t optimize for like we didn’t
0:22:09 build figma make for hr people right um but it’s just been totally inspiring to see you know how accessible
0:22:14 it has made the process for everyone it’s awesome my friend who used to run a design agency in san
0:22:19 francisco just imagining you know for him like you know when you’re pitching new clients if he could
0:22:25 have just like design things and then just had a prototype there that’s just nuts right compared to
0:22:30 like oh here’s a design like here’s a prototype that works you know yeah that’s just totally yeah i
0:22:35 still want to go back to what i said previously about uh like if you guys had any backlash on this from
0:22:39 designers because i assume you guys got some i think i saw some online a little bit when it first
0:22:44 got announced but i assume you know if i was a designer even if i didn’t like ai maybe at first
0:22:50 i’d be like oh this sucks it’s ai and then i start using it my day-to-day work and it’s like oh it’s
0:22:55 making my life so much better so like how can you keep hating it is that kind of how it went yeah you
0:23:00 you know i’d say just to zoom out from the story of make to the story of figma ai you know we shipped
0:23:07 stuff last year at config 2024 we shipped a feature called make designs which was our very first attempt
0:23:13 at a prompt to design products inside of figma design and so you could say you know make me a landing
0:23:17 page for xyz and you would create it not as a code backed prototype but as native figma frames
0:23:23 and we messed up in a bunch of ways on that like we messed up explaining how it worked and so there’s
0:23:28 confusion on that like it used off-the-shelf models and templates that are customized and it
0:23:33 was funny we had to call the project internally first draft and the whole point of it was to like
0:23:38 solve the blank canvas problem get you started make it so that like you know we’re doing your
0:23:42 laundry and your chores and you’re doing the creative part as a product design team
0:23:48 and i think make designs even in the name implied much more than that as like we’re going to do the
0:23:53 whole thing for you which is not yeah designer you don’t need to do any design just we’ll do it for you
0:23:59 totally and like you know we we are a design company we are for designers and so i think it was
0:24:03 definitely a big learning and like how we talk about these things and what they’re for and i
0:24:10 i think with make i think what we did right was we started with things that designers have trouble
0:24:17 with and they can’t do which is getting into the code layer and so we sort of start at the end
0:24:22 of the process where a lot of people do get sucked today with the current set of tools and so i think
0:24:27 it felt like something that new as opposed to automating parts of the process that i have a lot of
0:24:34 opinions expertise taste around which was not our original intention but you know easy to come across
0:24:39 wrong and so i think that was definitely a big learning you know for us in general um as a company
0:24:45 that prides itself on being advocates for design as a function and champions of designers is like making
0:24:50 it really really clear that this is kind of trying to give you new superpowers i am curious like
0:24:56 where does figma and figma make where does this go like in three to five years how does this work
0:25:01 like if you’re a designer um yeah i can’t make forward looking statements okay why
0:25:08 i have two kids i have a six-year-old and a three-year-old and my six-year-old over the last
0:25:13 year has started playing ipad games he’s like addicted to duolingo he’s like a daily active user
0:25:18 learning math and chess and that kind of stuff and he started using make before we launched
0:25:25 and i was like curious to see as a very much not our target persona right like how understandable would
0:25:30 it be and he’s like hooked like he won you know begged me to like spend more time on make and
0:25:35 you know walking home from school or you know at the grocery store running errands he’ll be like
0:25:39 i had an idea for a new one daddy oh that’s so cool like you know he’s made like six games now
0:25:44 and he’ll sometimes come home from school with like a sketch of like a map or a level and he’s
0:25:49 like take a picture of this like we should use this as a starting point oh man and honestly it is like
0:25:56 mind-blowing and i’m so jealous like right yeah imagine being a kid like you have any idea and like
0:26:00 yeah i can actually make this now the ai will help me make it i have an 11 year old son you know
0:26:05 he grew up in san francisco around a bunch of like tech and game industry like executives and
0:26:09 people like that but he was little and so he got to see all this kind of creative world there right
0:26:12 like artists like that we used to have like artist parties where we’d draw on the walls and he’d be
0:26:17 there with artists drawing on the wall but now we live in japan you know japan’s great but he’s no
0:26:21 longer in that kind of environment i have been showing him things like uh reflet i showed him
0:26:25 reflet he loved that like he made like a little website with that but uh the websites were really
0:26:29 ugly so i was like okay you know and he didn’t really like how ugly it was which i think reflet and
0:26:32 those guys have gotten a little bit better but i think something like figma maker where he could
0:26:36 actually like go in and tweak the design itself too would be awesome for him to be able to see
0:26:42 the whole process of like making it look good and and then actually shipping it would be incredible
0:26:48 yeah i love his feedback okay i’ll get them to your question i’m like you know what’s the future look
0:26:56 like you know five years from now i think it’s like making the path from idea to production idea to
0:27:04 reality so much shorter and like you know seeing even game toy examples with my son makes me realize
0:27:09 like the way people think about the workflow the way you think about what’s possible the way you explore
0:27:16 your ideas is going to be totally different and i think in this new world design is even more important
0:27:23 than it has been and design isn’t just pixels it’s empathy for users it’s understanding of your target
0:27:29 audience it’s you know knowledge of current workflows and where they fall short it’s exploring the whole
0:27:34 solution space and thinking deeply about each of the nodes that you might not have had time to you know in
0:27:38 the old world yeah it’s sending down every animation and interaction of the experience
0:27:44 and so one of the things i’m really excited about in that future is like software is going to get
0:27:51 freaking awesome like everything is going to get so much more thought through so much more explored
0:27:55 every fit and finish is going to be better and by the way there’s going to be a lot of low quality
0:27:59 software too yeah totally like there’s just going to be more software than has ever been made it’s
0:28:03 like in the early days the web that’s what i’ve said in the podcast before you know i grew up on irc like
0:28:07 the web used to be like fun you know yeah it was messy it was you know it’s total mess but it was
0:28:12 easy to get in there just like tinker and make websites and now you don’t really see that anymore
0:28:16 so i’m hoping that stuff like figma make brings that back we’re like yeah the web becomes fun again
0:28:21 because people can just have ideas and just easily make stuff totally yeah i think we’ll see like you
0:28:25 know even more long-tail personalized experiences for different schools and communities and like people
0:28:30 building stuff for themselves yeah and the stuff that’s built for everyone being like even more
0:28:36 sophisticated and you know helpful in in a wider range of scenarios i think you’ll probably see some
0:28:40 really interesting experiments around collaborative creation of things too i think you’ll see like
0:28:44 communities like actually creating new kinds of projects and stuff together will be fun totally
0:28:51 cool so uh you know this is a total theoretical scenario so imagine you got a time machine and you’re in
0:28:56 new york time machine you get out it’s 2050 what’s different is anything different does it look the
0:29:01 same it’s still the same bagels and pizza is there other stuff going on in new york or what’s going on
0:29:09 i mean new york bagels and pizza are not going anywhere okay hopefully honestly 2050 is so far right
0:29:15 like 10 years let alone that far it’s like man i you know i have aspirations there’s whole conferences on
0:29:19 this stuff and it’s like you know very hard to predict everything right this is something i like
0:29:23 to riff on and like i’ll hear what people say it’s a great prompt i mean stuff i’m like personally
0:29:29 excited about waymo’s coming to new york figuring out how my kids get to play dates and stuff is hard
0:29:34 i’m excited for ai to get to a level of trust and safety and roll out to like the point where
0:29:41 getting around in the world is like a solved problem and like that seems like it’s happening which is super
0:29:47 exciting like waymo is fantastic health is really hard i personally have celiac disease and was
0:29:51 diagnosed about two years ago and it’s been a whole learning journey about you know what can i eat and
0:29:58 what are my sensitivities and so forth and lots of blood tests and follow-ups and you know even for me
0:30:05 chat gbt has been like so helpful in understanding what the terminology means and all that and i think
0:30:11 in broader access to that level of expertise with verifiable trust and awareness is going to be
0:30:16 huge for society and just like people understanding what’s happening in their lives and things that are
0:30:23 really core yeah from health to finance to dealing with the insurance because their house burned down
0:30:29 to all of those kind of core fundamental things that are like anxiety provoking complicated and scary
0:30:34 and it’s hard to get experts who actually understand the whole system and so i think that’s going to be
0:30:40 like incredibly meaningful in ways that are like hard to really internalize still right and then there’s
0:30:45 like the really out there stuff of like are we all going to have neural links or glasses on our faces that
0:30:49 like understand the world around us and are chatting with us are we going to have moon colonies by then
0:30:53 is everyone going to be living longer like i hope all those things are true and like you know
0:31:00 i’m an optimist and a tech futurist but you get into like singularity theory type questions yeah once
0:31:04 you approach the singularity all bets are off who knows what the hell happens right yeah the health
0:31:08 thing that’s something i think about a lot because like you know if you think about a doctor they go to
0:31:11 school for eight years or whatever it is a lot of it’s about reading a lot of books and trying to
0:31:15 retain as much of that knowledge as possible and maybe if you’re lucky they retain like five percent
0:31:19 of the knowledge or something and then over time they get more expertise by dealing you know with
0:31:25 patients but obviously ai could take in all that knowledge and over time actually understand all
0:31:30 that we’ve learned and start expanding upon that and then combine that with also collecting more data
0:31:34 on us individually you know even like down the lowest level possible it seems like ai will be able to
0:31:38 understand us in the future like eventually we will have ai that like okay nathan what’s going on with
0:31:43 your body right now like you know there’s like could be things totally unexpected like oh some cancer
0:31:48 started for this reason and you know and then we can kind of solve it this way that sounds like
0:31:52 sci-fi for people but i really strongly believe that’s coming it may take like 20 or 30 years
0:31:57 hopefully it’s more like 10 but that’s gonna be such a game changer for people yeah i’d say also you
0:32:03 know just on the you know the role of ai in these in the workforce as well you know i think we’ll see
0:32:07 as it continues to evolve and capabilities come out i think in every sort of industrial breakthrough
0:32:12 and revolution there’s been concerns about what it means and ultimately people have learned new skills
0:32:16 and been even more productive on things that are even more meaningful and so i’m personally really
0:32:21 optimistic and excited and i think seeing people like my son start to use you know figma make and
0:32:28 tools like it in totally new ways makes me feel like you know there’s just new frontiers to work on and
0:32:33 like what work means will change yeah as a designer i think you know when we have robots building things
0:32:37 i mean like what being a designer is going to be it’s going to change maybe like almost like an architect
0:32:42 you’re like literally like designing new buildings you know on the moon or mars or wherever we go
0:32:46 go and you know a designer will be able to actually like come up with things maybe ai assist it maybe
0:32:51 they do it themselves whatever make probably a combination and then the things become real
0:32:56 things and digital things it’s going to be such a crazy time to be alive totally yeah i can’t wait for
0:33:01 that cool man is there anything else you wanted to talk about before we got off here or um honestly i was
0:33:06 kind of curious like your head takes too and like you know you’ve tried a lot of these tools you know what’s
0:33:11 your sense of where the market’s going you know how you see figma fitting into it so i’ve only played
0:33:16 with figma make a little bit quite honestly i played with it yesterday i like to have people on and like
0:33:20 try to have like a real response to what they’re showing me as possible versus like yeah i’ve actually
0:33:23 tried all of this i know everything you’re doing and now i’m faking and pretending like i don’t know
0:33:27 what’s going on or like i’m learning something new but i play with it a little bit exactly what i was
0:33:31 hoping it was especially the fact that you can just like like import the design in and have like
0:33:36 start from the design because i feel like the market like you know what lovable is doing it’s
0:33:41 great i do feel like it’s saturated there’s gonna be there’s a lot of players in that space so i think
0:33:46 you know i’ve also had on matan the founder of factory who’s competitive with devon and like devon
0:33:50 and factory i think that’s interesting that’s like a different side where it’s it’s all agents and it’s
0:33:55 more hardcore on like the enterprise and coding and so like it makes sense that you’re not competing
0:34:01 directly with level or v zero you’re doing something more for designers and so i think
0:34:04 you guys are on the right path and you know it definitely seems like way better than what you
0:34:09 guys announced in 2024 quite honestly i remember seeing that like oh this is you know it’s not i
0:34:13 don’t know it’s it’s kind of confusing and i can see why designers didn’t like it figma make seems
0:34:17 like the right path like this is something that gives designers superpowers i you know i haven’t
0:34:21 played around with the product enough to give you like honest feedback about oh it’s amazing and
0:34:25 all it all works and but at least conceptually and from what i’ve seen from the early version of it
0:34:30 it looks great cool well yeah i appreciate any candid feedback at any point yeah i’ll try to play with it
0:34:35 more you know as i said we’re just getting started you know in general and ai in this market and i think
0:34:40 at figma ai as well and we have a lot of really exciting stuff coming we’re very focused on this so
0:34:45 you know any and all feedback from you your listeners really excited for and uh yeah stay tuned for
0:34:49 some fun stuff ahead awesome it’s been great having you on here is there anywhere uh like people can
0:34:55 find you online are you active on on twitter on linkedin or anywhere like that yeah i’m on twitter
0:35:01 and linkedin uh david kossnick k-o-s-s-m-i-c-k cool and yeah thank you for having me on this was super
0:35:13 fun really appreciate it thanks
0:00:12 wave our guest is david kosnick from figma he showed us a demo of figma make a mind-blowing
0:00:17 new tool that turns your designs into live working code with nothing more than a prompt
0:00:21 whether you’re a designer a founder or just someone dreaming up ideas on the train
0:00:26 this is the next evolution in software creation no more handoffs no more designer versus dev
0:00:32 debates just collaborative multiplayer magic live in the browser david walks us through how figma make
0:00:38 builds dashboards games and real data-powered apps on the fly he shares figma’s vision lessons learned
0:00:42 from their first ai rollout and what the future design and creation might look like in a world
0:00:47 of ai native workflows if you want to see the future of product design this is it but before we get
0:00:51 started you know we spend a lot of time on these episodes and it would mean a lot to me if you could
0:00:56 hit the subscribe button it helps us grow the show and get on better guests to provide more value to
0:00:59 you so without further ado let’s jump in with david kosnick from figma
0:01:10 cutting your sales cycle in half sounds pretty impossible but that’s exactly what sandler training
0:01:16 did with hubspot they used breeze hubspot’s ai tools to tailor every customer interaction without
0:01:22 losing their personal touch and the results were pretty incredible click-through rates jumped 25 percent
0:01:27 and qualified leads quadrupled and people spent three times longer on their landing pages
0:01:31 go to hubspot.com to see how breeze can help your business grow
0:01:37 david thanks for coming on the show thanks for having me super excited to be here
0:01:42 yeah you know kind of a crazy story i’ve been a user and a fan of figma for a long time
0:01:47 actually originally one of my designers my previous startup binded he told me you’ve got to try figma
0:01:51 out and i was like oh okay i’ll try it and i’ve loved it ever since it’s been awesome to see how big
0:01:56 figmas become and how it’s become kind of the standard and then when ai started happening i was
0:02:00 like oh god i hope figma’s gonna be okay i mean just everyone’s using figma now all the designers
0:02:04 but what happens when ai starts coming to the picture how is that going to change things and
0:02:09 i saw dylan introduce figma make you know maybe a few months back and uh like okay i’ve got to get
0:02:13 someone from figma on the show and also just to learn you know how it works and like where you guys
0:02:17 are planning to take figma in the future yeah i think if you want to start off like explain what
0:02:22 figma make is a little bit and then let’s just show them how it works yeah and maybe before jumping
0:02:27 to make i should mention so figma ai has been around a couple years and we have a ton of ai
0:02:32 features embedded in all of our products so you can use them in fig jam to summarize stickies and help
0:02:39 you brainstorm inside of figma slides you can generate images and rewrite text inside of figma sites you can
0:02:44 fill in content as you’re building out your site we’ve totally rebuilt our search engine to use
0:02:50 multimodal embeddings so it can search by text by frame or by image but the thing we’re most excited to
0:02:56 talk about and focus on today is our biggest net new gen ai native product which we’re calling figma
0:03:03 make yeah so figma make is a prompt to code tool that lets you get started with either natural language
0:03:10 or a screenshot or a figma frame and it will write code for you and show you an interactive
0:03:15 playable version of the app that you can riff with we’ve built it to be multiplayer first so multiple
0:03:21 people can be in here chatting alongside each other using code visuals and language so just to give you a
0:03:25 quick sense of it i mean it’s one of these starting prompts for data dashboard so you can see here the
0:03:30 prompt is create an intuitive and visually appealing dashboard that provides users with a whole bunch of
0:03:35 more specific things i’m going to go ahead and send this off and you’ll see here the model is starting
0:03:39 to reason so it’s starting to think about you know what different components it’s going to need
0:03:44 it’s summarizing its action plan and now it’s going ahead and starting to write some typescript files
0:03:49 over here we’re seeing the code starting to stream in from the model based on this prompt there’s
0:03:54 actually a whole file structure different components here of code that’s been preloaded and generated by
0:03:58 this and sometimes it can take a couple minutes depending on the complexity of the thing you’re asking
0:04:03 for so while this goes ahead and streams i’m going to pull a little bit of a martha stewart and swap this
0:04:09 out for another version of the exact same prompt which i already ran ahead of time so this is the
0:04:13 same prompt you know you can see the the whole set of reasoning it did and it went ahead and created
0:04:18 the first version of this dashboard application you’ll see one thing it just immediately followed up with
0:04:23 is please note figma make is not designed for collecting personally identifiable information but
0:04:29 we can actually add a whole database to this to make the data real oh wow so we can go ahead i’ll show
0:04:34 you that in a second but we recognize for lots of applications from prototypes to internal tools to
0:04:39 straight up things you want to publish being able to persist data real data and connect to data sources
0:04:44 is really important so anyway we’ll look real quick at what it actually made so it says you know here’s the
0:04:48 dashboard you can see there’s some interactivity and hover states on this chart here a couple different
0:04:53 charts showing different breakdowns so this actually you know looks kind of nice there’s a hover state
0:04:58 there’s a list of project entries some of this stuff is not fully hooked up but it gets you started
0:05:02 this seems like a great way to like prototype something yeah totally and i think you know one
0:05:06 of the things we’ve really seen too is that uh this brings a whole team together where you know we’ve
0:05:11 really optimized for designers which i’ll talk about more in a second but everyone can come in here and
0:05:16 start riffing and building on this simply with language and so i’m just going to go ahead and create
0:05:23 a new project here um this is a test project using superbase which is a third-party tool we integrate
0:05:29 with that basically can host data and so you can see here it stood up a database based on the underlying
0:05:35 schema of the prompt of the project i was describing where it’s going to store this data and it’s also
0:05:41 starting to write now server code not just front-end code that will be able to handle what happens when
0:05:46 you click buttons and you want to add new things and store them and so this is a really powerful piece
0:05:50 functionality to make these things long-lived that’s awesome and so it like it just figured
0:05:54 out the schema you needed and i guess if there’s anything that you might have missed it’ll go and
0:05:58 update the database and add new tables and everything like that yeah exactly and this is something you can
0:06:04 iterate on over time say add new columns add another table for users not just for you know revenue as an
0:06:09 example right here and so yeah this is a you know really powerful sort of building block to make even
0:06:14 richer experiences and so a lot of what we’re starting to see people you know use this for is
0:06:20 building richer sort of higher fidelity prototypes and interactions to prove out ideas and get more
0:06:25 feedback on them and so traditionally in the product design process you know making mocks and figma is
0:06:30 great even making traditional prototypes in figma where you hook up noodles to connect you know workflows is
0:06:36 really powerful but also it’s kind of time consuming and there’s also a limit to what the fidelity is of those
0:06:41 experiences you know there is no data stored on them you know they’re not actually code backed so you
0:06:47 don’t get the full fidelity of of interactions and so what we’ve seen is people using this both if they
0:06:51 don’t have the skill set to engage in figma design as fully as other you know professional designers
0:06:57 and also for designers to pick up where figma has traditionally ended you know a lot of designers
0:07:02 don’t know how to code you know that deeply and so it feels like a superpower to get something where you
0:07:07 can bring in your designs and keep going yeah totally i mean like i’m an okay designer and an
0:07:13 okay coder i’m not amazing at either one and i’ve always like when i use figma i was like okay you know i
0:07:17 spent a lot of time making something beautiful and then to go actually code it oh my god it’s a lot of work and
0:07:21 usually when i go code it i end up getting lazy and it looks slightly different like okay that’s good enough
0:07:26 that’s close enough so i was like if i could actually get my beautiful design and like press a button in the future and
0:07:30 then be able to tweak it in the eye that would be amazing totally 100 so while this is checking on on the
0:07:36 database piece which you can imagine i just wanted to show sort of a couple other pieces so maybe just to pause the
0:07:41 database example to give you a sense of how this works with design systems we know design systems are you know really
0:07:48 important for teams you know they create consistency for users and what to expect you know out of the product and so they
0:07:53 allow you to you know have a next level of consistency i’m super curious like how does a design
0:07:57 system work at this so i may not even know the full functionality of like regular figma because i know
0:08:02 you can like save colors and things like that in fonts yeah is it beyond that can you like save your button
0:08:07 types and all kind of things like that and yeah great question so basically taking your design systems
0:08:14 in figma which have tokens and variables they have you know colors fonts themes and converting that into
0:08:19 something that can be used basically as an input to this generation and so actually over here i did have
0:08:25 an example where i converted the same output into the figma simple design system which we’ve open sourced
0:08:31 and using those set of uh stylings instead so you can see it’s like you know now using this sort of figma
0:08:36 branded aesthetic and we’re excited to do over time much more here you know hear a lot of requests to like
0:08:40 use my literal components and i can show you the workflows we have for those today as well yeah that seems
0:08:46 powerful like i’ve been using uh clod code and factory book a lot more uh to like create you know
0:08:51 prototypes and just play around and uh you know one thing is like getting them to actually follow design
0:08:54 systems like the best thing i’ve figured out is like you can kind of like map out part of your design
0:08:58 system in like a markdown file or something and hand to them but then it keeps forgetting so if you had
0:09:05 something just directly in figma it seems better to me totally yeah and i should mention as well like you
0:09:10 know people are used to riffing and editing in figma so it’s not just in prompts you know you can use this kind of
0:09:15 magic pointer tool and starts to go ahead and just riff on things in line and you can do that with
0:09:20 your team there is the multiplayer aspect of this so you just yeah yeah exactly so i can go ahead and
0:09:24 share this file and everyone sees the same thing just like you expect from figma design yeah and
0:09:28 actually multiple people can chat so you see my avatar here in a multiplayer file you’ll see other
0:09:32 people’s avatars with their prompts and something we’ve invested a lot in is making that work across
0:09:40 modalities so if someone makes changes you know visually here versus via prompts or even versus via code it all
0:09:46 plums through to everyone else and so we want this to be a surface where an engineer can come and riff
0:09:50 with the pm and the designer and make their own version on like okay here’s how exactly this should
0:09:55 feel and how does the multiplayer work with the prompting like i assume it’s one person prompting
0:09:59 at a time and then like what everyone kind of sees like okay it’s i mean they just see it happening and
0:10:03 they have to wait i guess yeah yeah good question basically what happens while prompt is running is
0:10:07 that you know you get a loading state and you can pause it to run a new one and so everyone gets that same
0:10:10 experience you can either like wait for the thing that’s been running to finish running or you can
0:10:14 kill someone’s stuff before you and we found that works pretty well so far and you know if if i want
0:10:19 to start riffing on this i could have like an inline contextual prompt for it but i could also like jump
0:10:25 on over and see exactly the piece of code that corresponds to this and start changing that directly
0:10:30 as well there if i have that context you know i grew up on irc for me seeing this i’m like uh
0:10:34 imagining some crazy collaborative project where everyone’s just like messing around and making
0:10:39 something together and like just sharing the link online it’ll be fun but yeah i could see how teams
0:10:44 could actually get real use out of this so yeah 100 yeah i mean i think that’s been the magic of figma always
0:10:50 is like figma was born on the web it was multiplayer first it’s just sharing a link um i think there are
0:10:54 starting to be more and more of these you know prompt to code tools but i think you know we have
0:11:00 put a ton of effort in to making this work really well with your team across different personas and
0:11:04 modalities yeah i’m curious about that i mean obviously you know lovable has been taking off and
0:11:10 then there’s v0 and there’s a few different ones so i mean some of the functionality looks similar but
0:11:14 you know what’s the main difference is the main difference is it’s more like designer first
0:11:18 you can actually kind of get in there and tinker with the designs and and things like that you know
0:11:22 i’d say first and foremost this whole category is really early yeah you know like we talk about
0:11:28 the whole space like none of these things existed like a year ago right it’s like this whole space is
0:11:33 getting figured out right now which is really exciting and a lot of that is you know building on the new
0:11:38 capabilities of these models and trying to figure out the workflows that make sense and so i’d say you know
0:11:44 right now we’ve invested a ton in multiplayer as the sort of core thing you come to love and expect
0:11:50 from figma and a lot on interop with the rest of figma you know say you have a mock you’re trying to
0:11:56 build a sort of interactive visualizer for a solar system this is a traditional you know figma layer
0:12:02 just from figma design i’m gonna literally hit copy paste on this thing and go over here and say
0:12:08 make this interactive and what you’ll notice here is like there’s a little fig mic on here like this
0:12:14 is not actually just a screenshot this is all of the rich structured data that comes over with
0:12:19 this it’s every layer name it’s every token every variable every property and we have done a ton of
0:12:27 work on quality to be the best place at generating high fidelity results from designs as a starting point
0:12:32 and we’ve seen a really high percentage of our users start with designs as well and we’ve optimized for
0:12:37 that you know even in the blank prompt box we say at the top like put your design in here and so i’d say one
0:12:43 of the things you know we’ve really focused on is taking the workflows designers already have in
0:12:48 figma and letting you go much further to express things at a higher fidelity through code through
0:12:52 interactivity in a way that’s much lower effort than people have had before
0:13:01 okay let’s be honest your ai prompts aren’t giving you the results you deserve but with a little coaching
0:13:08 you can transform from basic prompts to engineering conversations that get you exactly what you want
0:13:14 from chat gpt that’s what this playbook delivers not just random prompts but a step-by-step system with the
0:13:20 exact techniques top ai professionals use every day you’ll have your own personalized prompt engineering
0:13:27 system that delivers consistent results get it right now scan the qr code or click the link in the
0:13:32 description below now let’s get back to the show when i think about figma you know when it was first
0:13:37 suggested i use it i used to use photoshop back the day i still use it a little bit but you know using
0:13:42 photoshop to create to design a website is a pain like just dealing with all different layers there’s a
0:13:45 lot more manual work to do small little changes and then you get into figma it’s like oh everything’s
0:13:50 easy to move around and and then not only that but then like you know you guys started giving all the
0:13:55 like code or you give like css rules and all that kind of stuff you can use and so obviously this is
0:13:59 like a natural evolution like well okay now just give you the rules because if you don’t know how to code
0:14:04 that’s hard to like know what to do with but now literally just create the code for the designer totally
0:14:09 yeah and so here this example finished cranking so this was going to bring in a you know a mock
0:14:15 that had different itemized planets or the solar system and you can see based on literally make
0:14:20 this interactive as the prompt and the underlying structure of the design that we brought in
0:14:25 it inferred that you know each of these different planets is its own entity moving at different
0:14:32 speeds they move around the circles it created you know this functional speed scrubber that works
0:14:36 if i click on one of these planets there’s an overlay that comes out did it know that because
0:14:40 of the layer names or did it actually look at a picture or like how did it know that
0:14:45 how did infer that yeah that’s right so you know if i go back to the original design here like i
0:14:49 can you know drill down a bit and you can see you know each of these different planets
0:14:55 has been sort of like itemized with the planet name so like you know uranus orbit along with the arc
0:15:01 that it takes and so like we found this kind of context is like incredibly helpful for the model
0:15:06 and so like you take a random screenshot and give it to any of those these tools like we’ll do okay
0:15:10 especially if you write a longer prompt but to the point of like where is figma different is like
0:15:17 figma is already the workflow design teams product teams are using to articulate design intent to detail
0:15:23 out specific workflows and that data is super super valuable to models and they can pick up so much
0:15:29 context from that to make the output really really good with less effort makes sense it feels like
0:15:34 you guys have done a good job when i was thinking about what figma doing ai i was like well right now
0:15:38 at least from like twitter discourse i know twitter is kind of a bubble but you know it feels like the
0:15:44 design community is very passionate about things and in terms of ai right now uh you know there’s
0:15:49 definitely been some cohort of like the design community that’s the kind of anti-ai or at least that’s
0:15:52 what i’ve been seeing on twitter and it feels like you guys are kind of doing a great job of
0:15:58 making it clear like hey this is not replacing you i mean like if i was a full-time designer this is
0:16:04 amazing because like for me whether you’re designing or coding you know it is the art of creating things
0:16:08 right you’re creating things out of nothing and now the idea that you could be a designer and not know how
0:16:13 to code and you created something out of your brain and turned into a real design and then now you turn
0:16:18 into a real product that’s just like that’s amazing i don’t think like most people realize
0:16:23 like how magical that is hundred percent yeah it’s been totally inspiring and i think we’ve been blown
0:16:29 away by just how much people can make with this and so maybe just to finish the demo section with a couple
0:16:34 of fun examples from real customers you know this is one of a map and like you know this looks a lot
0:16:40 like a mock and i think traditionally a designer might end here but like you can actually use this map
0:16:46 and like you know that’s like one prompt to add that level of interactivity and like you know
0:16:51 imagine the feedback you’re going to get in a user study around you know exactly how this works to
0:16:58 find coffee shops yeah based on this another fun one this was for a conference collecting all the
0:17:03 different iconography and the logos for a team that was planning the conference and so it became a little
0:17:09 bit of like their micro site for the design system of the conference that they all put together and published
0:17:15 and sort of added all this wraparound with figma make that is so we’ve seen internal tools start to really take off as well
0:17:21 and so this was a really fun one of like a color palette generator that someone on a design team built
0:17:29 to make it much easier to get the right sort of compliant colors with the exact mixes and different scenarios
0:17:33 and like this is the kind of thing that you know is so much more powerful as an app
0:17:37 you can explore and send around relatives like a static thing and you never would have gotten a you
0:17:42 know internal tools team to fund right but now someone can actually like go ahead and post their
0:17:45 team because they don’t have to wait right they just cut the idea and they design it and then
0:17:51 and then it makes it totally and the last one like i’ve just been blown away by stuff we didn’t optimize
0:17:57 for you know based on how good these underlying models are and so like people have built full-on
0:18:02 three video games in this which is like kind of insane here’s one that someone built which is i
0:18:06 haven’t actually even finished this game there’s like a whole different world a bunch of different
0:18:11 spells there’s like creatures that are kind of come out and start going after me i’m like wow this is
0:18:16 insane they’re like you know literally just through prompting you’re able to get to this level of
0:18:20 expression you should make a like a old school rpg with this this or my i used to play every quest
0:18:24 that’s actually how my career got started yeah yeah it reminds me of playing every quest and like
0:18:27 kiting mobs and like you got to do a spell and you got to run a little bit then they’re still
0:18:32 coming at you yeah someone actually recreated um doom oh cool which was pretty well very cool
0:18:41 my first million hosted by sam parr and sean furry is brought to you by the hubspot podcast network
0:18:46 the audio destination for business professionals my first million features famous guests like
0:18:51 alex romozi sophia amoroso and hassan minhaj sharing their secrets for how they made their
0:18:56 first million and how to apply their learnings to capitalize on today’s business trends and
0:19:03 opportunities they recently had a fascinating episode about how you can scale a profitable agency
0:19:09 with zero employees using ai agents listen to my first million wherever you get your podcasts
0:19:17 so i’m curious like who is the user of figma make is it going to be primarily designers are you guys
0:19:21 trying to reach out to people beyond designers as well because i i definitely see how this becomes a
0:19:27 superpower for designers i am curious you know how other people outside of design would use this or how
0:19:30 they get value out of it if they’re not a designer or if you guys don’t care about that you’re just
0:19:36 serving designers only you know and if other people use it that’s great you know yeah yeah great
0:19:41 question yeah we optimize for designers to start and so we’ve done a lot to you know as i mentioned bring over
0:19:46 that context from figma design but also make this a great place for whole product design engineering
0:19:51 teams to work together and so the fact that code is there and you can change that the fact that you
0:19:55 have a pointer and can directly you know change different aspects of the experience like all of
0:20:02 these have been designed so that your designer your pm your engineer can use this as a collaborative
0:20:07 multiplayer surface to iterate on what the product experience should feel like together which is what
0:20:12 figma has been great at historically as well and so you know that’s definitely they’ve been the core
0:20:16 right now i’d say you know we’ve started with prototyping as a hero scenario and we’ve been
0:20:23 surprised how blurry the line is between what is a prototype and what is production right and it means you can
0:20:28 publish and start sharing with users and getting feedback and start using code libraries to hook it up to
0:20:36 a real back end to storing data like you know we’ve seen people pitch vcs and get funding on things that
0:20:42 they built in figma make without you know anyone else involved with real users using it yeah wow um
0:20:49 and so i think we’ve been just totally blown away at the breadth of cases people are already using it for
0:20:56 yeah and maybe to share one more example we did a ton of dog fooding on this before it went live it was really
0:21:01 helpful in iterating on quality we all generally have a dog fooding oriented culture at figma but
0:21:07 this was over the top that we called it the great figma bake-off and we had like 20 different meetings
0:21:11 scheduled for the whole company in every time zone where people from the team would be there
0:21:16 to answer questions or troubleshoot or help you work with bugs we had a competition like what were the
0:21:22 coolest things people made and all sorts of people made inspiring things and i think one of the coolest ones
0:21:28 for me was someone on the hr team who had zero design background zero technical background they
0:21:36 use workday as our source of truth for people data they found a workday api and they built a game that
0:21:41 uses the real people data of the company that shows four faces and four names and you had to guess who is
0:21:46 who yeah and it like became viral within the company of people like playing this game and trying to you
0:21:51 know get to know their colleagues and i was like wow this is something that like no one would have
0:21:58 funded as like an internal what the hell are you talking about that’s my pitch that right yeah let’s
0:22:03 go spend resources on this and it’s like you know it’s a persona we didn’t optimize for like we didn’t
0:22:09 build figma make for hr people right um but it’s just been totally inspiring to see you know how accessible
0:22:14 it has made the process for everyone it’s awesome my friend who used to run a design agency in san
0:22:19 francisco just imagining you know for him like you know when you’re pitching new clients if he could
0:22:25 have just like design things and then just had a prototype there that’s just nuts right compared to
0:22:30 like oh here’s a design like here’s a prototype that works you know yeah that’s just totally yeah i
0:22:35 still want to go back to what i said previously about uh like if you guys had any backlash on this from
0:22:39 designers because i assume you guys got some i think i saw some online a little bit when it first
0:22:44 got announced but i assume you know if i was a designer even if i didn’t like ai maybe at first
0:22:50 i’d be like oh this sucks it’s ai and then i start using it my day-to-day work and it’s like oh it’s
0:22:55 making my life so much better so like how can you keep hating it is that kind of how it went yeah you
0:23:00 you know i’d say just to zoom out from the story of make to the story of figma ai you know we shipped
0:23:07 stuff last year at config 2024 we shipped a feature called make designs which was our very first attempt
0:23:13 at a prompt to design products inside of figma design and so you could say you know make me a landing
0:23:17 page for xyz and you would create it not as a code backed prototype but as native figma frames
0:23:23 and we messed up in a bunch of ways on that like we messed up explaining how it worked and so there’s
0:23:28 confusion on that like it used off-the-shelf models and templates that are customized and it
0:23:33 was funny we had to call the project internally first draft and the whole point of it was to like
0:23:38 solve the blank canvas problem get you started make it so that like you know we’re doing your
0:23:42 laundry and your chores and you’re doing the creative part as a product design team
0:23:48 and i think make designs even in the name implied much more than that as like we’re going to do the
0:23:53 whole thing for you which is not yeah designer you don’t need to do any design just we’ll do it for you
0:23:59 totally and like you know we we are a design company we are for designers and so i think it was
0:24:03 definitely a big learning and like how we talk about these things and what they’re for and i
0:24:10 i think with make i think what we did right was we started with things that designers have trouble
0:24:17 with and they can’t do which is getting into the code layer and so we sort of start at the end
0:24:22 of the process where a lot of people do get sucked today with the current set of tools and so i think
0:24:27 it felt like something that new as opposed to automating parts of the process that i have a lot of
0:24:34 opinions expertise taste around which was not our original intention but you know easy to come across
0:24:39 wrong and so i think that was definitely a big learning you know for us in general um as a company
0:24:45 that prides itself on being advocates for design as a function and champions of designers is like making
0:24:50 it really really clear that this is kind of trying to give you new superpowers i am curious like
0:24:56 where does figma and figma make where does this go like in three to five years how does this work
0:25:01 like if you’re a designer um yeah i can’t make forward looking statements okay why
0:25:08 i have two kids i have a six-year-old and a three-year-old and my six-year-old over the last
0:25:13 year has started playing ipad games he’s like addicted to duolingo he’s like a daily active user
0:25:18 learning math and chess and that kind of stuff and he started using make before we launched
0:25:25 and i was like curious to see as a very much not our target persona right like how understandable would
0:25:30 it be and he’s like hooked like he won you know begged me to like spend more time on make and
0:25:35 you know walking home from school or you know at the grocery store running errands he’ll be like
0:25:39 i had an idea for a new one daddy oh that’s so cool like you know he’s made like six games now
0:25:44 and he’ll sometimes come home from school with like a sketch of like a map or a level and he’s
0:25:49 like take a picture of this like we should use this as a starting point oh man and honestly it is like
0:25:56 mind-blowing and i’m so jealous like right yeah imagine being a kid like you have any idea and like
0:26:00 yeah i can actually make this now the ai will help me make it i have an 11 year old son you know
0:26:05 he grew up in san francisco around a bunch of like tech and game industry like executives and
0:26:09 people like that but he was little and so he got to see all this kind of creative world there right
0:26:12 like artists like that we used to have like artist parties where we’d draw on the walls and he’d be
0:26:17 there with artists drawing on the wall but now we live in japan you know japan’s great but he’s no
0:26:21 longer in that kind of environment i have been showing him things like uh reflet i showed him
0:26:25 reflet he loved that like he made like a little website with that but uh the websites were really
0:26:29 ugly so i was like okay you know and he didn’t really like how ugly it was which i think reflet and
0:26:32 those guys have gotten a little bit better but i think something like figma maker where he could
0:26:36 actually like go in and tweak the design itself too would be awesome for him to be able to see
0:26:42 the whole process of like making it look good and and then actually shipping it would be incredible
0:26:48 yeah i love his feedback okay i’ll get them to your question i’m like you know what’s the future look
0:26:56 like you know five years from now i think it’s like making the path from idea to production idea to
0:27:04 reality so much shorter and like you know seeing even game toy examples with my son makes me realize
0:27:09 like the way people think about the workflow the way you think about what’s possible the way you explore
0:27:16 your ideas is going to be totally different and i think in this new world design is even more important
0:27:23 than it has been and design isn’t just pixels it’s empathy for users it’s understanding of your target
0:27:29 audience it’s you know knowledge of current workflows and where they fall short it’s exploring the whole
0:27:34 solution space and thinking deeply about each of the nodes that you might not have had time to you know in
0:27:38 the old world yeah it’s sending down every animation and interaction of the experience
0:27:44 and so one of the things i’m really excited about in that future is like software is going to get
0:27:51 freaking awesome like everything is going to get so much more thought through so much more explored
0:27:55 every fit and finish is going to be better and by the way there’s going to be a lot of low quality
0:27:59 software too yeah totally like there’s just going to be more software than has ever been made it’s
0:28:03 like in the early days the web that’s what i’ve said in the podcast before you know i grew up on irc like
0:28:07 the web used to be like fun you know yeah it was messy it was you know it’s total mess but it was
0:28:12 easy to get in there just like tinker and make websites and now you don’t really see that anymore
0:28:16 so i’m hoping that stuff like figma make brings that back we’re like yeah the web becomes fun again
0:28:21 because people can just have ideas and just easily make stuff totally yeah i think we’ll see like you
0:28:25 know even more long-tail personalized experiences for different schools and communities and like people
0:28:30 building stuff for themselves yeah and the stuff that’s built for everyone being like even more
0:28:36 sophisticated and you know helpful in in a wider range of scenarios i think you’ll probably see some
0:28:40 really interesting experiments around collaborative creation of things too i think you’ll see like
0:28:44 communities like actually creating new kinds of projects and stuff together will be fun totally
0:28:51 cool so uh you know this is a total theoretical scenario so imagine you got a time machine and you’re in
0:28:56 new york time machine you get out it’s 2050 what’s different is anything different does it look the
0:29:01 same it’s still the same bagels and pizza is there other stuff going on in new york or what’s going on
0:29:09 i mean new york bagels and pizza are not going anywhere okay hopefully honestly 2050 is so far right
0:29:15 like 10 years let alone that far it’s like man i you know i have aspirations there’s whole conferences on
0:29:19 this stuff and it’s like you know very hard to predict everything right this is something i like
0:29:23 to riff on and like i’ll hear what people say it’s a great prompt i mean stuff i’m like personally
0:29:29 excited about waymo’s coming to new york figuring out how my kids get to play dates and stuff is hard
0:29:34 i’m excited for ai to get to a level of trust and safety and roll out to like the point where
0:29:41 getting around in the world is like a solved problem and like that seems like it’s happening which is super
0:29:47 exciting like waymo is fantastic health is really hard i personally have celiac disease and was
0:29:51 diagnosed about two years ago and it’s been a whole learning journey about you know what can i eat and
0:29:58 what are my sensitivities and so forth and lots of blood tests and follow-ups and you know even for me
0:30:05 chat gbt has been like so helpful in understanding what the terminology means and all that and i think
0:30:11 in broader access to that level of expertise with verifiable trust and awareness is going to be
0:30:16 huge for society and just like people understanding what’s happening in their lives and things that are
0:30:23 really core yeah from health to finance to dealing with the insurance because their house burned down
0:30:29 to all of those kind of core fundamental things that are like anxiety provoking complicated and scary
0:30:34 and it’s hard to get experts who actually understand the whole system and so i think that’s going to be
0:30:40 like incredibly meaningful in ways that are like hard to really internalize still right and then there’s
0:30:45 like the really out there stuff of like are we all going to have neural links or glasses on our faces that
0:30:49 like understand the world around us and are chatting with us are we going to have moon colonies by then
0:30:53 is everyone going to be living longer like i hope all those things are true and like you know
0:31:00 i’m an optimist and a tech futurist but you get into like singularity theory type questions yeah once
0:31:04 you approach the singularity all bets are off who knows what the hell happens right yeah the health
0:31:08 thing that’s something i think about a lot because like you know if you think about a doctor they go to
0:31:11 school for eight years or whatever it is a lot of it’s about reading a lot of books and trying to
0:31:15 retain as much of that knowledge as possible and maybe if you’re lucky they retain like five percent
0:31:19 of the knowledge or something and then over time they get more expertise by dealing you know with
0:31:25 patients but obviously ai could take in all that knowledge and over time actually understand all
0:31:30 that we’ve learned and start expanding upon that and then combine that with also collecting more data
0:31:34 on us individually you know even like down the lowest level possible it seems like ai will be able to
0:31:38 understand us in the future like eventually we will have ai that like okay nathan what’s going on with
0:31:43 your body right now like you know there’s like could be things totally unexpected like oh some cancer
0:31:48 started for this reason and you know and then we can kind of solve it this way that sounds like
0:31:52 sci-fi for people but i really strongly believe that’s coming it may take like 20 or 30 years
0:31:57 hopefully it’s more like 10 but that’s gonna be such a game changer for people yeah i’d say also you
0:32:03 know just on the you know the role of ai in these in the workforce as well you know i think we’ll see
0:32:07 as it continues to evolve and capabilities come out i think in every sort of industrial breakthrough
0:32:12 and revolution there’s been concerns about what it means and ultimately people have learned new skills
0:32:16 and been even more productive on things that are even more meaningful and so i’m personally really
0:32:21 optimistic and excited and i think seeing people like my son start to use you know figma make and
0:32:28 tools like it in totally new ways makes me feel like you know there’s just new frontiers to work on and
0:32:33 like what work means will change yeah as a designer i think you know when we have robots building things
0:32:37 i mean like what being a designer is going to be it’s going to change maybe like almost like an architect
0:32:42 you’re like literally like designing new buildings you know on the moon or mars or wherever we go
0:32:46 go and you know a designer will be able to actually like come up with things maybe ai assist it maybe
0:32:51 they do it themselves whatever make probably a combination and then the things become real
0:32:56 things and digital things it’s going to be such a crazy time to be alive totally yeah i can’t wait for
0:33:01 that cool man is there anything else you wanted to talk about before we got off here or um honestly i was
0:33:06 kind of curious like your head takes too and like you know you’ve tried a lot of these tools you know what’s
0:33:11 your sense of where the market’s going you know how you see figma fitting into it so i’ve only played
0:33:16 with figma make a little bit quite honestly i played with it yesterday i like to have people on and like
0:33:20 try to have like a real response to what they’re showing me as possible versus like yeah i’ve actually
0:33:23 tried all of this i know everything you’re doing and now i’m faking and pretending like i don’t know
0:33:27 what’s going on or like i’m learning something new but i play with it a little bit exactly what i was
0:33:31 hoping it was especially the fact that you can just like like import the design in and have like
0:33:36 start from the design because i feel like the market like you know what lovable is doing it’s
0:33:41 great i do feel like it’s saturated there’s gonna be there’s a lot of players in that space so i think
0:33:46 you know i’ve also had on matan the founder of factory who’s competitive with devon and like devon
0:33:50 and factory i think that’s interesting that’s like a different side where it’s it’s all agents and it’s
0:33:55 more hardcore on like the enterprise and coding and so like it makes sense that you’re not competing
0:34:01 directly with level or v zero you’re doing something more for designers and so i think
0:34:04 you guys are on the right path and you know it definitely seems like way better than what you
0:34:09 guys announced in 2024 quite honestly i remember seeing that like oh this is you know it’s not i
0:34:13 don’t know it’s it’s kind of confusing and i can see why designers didn’t like it figma make seems
0:34:17 like the right path like this is something that gives designers superpowers i you know i haven’t
0:34:21 played around with the product enough to give you like honest feedback about oh it’s amazing and
0:34:25 all it all works and but at least conceptually and from what i’ve seen from the early version of it
0:34:30 it looks great cool well yeah i appreciate any candid feedback at any point yeah i’ll try to play with it
0:34:35 more you know as i said we’re just getting started you know in general and ai in this market and i think
0:34:40 at figma ai as well and we have a lot of really exciting stuff coming we’re very focused on this so
0:34:45 you know any and all feedback from you your listeners really excited for and uh yeah stay tuned for
0:34:49 some fun stuff ahead awesome it’s been great having you on here is there anywhere uh like people can
0:34:55 find you online are you active on on twitter on linkedin or anywhere like that yeah i’m on twitter
0:35:01 and linkedin uh david kossnick k-o-s-s-m-i-c-k cool and yeah thank you for having me on this was super
0:35:13 fun really appreciate it thanks
Want better results from AI tools? Get the Advanced Prompt Engineering guide: https://clickhubspot.com/mgv
Episode 71: What if you could turn your Figma designs into fully functioning apps—just by asking? Host Nathan Lands (https://x.com/NathanLands) is joined by David Kossnick (https://x.com/DKossnick), a key leader at Figma working on the cutting edge of AI-powered design tools.
David is part of the team behind Figma Make, Figma’s groundbreaking new tool that takes your sketches, mockups, or even simple prompts and instantly transforms them into interactive, code-backed applications. In this episode, David demonstrates how Figma Make builds real apps—like dashboards, games, and data-powered prototypes—right before your eyes. The discussion goes deep into Figma’s AI journey: from their first AI-powered features to the vision for democratizing software creation in a truly collaborative, multiplayer environment. Whether you’re a designer, entrepreneur, or just someone with big ideas, this episode is a glimpse into the AI-native future of how products will be built.
Check out The Next Wave YouTube Channel if you want to see Matt and Nathan on screen: https://lnk.to/thenextwavepd
—
Show Notes:
-
(00:00) Multiplayer Code-Generating Dashboard Tool
-
(04:29) Collaborative Project Creation with Supabase
-
(09:29) Prompt Management Overview
-
(10:46) Emerging Interactive Design Space
-
(14:57) Designing with AI: Complement, Not Replace
-
(18:24) Figma: A Collaborative Design Hub
-
(22:42) Empowering Designers with New Superpowers
-
(25:35) Future of Design and Innovation
-
(28:37) AI’s Impact on Future Society
-
(29:48) AI’s Future in Healthcare
-
(33:19) Figma AI’s Exciting Future
—
Mentions:
-
David Kossnick: https://www.linkedin.com/in/davidkossnick
-
Figma: https://www.figma.com/
-
Figma Make: https://www.figma.com/make/
-
Supabase: https://supabase.com/
-
Claude: https://claude.ai/
-
Waymo: https://waymo.com/
-
Duolingo: https://www.duolingo.com/
Get the guide to build your own Custom GPT: https://clickhubspot.com/tnw
—
Check Out Matt’s Stuff:
• Future Tools – https://futuretools.beehiiv.com/
• Blog – https://www.mattwolfe.com/
• YouTube- https://www.youtube.com/@mreflow
—
Check Out Nathan’s Stuff:
-
Newsletter: https://news.lore.com/
-
Blog – https://lore.com/
The Next Wave is a HubSpot Original Podcast // Brought to you by Hubspot Media // Production by Darren Clarke // Editing by Ezra Bakker Trupiano
Leave a Reply