Turning Figma designs into full stack applications

Amie [0:10 - 1:20]: Welcome everyone. Welcome, welcome. Thanks for joining on your afternoon or evening or maybe very early morning. I'm not sure have done the math on the user time zone. Welcome. Gonna make sure I'm getting everyone in here. Seeing a lot of familiar faces from our workshop earlier this week. For those that don't know me, I'm Amy and I've been helping Ben with hosting expert workshops and office hours. Today we have Steve with us who is the CEO and co founder of Builder I.O. and we are going to dive into turning Figma Designs into full stack applications. I don't know how many of you like we're in the no code world but I do remember very recently that being like a dream to turn Figma Designs into a website. So I'm very excited to learn today more about Builder and see a demo. Steve, do you want to introduce yourself and maybe give us a little origin story behind Builder?

Steve [1:21 - 3:43]: Totally, yeah, I'm happy to. So hey everybody, it's great to chat with you today. So as Amy said, co founder, CEO of Builder, let me give you the background. So in my last job I was running web engineering for a company called Shopstyle. They're a big E commerce business or they were at the time like half a billion in gmv. So like sales, they were driving products they were selling and I LED web engineering and I was kind of on the side of like realizing as the first like full scale e commerce business I'd ever worked at. And I kind of learned the hard way that like E commerce is not like a technology industry, it's a marketing industry. So the way you drive more business for E commerce is you market more. And so I learned that an engineering team for a site like that is really a ideally a like a high output system for marketing. So new landing page, new AB test, new SEO pages, like just more, more, more, more, more. Personalization was a big piece as well. And it became this kind of challenge in the business because we had this totally bespoke tech stack headless. We were doing that before anyone else. We were doing that like 2014 and team was always frustrated. They had all this stuff they needed engineering to do, but it would take weeks for even the smallest thing between backlogs and development and QA and deployments and all of that. And the engineering team didn't love like pushing pixels, like we're changing the button color this week and they're like, oh, but we changed it last week, like why are we changing it back? It's like, well it's a B testing works like, yeah, whatever. And so eventually the marketing team, out of frustration grabbed webflow, which a lot of people probably know drag and drop site builder. And they a page. They've been asking for my team for weeks. They just built themselves a couple days like easy peasy. And they came to me and they're like, hey, we made this page, you don't have to make it. You know, we know your team's busy now. Can you just kind of like put it in the Shopstyle site? And I unfortunately had to explain, you can't just like embed one website in another. Like webflow site doesn't just plug into our Shopstyle site. We're using Angular and a whole bunch of other technologies and they're like, okay, well can you put all of our custom stuff into webflow? I was like, no, it doesn't really work that way either. But it kind of solidified this point that like if they had like a self servable tool where they could just build stuff and a way to sort of like inject it into our application and deploy it, that would solve a lot. Engineering could do more fun, challenging engineering stuff, probably high value work because they get paid a lot of money to you know, do, hopefully do more than just change colors on the website and the marketing could like rock and roll, run their test, et cetera. And so I quit my job and started working on Builder to say like, you know, originally it was like could you make a headless webflow?

Amie [3:43 - 3:44]: You know?

Steve [3:44 - 6:58]: You know, and when you're dealing with sort of like headless AKA it'll just plug into whatever side stack you have, you're looking a little bit more for like businesses of like all sizes. So they're going to have a bunch of more enterprise needs. They're going to want to have like tons of people on the platform all with like, you know, live editing, like multiplayer, they're going to want advanced personalization and a B testing and everything has to connect to their systems. You know, they're using Salesforce Commerce cloud product catalog and they have all these react components they need to reuse and a strict design system you have to adhere to. And that was sort of like the genesis and kind of how we came to be. Now the interesting part though, as of more recently is way back in the day, Builder was designed to like work a lot like a thin layer over code. So you actually could, if you were sufficiently advanced, go in and in a no code fashion build all kinds of super custom bespoke stuff. But we found that when a lot of the end users were like marketing teams. Marketers are much more used to like plug and play products. Like you don't have to like learn deeply some advanced, you know, GUI for advanced visual, dynamic content type stuff. And so we invested a lot in making everything in Builder 1 to 1 with code, meaning you can take anything in builder and convert it to code and back. And we thought that'd be useful to sync with like coding tools. Developer could open up anything as code and do all kinds of advanced find, replace and whatever tricks they want to do. But it turned out, you know, developers kind of prefer their workflow as is. They don't want to be in like a text box, you know, online dealing with that. And so we kind of shelved that for a while. It was very. It was cool tech than anything in Builder. Could be GUI edited or code edited, but it wasn't actually as useful as we first thought. And then large language models came out and things like anthropic Claude that was like phenomenal at just updating code. Any code, any react code. And that's kind of what our code is. It's just react code essentially too. And so you'll see some demos, but it's kind of created this wild kind of set of use cases where I think a lot of people's dreams are, you've got tools like Bolts and Lovable, which are fantastic, but you probably have two needs you might be missing out on. Need number one is you might need to connect to an actual existing website or app. Not everything is net new. If you work at a company that has, you know, we've got customers like you can go to our website. We have customers like J. Crew and Fabletics and stuff like that. Like they can't just make new j crew.com unlovable. Like it has to be the J. Crew.com there's not an option here. And so, you know, if you could have something like that that plugs in, great, that would solve a lot. But second, it can get really tedious to try and do everything via prompts. Like people want a visual editor, they want to be able to pick a color. And funny enough, Lovable launched a feature related that to. To relate to that today. But it's. It's still like a coding loop. So if you try it, you'll see it's not maybe quite what you thought it would be based on the marker. Sorry, my dog's going crazy back there. Please forgive me. Maybe we can edit that out or maybe you can't hear it at all because Zoom is pretty good noise canceling. But the dream would be like can I have a web an editor interface like a framer or webflow or Figma, whatever you're used to. Just I can drag and drop and edit colors and use my design system as I choose as well as prompt and build anything interactive with prompts. And we kind of got lucky because we kind of landed into being able to offer effectively that so sorry, I mean I don't know if this was supposed to be like a one sentence interpolate background. I made it like a five minute but I'll show this stuff but you'll see. I think it's pretty interesting.

Amie [6:59 - 7:27]: No, this is great and I'm kind of asking this from relatively and just now starting to get into coding more seriously than ever. But how much has the advantage been to your advantage that so many of these tech to app builders use React so heavily? Has that been like a huge like one up for you and how you do the whole headless browser thing? I don't know if that made sense.

Steve [7:27 - 9:19]: As a technical question, but totally no it does. So the one thing people are learning is so much of the Internet is built with React and the the LMS are trained with a bunch of code from the Internet, specifically GitHub that the Ellens are really good at speaking React. So we were a bit of some of the earlier adopters of React and similar technologies too. So we kind of built everything around that when we made things editable, was editable as React and like it was wildly convenient that that's what the large language models speak incredibly well. And that's actually where if you're interested in any meta commentary, both Lovable are both really, really great tools. So is Replit, et cetera. One interesting thing about Lovable which we also integrate with if you want to just turn a Figma design into a lovable app, that's actually an inte we have you can find it from the Lovable site and our Figma plugin. But they have these super interesting trade offs right now because Lovable is all React and tailwind. So they can make a really good experience for just that. And so I've been finding more and more people finding if they just compare both versus Lovable, a lot of people find better success easier with Lovable because they just make the system work really well with one stack bolt, a stack agnostic. So if you know you're like a developer and you want to scaffold or prototype a svelte app, you can only do that Bolts Lovable is not an option. And so I was thinking for a while, a lot of these people trying these tools are usually not a developer. That's why you want to build an app with AI. If you're dev, you could just use a cursor that runs right in your local code base. But I was starting to think like maybe Lovable has the right strategy. And then Bolt, I think like yesterday. This stuff's moving so fast, announces native apps because Bolt can do React native, which is different than the plain React mobile uses. You can do native apps and they have this really cool like live update in your phone. So you're like bill and prompting and then your phone like the app is right there. So this stuff is crazy and constantly evolving. But yeah, a lot of it's react based and the best tools usually are too because the AI speaks that so well.

Amie [9:19 - 9:33]: Yeah, I've been trying to work on all of these like, you know, getting started guides on Lovable and Bull. And it's just like impossible to keep up because like every other day there's like a new announcement and I have to like try and keep up with what everyone's doing.

Steve [9:33 - 9:33]: It's.

Amie [9:33 - 9:49]: They. I feel like they released like a year of features in like a week. So. But anyways, let's jump into all things builder. I would love to see it in action. Let me know if you can share your screen. If I need to.

Steve [9:50 - 9:57]: Yes. Prepare my screen, make sure I don't have imessage and stuff up. I've made that mistake before.

Amie [9:57 - 9:59]: Yeah, yeah, there we go.

Steve [9:59 - 10:02]: There we go. You see my screen in my beautiful figma design.

Amie [10:02 - 10:03]: Yeah.

Steve [10:03 - 10:34]: Cool. Okay, so why don't I do this? I'll jump into some demos, show some stuff and I'm thrilled to answer questions the whole time. I don't think people are dying to see a pure product pitch. And so the one benefit you get from me. Sorry, you might hear my dog again. So I'm also our technical co founder. So if you want to know how any of this works, how we are, you know, like why. Why are all these AI products evolving so quickly? There actually is a reason or anything like that. I'm more than happy to speak to it. I find this stuff fun.

Amie [10:34 - 10:41]: I live stream on it actually real. I. I would like your answer to that. Like why do you think everything is evolving so quickly?

Steve [10:41 - 14:06]: I can tell you. Here, let me open up. I'm going to do a whiteboard, I'll show you. It's really interesting if you think of it from like a product Strategy standpoint, like all these companies, people here might be building various sort of AI tools and products or wanting to use them in their companies. The company is building AI tools and products, or maybe not, or wondering if they should. What's interesting is with tools, like there's a couple categories here, but with tools like Bolt and Lovable, what you find is that the vast majority of the brains of the product is just anthropic Claude, like the best coding AI that's existed to date. And you'll see like benchmarks showing like, oh no, R1 beats Claude now or O3 mini beats Claude now. But the litmus test that you should probably already always ask yourself is what are the products using platforms like us, we're always trying evaluating the models and benchmarks are pretty easy to game. And we know the model makers are always trying to, you know, they want to win the benchmark because they get all the hype for obvious reasons. But the reality is, no matter what the benchmarks say, all the products are using Claude. Cursors use Cloud, Windows using Cloud, levels use cloud, Bolt use cloud. Nobody is changing that because it is definitively the best for these products and you can kind of trust that. And I will mention one other thing. Claude is the most expensive. So like, we would love to get off Claude if we could, but it's, it's. There's no chance. So when it comes to Bolt and Lovable, if you look at their products, a whole, they're like this tiny thin layer on top. And so when Bolt comes out with React Native support, they didn't like invent an AI that knows React Native, Cloud already knows it. They just kind of plugged React Native in. That is a pretty small lift compared to the rest. And there's people I've put out content on this before who kind of argue being this thin wrapper. This is my visual of a thin wrapper is a very problematic, not defensible, like no moat, challenging area to be in. I think I will say just having collaborated with like the Bolt and Lovable teams, you have to have like a heightened awareness of what everyone else is doing. It's kind of scary. Like, you know that like both those products were built pretty fast, like within months, which means somebody else might be building something too. So how do you always stay ahead? It's, it's tricky. I will say that I spent most of my career personally trying to figure out how to be, you know, in one of these really hot, evolving spaces with all this amazing action, all this innovation like that's the most fun place to be. You don't want to be on the sidelines building some other thing if you could be in the mix on and all the cool stuff. The reality is the cool stuff is also like a highly paranoia inducing like place to be because there's so much change all the time. And so yeah, what you'll see is like I mentioned, Bolt will add a very thin react native support. Claude supports it and like bam. Huge new feature. That's kind of, I think, where we're seeing a lot of this and that's where we'll kind of the big question I think will be will incumbents embrace AI deeply? That's like, you know, will webflow have a phenomenal AI? They don't right now. Will they? Maybe Figma's AI, this is whatever, you know, it could be better. And all these AI native products are easy to replicate. So can. Can Bolt and Lovable keep building all these little layers little bit at a time and like make it really, really good. And maybe Bolt Lovable will keep making their thing feel more like Figma. They're going to hit some challenges. It's not that easy, but they're smart and being incremental. Or will Figma finally have like a good AI, you know, or will webflow have a good AI? Time will tell. I'm a hypothesis on that, but hopefully that helps answer a little bit of what you're asking about.

Amie [14:07 - 14:09]: Yeah, it's great. Super interesting.

Steve [14:09 - 14:13]: Cool. Should I go to some demo stuff? I can explain some tech and use cases.

Amie [14:13 - 14:15]: Yeah, let's do it.

Steve [14:15 - 42:02]: Cool. Okay. So as a brief refresher, the whole point of Builder is we want to integrate with your existing tools, workflows and technologies. So our customers are usually businesses that already exist. They might be a massive enterprise. We have some Fortune 5 customer, trillion dollar company customers, but we also have people who just use Figma, you know, for their personal use cases. So I'll show you this. So here I'm just gonna select this Figma design and sometimes we'll give you warnings. Like we do recommend a little bit of design setup like using best practices like auto layout. But you don't always have to look at the warning. But if you don't need to listen to the warning, that's fine. This one I don't really need to. So I'm turn this dashboard design over into code right now. Great. And then I'll show you in a moment. There are a couple options here. So once we've kind of converted into code, I'll show you our CLI in a moment. That'll be pretty technical, but for those interest interested, it's a pretty cool flow. You can open in lovable too if you want a prompt to start building lovable, but I'll show you the flow in Builder. So Builder here we've got in Builder where Builder is unique is it is ground up a visual editing platform. So that means you not only can prompt, which I'll show you, but you can also go in and just like make your edits with drag and drop and keyboard shortcuts. And I'll show you more. Pick the colors. It's a full on sort of webflow framer style editor right here. One thing we know though is these editors can have a bit of a learning curve and that's where AI can really bridge the gap. And so let's do some fun stuff. I'm going to go in here and I'm going to say replace this with a table of our users. Typos don't really matter as you know LLMs can deal with that pretty well. And now I'm just clicking and I want to take this placeholder text, replace it with an actual working table from our users API and you'll see a few things. One is the system will automatically look at the contents of this design and it knows your design tokens, your components, all of that, and it'll use them. So this is going to design like we do and it's going to use all those things from Figma, like those design tokens, variables, et cetera. I could go in and continue to make visual edits, like maybe I'll fill the width here and get a little bit shrink up there. That looks better to me and I could go in and do more here. The first thing I want to point out though is this actually did connect to a custom API of mine. In fact we can expand. This is the code it's generating under the hood. And what's kind of unique about Builder is it's not a pure code system. It is a fully integrated like visual encoding system. I'll explain like what that means more here in a second. But anything you can do in code you can do right here. So it's going to use this API. How does it know I have this API? I literally just gave it the bare minimum instructions. I literally just said in a custom instruction, I have this API. Here's a couple examples I just pasted. But the output looks like. And there you go. It's aware of the API you can use the API any way I like. You can also link to API docs. It doesn't matter. It is freeform text. Make it aware of something and then it can start using it. But what's cool is we can actually make this a bit more functional. So maybe I'll click on these buttons and I'll say my favorite prompt, which is make these buttons work. And as you're aware, and I actually should have pointed this out too, this is using Claude as well. The big question I think in the overarching ecosystem is what CLAUDE implementation is most useful to what types of users. In the case of Builder, this is arguably your only option in a lot of cases for connecting with real businesses. This will connect to real design systems for figma, real APIs. And I'll show you in a moment. Moment. Like real code and code bases. But here. Cool. Now I can just click and I could sort the table by location or name, etc. We could continue to prompt it to add things like the pagination. So I can say like, make these buttons work. And I like how it gave us a nice little loading spitter and you can continue to edit all you want. If I'm like, ah, actually I hate this purple color, you know, I could go in and pick a different color entirely from my library. Oops. Let me let the AI keep working. You don't usually want to fight with the AI. I'll let it do that. But you get the idea. Make any visual edit you want in real time. And if you are like a badass no coder and you know how to like multi select and change margin and padding and stuff, stuff you do in a web floor framer. Go at it. You can do that too. And you can mostly do that in parallel to the AI working here as well. Cool. So now let's try our pagination buttons. It's beautiful. It can paginate. I could click the next and back arrows. If you want to go to like a full preview, we can zoom in here and do that as well and make sure our pagination buttons work. Wow. It's beautiful. It's lovely. Anything that you can do in those other. Because of actually because this is sort of cloud powered and it's kind of reading and writing code under the hood. The way to think about it is whatever you would do in a bolt or lovable, you would do right here. But I'll show you kind of two kind of unique differences here. Besides the fact that this all came from Figma and kind of pixel perfect Imported. The first one is any of this stuff we can just generate as code. And it's actually at the time you're generating, you can choose whatever tech you want. So you don't have to choose the tech in advance. You can change the tech on the fly, which is a bit unique. Has to do with how Builder uses a tech agnostic visual editing system. So I'll do React and Tailwind. That one's really popular. And then we have a couple different code output modes. That's an advanced setting, you don't usually have to know or care. And then cool, we can. Let's start generating. It'll generate out full code for all of this. It'll generate out unit tests if you want. So test to make sure that this code runs correctly all the time. You could customize this code completely. So a cool thing that I like to do is I really like to use a specific this use query library for. Forgive me, it's going to get technical pedantic for a minute. But whatever libraries you like to use, like React, Tanstack, query and stuff, it'll use that as you describe it. It'll generate multiple components and it'll reuse the components you have. So another problem with code generation in general is it usually is not aware of the code you already have and it won't reuse that. It's going to make all this new stuff. And if you're familiar with engineering or engineers, you don't want to just keep adding code for everything, just going to blow it up or you don't want to have. If you have sites and apps already, you don't want to keep adding net new ones. Every time you need some new functionality, you want to be working in what you have. This will reuse that. We can look at all of our beautiful components. You could chat to give it feedback. Here's how I prefer the code. But when you're all done and ready, you can grab this command and sync it to your code base and you're good to go. Now I'll show you in a moment. But what's unique about Builder here is there's technically two outputs and this is something that I think is pretty unique and interesting. So the other output we have is an API and let me describe this for a second and I'll show you what we mean. So I mentioned for a second that everything we're doing is like essentially like a visual, visual development sort of format. That means we have kind of this data format that does some fancy stuff. But what that means Is everything can be edited via a GUI, full on drag and drop, exactly as we'd expect any other system. Everything can be edited via AI. Again, that's Claude again, doing all the fancy stuff you're familiar with. If I didn't mention cursor uses Claude 2. Whatever tool you've heard of Windsurf, it's using cloud. They all use cloud, actually. Except try the Chinese IDE does not use Claude. Wait, no, it might, I forgot. I think you can use Claude, but it doesn't necessarily always get a copy. Doesn't always use Claude. But that, that one's not as good. If you ask people to compare them. It's not as good, but anyway. But the cool part is these are like the inputs. Figma is an input and then you can do all your visual developments. But the important part is, and I'll show you a demo of why this kind of matters here in like one second. But you can do these two different outputs. You saw code. Code is the easiest thing to start with because your engineers write code every day, hand them some code. Awesome. But you can also get this over an API, which means you can publish. So to recap, before we go to the API route, a common workflow we see people do is we'll see like a designer in builder. Take the FIG design, bring it in and start rapidly prototyping. So build off of that design, test the interactions and flows, maybe hook it up to data, maybe mock data. There's mock APIs, you could just tell the system to hook it up to mock API, it'll find one and it'll use it. This is how you can really refine and feel and get further in the prototyping journey. From my background in a lot of startups I'm a huge fan of. Like, you need to feel your own products, you can mock them up all day, but until you put it in your hands, you really don't know if it's going to feel right. And so if we can get to that step faster before we start coding the thing up, the final production version, we gain a lot once things are kind of working and prototyped and feeling right. And I mean like truly prototype. Figma has a prototyping mode where you can't even like type in a box or anything. So there's more you can do when it's actually real code you're working with. Then pass the developer and the developer could generate the code and sync it. And I'll show you how that CLI works in a moment. But let's talk about a totally different workflow right now that this opens up. So I want to show you a more marketing and commerce based workflow where we're going to show that API and kind of what that means. So in this case we're going to show. I'm going to hook this up into a live website. Let's go to StevenUdemo. That's what I want. Ignore the warnings. I happen to know this one works well in a lot of cases. It's better to kind of like export kind of smaller regions at a time. The quality is a bit better so you want, you won't see the warnings there. But I want to do the big one because I know this one happens to work pretty well. And so I'm going to suck in this new kind of homepage design. This is what my life was back at the company, shop style. Just the team was always building new homepage designs, AB tests, et cetera and we never had time to actually code them all. And so now we can suck this in and what you'll see is this time this is actually integrated within an existing website. So a couple of things to point out. You'll notice that we have an actual header and footer here. In fact, if I delete everything inside, we're actually editing on a live website. So this is the website's header, website's footer. This is a Next JS website. We don't care. The technology plugs into anything. That's what the API kind of does. And here's the stuff we just imported. A couple cool things is this is actually hooked up to our components. So we have this component which is like a building block in your code that can pull in different products from a catalog. So we can visually change to different collections or categories. It could connect to whatever system that you use. Even if it's totally bespoke, it's using our design system. These are our buttons. So if we make changes between the different button formats, these are just the props of the react components, change anything. And what we can do here, that's cool too is we can even just use the AI for like refinements. So something that you can't do in figma is you can't do like fancy, like CSS grid settings or you have like a three by three, then two by two, one by one, stuff like that. And you can do CSS grid in a lot of different like no code tools. But it's complicated. You're going to have to watch like an alpha power of webflow Academy tutorials to understand like how to use it. But what's cool is like with AI, we could just have it do it for us. So I can change this. That came from the import. Our AI by default will kind of assume how you want this stuff to be responsive. So looks pretty good by default. I mean it fits mobile pretty well. But I want to make some tweaks so I can go in here and say, actually let's make this a three by three on desktop, desktop, two by two on tablet, one by one on mobile. And it'll run through and it'll update the styling for me, the responsive, those nuanced responsive details, everything. Once it's edited, it's all visually editable in a webflow style interface, framer, figma, whatever. The AI is doing all those updates for us under the hood. And there we go. Let's check this out and see if this did what I wanted. So I'll go into preview mode here. There's our 3x3 down to our great. Our 2x2 and our 1x1 looks pretty good and I can go and continue to refine. In fact, I don't love that on mobile. It's overflowing here a little bit. So I can always just select all of these and then visually say let's make it a little smaller and just seamlessly kind of bounce between the two. You can go into the style settings and get as deep as you want. You can also split this up by roles and permissions too. Some people have only AI permissions, some people have only permissions to edit, copy or localize or whatever. Some people have styling, AI interactivity, etc. Type permissions. Now let's go further because one thing that marketing teams usually love is the idea of AI for personal personalization. So when we first built Builder, we're like, hey, enterprise teams really want to personalize. And a B test and we built those features, you can click a button and personalize anything. And then what we started learning is all the teams who wanted that came to us and they're like, so what should we do? What should we test? What should we personalize? And we're like, I don't know, I don't know. If you're business, what should you do? And so we realized that's something that actually AI can help with. And I don't mean that as like an AI hype boy. I mean there's like a specific workflow I think works pretty well for this. So I'll show you. So let's say we want to. Let's start by. First, we have a specific use case in mind. So we know that we have like a VIP user's audience. And so I'm going to go in here and I can just select this section and say I want to personalize this section for the audience. So I'll click the personalize button. This will connect to any systems you use. Customer, data platform, et cetera. I have it switched up to segments if you use that as a cdp. So I'm going to choose customer type and I'm going to say our VIP customers. And then now I can make any change I want for the VIP customer. So I can go in and manually change. And that's. That's great. But let's have a lot more fun. Let's do it with AI. So here I'm going to say duplicate this section with a flipped layout and showcase our latest products and highlight a 20 discount for VIP shoppers. So I got pretty specific there and I'll show you a couple things we do that's interesting here. Again, really specifically in this case, for that, like I work in an existing company, we got APIs, we got product catalogs, we have specific requirements and the AI can just integrate with that and work with that for us. So let's see. AI did not do what I wanted. Hold on. I may have broke my little local branch here. And maybe. Let's try again. Let's go back. Did it edit the default layout? No. Okay, hold on. Let's go back. Let's make a new chat. Maybe I'll revert back a few steps to see if. Okay, let's just try it again real quick. I could fast forward maybe two more steps. Okay, I dig it. Let's try this one again. Duplicate this flipped layout. Copy pasta. But what's cool is you can see one. The AI will continue to like reuse your styling and components. So like this button component is like a. Okay, my demo is not going to cooperate with me today. We are always updating things and I'm always breaking stuff. My local branch. But what's cool. Maybe I'll tell it not to flip the thing and I'll tell it. Let's do this. I have one more idea on how we can get a cool example of this demo. Bam. So what's cool is reuse the styles. Reuse of components, but also the awareness. So you can actually see it's telling me it's going to use our Cheeky Collection. Cheeky Collection is the latest collection that we have have and it can do the UI and styling updates and it can pull information. It can be clever. So what's nice about this is if you know that you have certain audiences that matter. In this case we have like VIP shoppers or whatever it is. And if you also know that you have things like product catalogs that you want to be in sync with, you can just start telling the AI like, hey, I want to make of my five different super important customer cohorts ports. We could just automatically make those different versions. That way a human isn't doing it. You're able to let the AI do it. Okay. My dad was fighting me. I usually give up much sooner, but I'm like extremely determined to make this work. How about this one last try? If no good, then then we'll move on, I promise. But the sort of vision here is a couple steps. Step one is like we don't want to have to worry about personalizing this for every audience. AI will do it. That also deals with like localization too. I don't have to translate this into every locale and address all that nuance. We're just gonna let the AI do that. But then step two, I think that's kind of cool that's coming in the future is the ability to do this stuff more automatically. So maybe when we do our homepage, the AI will run in the background and it'll start making a couple A B tests, or it may start making a couple personalized variations for you. It'll start showing those to users and it'll look at whatever metrics matter to you, probably conversion events like signups, you know, email submission, purchases of products, et cetera. And then you can let the system keep iterating until it finds higher converting variants. And it can scale those up to 100% automatically. So this is sort of the manual version. And I think we can get to a world where we're kind of a self optimizing version. Especially as you start feeding in more and more of the unique bits about your business, your various audiences, et cetera. So last thing I want to show is the coolest part is when you're ready, you can trigger a review. This is optional, but a lot of people like to have custom workflows. So review just means kind of like a pull request. Somebody wants to give this a review and approve or comment, etc. They can. And then when you're ready, just publish it to your live site. So that's kind of the unique part is we can skip the cogen entirely. You can plug this right into. In fact that's how I'll show you. I'll show you a couple cool examples. Let's go like Fabletics and Zapier and who else am I able to show? Hold on. We have different agreements with different people and so I'm only allowed to show certain websites. Unfortunately our biggest, most awesome customers are like no, our brand's important. You're not allowed to blah blah blah. I'll go to one more go like fair. And so what's cool is these actual like live websites, this is how they work. They can use AI and visual editing and literally just pump out new versions A B test precise variations, new homepage anytime. It's no longer go through the engineering team or like update text fields and headless cms. The builder regions exist across the whole site. I'll go to one more. Actually I know Alo Yoga. We've been working with Alo Yoga for a while and I knew they were kind of a big deal back back then but they just continue to blow up and so they've been great to work with. But what's cool is people embed builder like throughout other pages. So let's go into. I have this cool little chrome extension that will kind of show me various places that people are using builder. Let's go to the Alohats. And then what's cool is people use it for just like regions of pages. So they might have an area powered by builder like down oops. Kind of like around the product. So they might have. You might also like personalized based off the specific product or specific category style inspiration. We can go to. Let's go to some more. One of their more popular. Let's go to bestsellers. That's a good idea. And this is a Shopify website by the way. We integrate with Shopify as well. Kind of doesn't matter. It's a pretty good hoodie. I should probably buy this one. And then here we go. Here's where we see a little bit more of that editorial as well. You can just feed in drag and drop change kind of regions of the site and you could still have Shopify, Shopify or an engineering team or whatever own the rest. I want to show one more flow and then I'll pause and get questions because I've been rambling and we can talk more about technical details, whatever business details, cool use cases and unlocks or like why is this different or even matter. The last one I want to show is this. I want to show an even more direct to code flow that we have coming, that even includes sort of how you keep designs and code in sync. So one of the most common pain points of honestly using design or coding is that the design's code always got a sync. And so you code, you design the thing and devs build it. And now you want to change the color or something. The devs are like, great, maybe in like four sprints we can change that color. It's like, come on, you actually know the color change is not that much work. But it just takes time to actually get everybody coordinated and doing thing and all the stuff. And so here I'm going to show you one more cool example where I'm going to go all the way to my code and show you all this stuff. So let's close out some tabs and let's go to my cool little website. So here's my local website. So here's my blog, not super duper fancy. And what I want to do is I want to add this new contact page. So I'm going to hit the export to code button like you saw. And then I'm going to this time show you this cool cli so I can grab this command. And now all I have to do is jump into my code base. Let's clean this up so it looks a little bit nicer and I can just run this. I'll zoom in and forgive me, I'm going to get pedantic and show code. But you know, show this to your engineering team, they'll like it or at least know how easy it is for them. So next time they say, that's a lot of work, you can say, I don't know, I saw this thing. That makes it a little easier. So now I can just paste the CLI command and what this will do is it'll ask me how do I want to integrate this? Because obviously I have a design, I have a code base, but what are you actually trying to do with this? And here I'm trying to say add this contact page. So I'm trying to make a new page with this contact info. I'm not going to do anything other fancy configuration and let it run. And so what's cool about this is if you're familiar with tools like Cursor, this can scan the existing code base, figure out how this should integrate with the code base. Like you'll see it's going to figure out here in a moment that I'm using Next JS with their app router. It knows what's cool is it actually knows that we're using Zod. It's a schema validation library. It's going to build this thing like we build build it. It's going to use those libraries, etc. And that might sound too good to be true, but if you've had team members who use a product like Cursor, Cursor can do that. Again, it's Claude. If you can just pull the relevant examples from the code that exists already, people use a semantic search for that, which works well. And then have Claude say, hey, add this new thing like this. It's awesome. The only problem with Cursor and Claude etc is generally the only two interfaces you have to work with them are either one text. So like, great, you know, good luck describing this and, and painstakingly excruciating accurate text or two screenshots. But if you ever tried that, not super accurate. So here it's updated our stuff. It figured out that, oh, we're using Next JS app router. So to add a page, it added a slash. Contact. That's great. I didn't specify the URL, but it was pretty smart. Page tsx. Let's look at it. Code looks good. They broke it up across multiple components. I mean, it's quite nice code. It reuses my components too. It's using this container that already existed in this top bar, which is awesome. So let's go over that contact page. Ta da. There's our beautiful contact page. And this is actually pixel perfect. Accurate to the design it. Even if I'm correct. Yeah. It even added form validation automatically. So it's like, hey, I see you use this type of validation. I'm just going to go ahead and do that. You can describe how you want it to be different. You know, maybe you want the warning text to be purple. I don't care. That's awesome. I bet if I go in and do this. Yeah. It'll tell me, oops, you're supposed to use Builder IO in your email address, all that stuff. But here's a really cool part. So this is great. I'm going to commit this. I'm just going to save this to my code. And then here's what always happens. Eventually somebody's going to update the design. And so now I'm going to go in and I'm going to change. Let's just change a couple colors. When I select this, I'm going to say now this text, maybe this button. I'm going to change them so that we're going to see a different color than Black. Let's use a big fun bright blue. Cool. We've decided our brand is more fun now. We, we like color. And so this time I'm going to do something different. Well, it starts the same. Starts the same. I'm going to hit export to code. But what's going to happen is it's just going to merge in the updates for me so I don't actually have to code this up. Most any type of code generation products, AI designed to code anything. Today it's all about net new and we talked about that. Creates bloat, creates problems, creates duplication. You really want to have one button that's used everywhere and if you update the button, it's updated everywhere. We want to reuse that as just a pattern in general. So I'm going to copy this command again. So everything seems the same. At first. I'm going to cheat because this is not fully live to everyone just yet. So I'm going to change one thing. If you use the dev version, use at your own risk. But the dev version of this will let you do the cool feature. And now same commands. Lens is live to everyone. You won't have to do that. We'll copy. I can just say this time I want to update the contact page, that page with the latest design changes. And now instead of just like regenerating anything from scratch, it's going to go in a piecemel figure out what is the minimum set of updates it can do. I haven't tested this demo in a little while and it's not live yet. So this is the number one thing that may not work in this demo, besides our little glitch earlier. But here we go. It's going and it's pinpointing the right files. So cool. It's updating the content, contact info, components, which is over here in components. You'll see it. Okay, cool. It's updating the contact info. We can actually look at this in real time. Let's see what it did. Awesome. So it didn't change everything you see, it just changed this text. Blue 600. That's what I did. In fact, we could probably see it in real time. Oh, there we go. You can still see my form validation, but there we go. There's our new blue color that we wanted. And then we'll get a blue button down here at some point. Give it a moment. Oh, there it is. That's cool. So anyway, the AI is making the design updates we wanted. If you've ever worked in a design development or marketing team, and been sick of the fact that these two worlds always get out of sync. We can let AI do the resolution for us. And you might ask, it's funny enough, you might ask, like, why has AI not been able to do this already? I saw the most miraculous demos before of cursor bolt level or whatever. And the reality is these systems don't have any knowledge of tools like figma. They're not trained on tools like figma. They don't have knowledge of your design system. You know, you see a lot of products and you'll see this explosion of products of like net new that you don't get that fine control of. And the big question I think in the ecosystem is like, how do you retain that fine control? Let's say you are, for instance, a business that has a design system. You have an aesthetic, you have a code base. How do we have the AI code like us work with those things and integrate those things? They can do pretty good, just code to code. But as soon as you have other people, other team members, other tools like the design system and design token libraries, etc. That's where things fall apart. And that's where I think we're going to see. In fact, I'll take this full circle for a minute and then I'll ask questions. That's where I think you're going to see something new here. Where obviously the first to market tools are always going to be the thin wrappers. They're just going to jump in like, oh, look what we can do. And they're not doing much unique. They're just, just essentially being this bridge between Claude and you and certain use cases, like just build an app in the browser, which is cool as hell, but you kind of hit this, this ceiling. Like I've done a whole video on this. Sounds like a lot of people relate. I mean, tell me in the chat, if you relate to this is people tend to find what they hit is this like plateau of death. So you jump into one of those tools and it does all this magic. And then next thing you know, like the next thing you're trying to do, like it doesn't happen, it doesn't work, you're fighting it and nothing's happening happening. I even saw there's somebody, and there's probably more who are trying to make a service for you to hire a developer to kind of bail you out so the dev can jump in at the code and get you bailed out. Which is actually funny because now it's almost like humans are working for the AI, like, the AI is hiring a human to like, and then the AI is back. It's just funny, philosophical thing, but what you tend to find is the human might get you unblocked, but then you get to hit a plateau again pretty quick. It's kind of a difficult, you know, pattern that you'll run into. So if you're literally like, hey, I'm going to go to Bolt and I'm going to build the next TikTok, you'll probably get a screen that looks like TikTok really fast and you might get a couple other features like a login super fast. But then you're going to start, start not hitting things quickly. And that's where, you know, the other approach that I think is not going to work super well either is call it incumbents. You've got incumbents, you know, product that does something and they try and thin wrap Claude, like, oh, we have a clot feature too. Like, then it doesn't work too well either. What I think it's interesting is when you have this sort of m. This is kind of the world builder lives in. And I won't say that we just had some genius foresight, architected this. We just kind of like landed in it. Just the AI just happened and we're like, oh, shit. This is, this is really relevant to the problems we have and what our customers need. But you kind of have this. You've kind of got like, Claude, I'll call it LLMs. And then you also have like, you could call it integration tech if you want to make it sound as boring as possible. Which is kind of where we had started, just integration between your design, your code, your commerce platform, you know, components, all that, that. And then when you layer in the AI with that, you see this explosion. They're not the fastest moving products because Claude doesn't do that out of the box. You have to really bridge these worlds. But I think we're seeing a lot of exciting stuff. A lot of what I showed you can use today. Some of the visual editor AI is coming soon. That's why my demo broke. We're doing a V2 that's going to be out more stable and it's going to have access. Everybody's going to have access. And anyway, if you want to explore this further, you're welcome to try the product. It's a free tier. And if you want to explore for your company, reach out, talk to sales and you can literally go like builder IO demo and hit up the team, they can show you a Demo walk you through how this can interrogate with your tech, your company, your workflows, all that fun stuff. Why don't I pause now? What questions can I answer?

Amie [42:04 - 42:18]: Wow. First of all, everyone's remarking at how we want you to lead every meeting that all of us have within our organization because of your energy. I don't know if you drink coffee, but if you do, I want to know what you drink.

Steve [42:20 - 42:33]: Only when I'm excited about something. Believe me. If you take me out to like a, a bar and I have to talk to people about like something I'm not interested in, I am a zombie. I have this. But if you're talking about this topic, yeah, I'm like the Energizer bunny. I find it the coolest thing.

Amie [42:33 - 42:56]: I love it. I mean, my mind's been blown several times and it's just, I'm, I'm actually working with a company and I'm on a group chat with engineers and designers and the like. What you're describing is just, first of all, I'm going to be like, you know, the savior after this and be like, have you guys heard of Builder? Because it's like every other message is like, oh, can you update this? Oh, this doesn't like render.

Steve [42:56 - 42:57]: Right.

Amie [42:57 - 43:28]: And it's just like battles of like the mock up versus how it's actually being implemented. So this sounds perfect for them. There's a few questions in the chat that I'll bring up and you kind of touched on like the frameworks that work really well if they're. If someone has a completely custom built system and they didn't mention their tech stack is React and Python. Are there any gotchas in terms of tech that like, would hinder a team from using this?

Steve [43:28 - 44:14]: I guess the question, Good question. So the short answer is no. Our whole focus is like integrate with the tech you have. So it's a little bit more like cursor in that regard. Cursor works great with any React Python and a little bit less like bolted, like lovable. That are assuming they're building things from scratch and they assume a certain set of a certain starting point. The only limitation is you can have the best results with one of the coding frameworks we support out of the box. And so I'm just gonna jump into this little menu and show you what they are. Again, it's all the popular ones. If you're not using React or Vue. Come on, React or View or Svelte or React Native or Angular or one of these. I'll be shocked. So almost guaranteed we support your framework. If not, send us a request, we might be able to add it.

Amie [44:15 - 44:24]: Okay, yeah, like and because, because Python is a language, not necessarily a framework. So maybe there's like confusion there too.

Steve [44:24 - 44:38]: And we're back end agnostic. So if the Python stuff is exposed over an API, which it has to be to be accessible by React app, then our AI can access it and you can build off of all that Python business logic, API data, whatever the Python does currently today.

Amie [44:39 - 45:03]: Cool. And I did see that you had like a expert program, but someone is having some hard, a hard time with build or they're new to the system with getting their design to transfer over into code because the original designer didn't use auto layout. Have you been there? Are there any like workaround, any ways to save the day when that happens?

Steve [45:03 - 47:09]: Totally, yeah, there's a couple things. So the first one is, if you haven't already, try Easy Mode. Easy Mode is though you don't need to use Auto layout, it'll figure out the sort of the deltas for you. We also have a new version of Easy Mode coming soon. I'll actually run this to show you one little piece and a little secret about how it works. But we have another version coming soon that might actually be even better there. So if you tried it and it still wasn't accurate enough stuff, the latest version coming in the next couple weeks might get it there. The second thing that we have coming for this, and I'll say what you can do now, is we are looking into effectively using CLAUDE to apply the auto layout for you. So someone gave you a design auto layout. We're going to use CLAUDE to add the auto layout for you. The nice part about that is if there's anything that doesn't look right, you can just fix it right in Figma. It's going to be probably 90 there and just make the adjustments great. It's a little bit better than, you know, just exporting to code and the code's not right. Like what do you do? And here. Yeah. So here's the interesting thing about Easy Mode, which is just like a little insider secret is we give you multiple versions that you can pick from. What this lets us do is run AB tests of different approaches, different models, stuff like that. We actually train our own models for some of this stuff too, for certain things, which interestingly cursor does that too. It might seem unnecessary, but there's, there's these cases I could talk about that make it actually really worthwhile. And so you might start seeing three options here soon where that's where we're kind of doing the bake off on sort of the new way. Our goal is ultimately especially to start, you shouldn't need auto layout. The reality is certain, the way some Figma files set up are crazy and it's really hard for even AI to figure out how they should turn into code without a person. But we're working on closing that gap every day. In the short term we are putting out more educational materials on how to just do auto layout yourself. So even if you're not a fan, big expert or auto layout expert, you can check out the doc, the tutorials and we're going to have these blog posts like here's, here's common patterns and designs. Watch us, you know, on a video break the design down. And so that's the other thing you could do in the really short term. There's other resources to study up on auto layout, but that's what gives you the most predictable results. Or wait a month or so and hopefully we make it completely automagic. It's one of our highest priorities right now.

Amie [47:09 - 47:15]: Awesome. And someone shared a link. Let me find it real quick.

Steve [47:15 - 47:15]: Quick.

Amie [47:21 - 47:34]: Just ping, ping you real quick. I don't know if this is possible to do. I'm not sure if this is like Figma.

Steve [47:37 - 47:39]: Yes. Should I open the, the link you sent?

Amie [47:39 - 47:42]: Yeah, yeah, yeah, I already did so it didn't drain anything.

Steve [47:42 - 47:45]: Whoa. What is this? Whoa.

Amie [47:46 - 47:56]: So is it, is it possible to build a tool similar to this with Builder and Figma?

Steve [47:56 - 47:58]: I don't know. Can I talk?

Amie [47:58 - 47:59]: Oh sure, go for it.

Steve [47:59 - 49:27]: Oh yeah, sorry, that was me. Yeah. So something that like we've been interested in at our work is like a lot of these tools that we've seen that different agencies have built for brands that are like basically I think they're using like P5 JavaScript libraries to sort of create like all these like animations. But you know, the framing of it is essentially could easily. I mean you could see there's just these like small tiny boxes and sliders and stuff. I'm. I'm assuming that can easily built be built in Figma to and then translated to Builder. But I was wondering if like you know, on the prototyping end of it, if you could could you know, hook in, you know, a JavaScript library and have these animations be on your preview before you sent to dev. Totally. It's a great question. The short answer is yes. And we're adding kind of support for More sort of like bring your own JavaScript library, whatever you want. Like the AI can actually just today it can be hit or miss. It's a bit of a more advanced feature, but more and more we want to build that support. So yes, you can integrate the additional library, build it all in the visual editor and then turn that into code and make it seamless. So like, if you're using like the browser JavaScript version in the editor and the devs use the react version, it can do that translation too. But all the other things of like having the different knobs and stuff like that. Oops, 100% yes, I would definitely play around with it. Thank you so much. Totally.

Amie [49:29 - 49:43]: And then I know there's like a, you know, a ton of plugins with Figma. Are there any gotchas there? Like you have certain plugins or too many plugins, Would that hinder the Figma builder workflow at all?

Steve [49:43 - 50:20]: Great question. No, it should not at all. That's the beautiful thing about figma's plugin system is they don't work like other plugin systems. They are. It's pretty smart how Figma did this, to be honest. The short answer is there's. There will be no incompatibilities. The plugins all kind of run independently and they can just read and write from like the design details itself. And at least when it comes to us, nothing will conflict with anything else. If it works in figma, no matter how you produce it, or no matter what plugins you also have installed, it'll export fine, use auto layout or use easy mode, but yeah, all right, good to know.

Amie [50:21 - 50:55]: And then question. I think, I think those were all the questions in the chat. What's the. I don't. I'm like kind of new to the whole like designing part of the AI coding experience. So are there any good, like we want to get started with, with builder, Are there any good like libraries of templates to start with?

Steve [50:55 - 52:11]: Totally, yeah. I mean you could find a bajillion. So fagos community has a million templates, but the cool thing you can do too is you can find templates that are already kind of using auto layout, so they'll convert to code the best. Obviously I mentioned easy mode, which basically means it'll convert, but the AI might get a little bit creative in how the conversion is done. Auto layout for those unfamiliar is a feature for like dictating more responsive design details in the Figma design. So that pretty much guarantees that what you see in Figma is what becomes in code because there's less to infer at the AI layer. And that's kind of the big difference in general between a product like this and a product like you'll use AI otherwise. And in a lot of cases it's okay for the AI to infer things. This is one of the rare cases where you want 100% precision. You know, if we're using Figma, we want every single pixel detail and we want to preserve that. That's something that LLMs that is not LLM strength, but they can certainly. That's actually where I should point it out. That's actually where we train our own models to do this. So when you see that initial conversion, we use those with our own trained models because we want to have that precision. I said easy, Easy mode uses an LLM involved. But yes, go to template libraries. If you find one that uses auto layout especially, then you're extra golden.

Amie [52:11 - 52:23]: And last question before we wrap up. Are there any hangups around like UI Animation Sigma or do those translate perfectly as well?

Steve [52:23 - 53:31]: That's a good question. Today we'll totally ignore like prototypes and animation, stuff like that, but soon we will actually incorporate them. So right now everything you export is one frame at a time. But one of the big things that we're looking into is being able to support multi frame exports. So a common multi frame example. Do I have any here? I don't. But a very common example is like you just have a desktop design and a mobile design right now. You can't just select both and get a code export that understands both and looks correct on both screens. Soon you'll be able to. But the multi frame export feature is actually agnostic. So you could have different frames that show like multiple states. Here's my accordion menu in the expanded and contracted state, or my onboarding flow with these five different screens. Select them all, bring them in and then most importantly, that's how prototypes work too. They're just different frames with sort of connections on how one one transitions to the next and how it animates. And so that will be. That's one of the next biggest things we're investing here. Pretty soon expect that probably to take us two to three months, but that will unlock a lot, including all the bespoke prototype animations you've added in figma. We'll just carry right into code.

Amie [53:31 - 53:35]: Yeah, that'd be like just the dream, right?

Steve [53:35 - 53:37]: Totally. Oh my God. Yeah. I'm so excited for that one.

Amie [53:38 - 53:52]: And then. Okay, I lied. One more. I know you just rolled out that lovable Integration. What will be the biggest differences as a user between editing in Builder and then editing in Lovable that we should know about?

Steve [53:52 - 54:50]: Totally, yeah. There's two differences and I'll describe when you should use each. So the biggest differences are Lovable is going to build you a net new app. Builder is going to be more oriented towards integrate with an application you already have. If you want to customize or make a new page or something within in your existing website or app, Builder might be the go to. If you're like, hey, I'm building a net new website or product, Lovable is probably the go to. And the second one is Builder will have a much more exhaustive and mature visual editor. So Builder is literally everything can be visual, edited down to every single precise detail with real time feedback. Lovable's visual editing is brand new and it works by essentially like code read and write directly, which means that there's a lot less you can visually edit it edit and a lot of things will just not let you visually edit them at all. So if you want like a complete end to end visually editing experience, you might want to go Builder direction. If you don't need that completely and again, you're making brand new apps, you might want to go Lovable direction.

Amie [54:51 - 55:26]: Awesome. I'm really excited to play around with this. I feel like the more I go down the rabbit hole with like Bolt or Lovable, I get something I love and then I ask for something and sometimes it like, like totally redoes like the design. It's like, no, no, no. Like, you know, like how it looked was perfect. I just wanted like connect the button, you know, and it goes sideways. So I love the idea of starting from like the design first and then going from there. So I can't wait to try this out. Thank you so much for your time. I'm excited to see what people build in the community and share in Slack and yeah, thanks again.

Steve [55:27 - 55:30]: Yes, this is a blast. Thank you all for attending. Everybody, great questions.

Amie [55:30 - 55:32]: All right, bye everyone. See you at the next one.

Steve [55:33 - 55:33]: See ya. Bye.

‍