Bifrost

All right, we're live. GM, GA, GE everybody. Welcome to what's going to be another great DevNTell. So if you didn't know, DevNTell is a 30-minute window for builders to showcase something they're passionate about or been working on in Web3. This could be an awesome project you've been working on, demonstrating unit testing best practices, automation goodies, smart contracts, how to structure a project, etc. Basically if you've got a passion for something, this is your opportunity to share it with the community. And today I'm ecstatic to have Samraaj and Kartik on from Bifrost. Welcome guys, pleasure to have you on.

Hey Narb, great to be here. For folks who aren't familiar with you, would you like to give them a brief introduction about yourselves?

Okay, sure. Yeah, you know, I'm the CEO and co-founder of Bifrost. And you know, we're here to try and build the first Figma to React tool that actually works. And this is my co-founder Samraaj, he's also the CTO.

Yep, we're here to build for developers and make sure like the entire design to development process is actually streamlined and is built within your context, not some tool that doesn't actually write code that you can use, something that actually works.

Awesome. Yeah, I'm looking forward to seeing how we can make Figma our friends here. How long have you guys been working on Bifrost together?

We've been working on Bifrost since just about January. Oh, okay, so literally just this year, hey? Yep. That's amazing. Yeah, let's get right into it, guys. What do you have in store for us today?

Cool. Let me start presenting and we could get into it. Welcome. I'm just going to do like a quick demo that just shows off a couple of things with the product. So here's just like a random Next.js project that I have. And if I were to go here, this is the code. So let's go into a Figma and put ourselves in the shoes of a developer. A developer might be given something like this to implement from a PM, let's say. The PM kind of says like, hey, these designs are ready, you need to go and implement them and start like writing all the logic around them. Generally the process right now looks like hey, you kind of just open this in a different screen and just like constantly go back and forth trying to figure out what all of your padding looks like. And we kind of think that's repeated work because a designer has already done that work. So if you notice the name of this frame, it's called Rocket Data. And if I were to go to Visual Studio Code, we've implemented a command in the command palette called Bifrost Generate. And then you could just type in the name of the frame from Figma and hit enter. And we just generate code that's context-specific.

This is able to figure out that you're using Tailwind CSS from your package.json, and it's able to even like download images and throw them into like your local repository, but we have options to put it onto an S3 bucket instead. And if you look at the Tailwind code, it's actually quite clean. Like we write the most minimal possible CSS to get things displayed one-to-one with Figma as a source of truth. As you can see, like the fonts are like up over here and the text sizes are up over here so it's not like bubbled all the way down with repeated code. If you look at it, boom, it looks exactly the same. Awesome. Now obviously it doesn't get you all the way there. This is just like an image, right? It's not like actually done. But the idea for us is that we get you about 80% of the way there and then the developer's job from there is to implement the business logic, do frontend architecture, and do like asynchronous data piping. Those aren't really things we could guess and if we were to try to guess them and use AI in specific ways, because we've tried that in the past, it just it could do incredibly well but most of the time it just goes in a direction that you don't want it to. So we just decided to focus on the things that we know 100% and let the engineer take the leverage on the parts that actually matter.

Now I also want to point out that if we look at the layout, it's actually done in a way that makes sense. This is all like Flexbox built and it's modular, which is nice. Cool. Now obviously this is a really simplistic example, so let's bubble up in complexity to something a little bit more complicated. Um, here is like a random Solana news website, right? So if I were to go into here, this is a component which is a button that is secondary color. This is a primary color button. This has a chart component, a price calculator component, and a trade CTA component. Now if I were to go into our repository and generate that... boom. If you notice there are existing components for those things that have already been built by developers and if you were to look, it's able to find things from my own repository and understand what props they need to be passed in order to match what exists in Figma. Right? So it's able to figure out hey, this needs to be a secondary button with these children, this needs to be a primary button with these children, and it needs to call these with like the right currencies for those components that already exist. And now if we were to look, again, looks exactly the same, but now that it's using my components these things are actually functional, has like hover states or like the clicks and stuff like that, which is pretty cool. And again, obviously this is using existing components.

Now let's try something that actually builds a new component from scratch. Let's go over here. So Subscribe button is like a button with a bunch of different variants that like will change how it is displayed. So this is like let's say the primary button, this is like a primary button with hover true, this is a secondary button, whatever. If I were to go and generate Subscribe button, it's actually going to be able to generate with all of the conditional logic already built out. And let's actually take a look at this code a little bit more closely. As you see, everything is actually type-safe, so it types everything and gets you all of the enumerable values or like the generic string values. It's able to get the default values for each of the props here, so it's really easy to call as well. And it's even able to recognize when certain props are like modifiers, so it actually put the hover state as Tailwind code modifiers instead of like as a prop, right? And then it does like conditional rendering of certain elements and it pipes in like the text props. So if I were to look at this same component... refresh this... it actually works with the hover state and I can mess with the props. So I just have like a page that changes the props based on this. Um, I could actually mess with the component and it conditionally renders in exactly the right way, which is pretty dope. And mess with it... it's pretty awesome. This is way quicker to build than me doing this from scratch and it works exactly as expected, treats the Figma as a source of truth.

Now again, let's go up in complexity and let's look at something that uses components that haven't been built yet. So this is using a pill button that doesn't exist yet. This uses a button that already exists and it's using a repeated component over and over again. Right? So let's just try generating navigation and look at the code quality. Boom. Now let's take a look at this code. First off, notice how it's able to split off automatically that repeated component and automatically make it into an inline component over here, which is what I would do as a developer and what a lot of developers would do. It just makes the code a lot more clean and modular, even makes it type-safe and passes a prop to it, which is pretty awesome. Now as before, it took in the component's button and it was able to like call it with the right props, and then it was able to generate a new file called Pill and pass the right props and do a multi-file generation and start creating your component library as you generate your screens. So basically as you start generating and creating your your screens, it'll automatically start creating your component set in your design system as you go, which is like a huge time saving for developers, right? Um, so yeah, this looks cool and it looks it looks right. Which is nice and like the stuff actually works, it's got like the hover states, whatever.

Right. Now let's do something one more thing, actually we'll do two more things. This is a like website for an e-commerce coffee brand and Alinea is actually our favorite coffee shop here in San Francisco. Highly recommend checking them out. But this uses just like a shit-ton of components. So let's just try generating it and seeing what happens. There we are. So it was actually able to make a bunch of like new components at the same time. It is able to make quite modular code um, with like everything split up into their appropriate components. If I were to look at any one of these items, it actually further splits anything in here into their own components so it actually it makes everything as modular as it possibly can, right? And it is able to do conditional rendering for like image sources and everything like that. So if I were to look at it, it looks exactly like what's in Figma and it has like hover states, it all works like properly, which just saves you time as a developer a ton.

Right. So that's pretty cool. And the last thing I will demo for you guys, at least like unless there's a bunch of other requests, is what happens when you already have things in flight, right? So let's say let's go back into like the developer mindset. A PM has told you to go and build this screen. So let's go back to VS Code and we're going to go here and generate Rocket Data again. All right. Now all of us are developers here, from I'm assuming, right? Um, we've all worked with kind of those asshole PMs sometimes and sometimes the asshole PM kind of forgets to go through the processes and says like, hey, this this copy is wrong. Go change this copy. Instead of nitrogen it needs to say hydrogen, right? And this is like a last-minute change and the reason I say he's an asshole PM is that he forgot to tell the designer, so now this is out of sync. And now the designer decides to go and change the color. Hey Kartik, could you go over there and change the color? I don't know why I'm in view-only, I think I accidentally got logged out. Yeah, I can. Just make it like pink or something like that, it doesn't really matter.

Yep. Here comes a designer. Designer has now changed this thing to be like different. And now everything's out of sync, right? There's copy changes that are wrong, there's colors that are wrong. So as a developer you're like shit, what do I do, right? And the PM is like fuck everything's messed up and he just assigns you a ticket that says fix it, right? And this is the most annoying thing ever, everyone's been in this position. Obviously a lot more complicated than what we just illustrated, right? But instead of having to go and figure out what needs to change from scratch, we implemented a command called pull changes from Figma. Which will remember what we generated last and it will figure out what the changes are and instead of doing everything from scratch, it just gives you merge conflicts. Just like you do with GitHub, right? So instead you would just say accept incoming change which is coming from Figma, which included that new color, and accept current change which includes my copy change and save and call it a day. Right? So now we're good. And this is exactly like it needs.

So our kind of idea is that in order to start off, um, you can start generating with Bifrost and we'll like create like your design system and design components for you automatically. But when you're in flight, we'll also you'll also be able to use Bifrost to like keep all of your components and your libraries and stuff in sync. So everything like is able to be developed on top of in a quick manner. Eventually we want to do things like being able to fire off PRs automatically so you don't even have to do this merge conflict bullshit, but we'll get there. That should be basically it for the demo. I'd love to take some questions and um, understand what like concerns are and see if we can get any feedback from y'all.

Yeah again, uh, if you have any questions for the Bifrost team please post them in YouTube and I'll ask on your behalf. Uh, but in the meantime I got a couple of my own. Uh, so what happens if um, you are working with a particular component library? So I think what this does, if and correct me if I'm wrong, is it generates you kind of like vanilla React components. Uh, but say for example you work at a company and your company has a very specific set of um, a component library. Uh, will Bifrost be able to um, interact with that library to make those components?

It's a great question, right? And the question the answer right now is that it depends on your setup, right? So kind of like what I showed you in this example, right? This was using buttons that had already been built and like these pieces which would theoretically be part of a component library. And Bifrost is able to find and match what makes the most sense within your repository and call it with the right props. So if your component library exists within the same repository, the answer right now is yes, we're able to like interface and use your component library in the right way. Now if your component library is imported through NPM, the answer is not yet, but that is kind of like the next big piece on our roadmap, right? We want to like support a couple of like the bigger component systems out the box like shadcn or Chakra UI and things like that, because we also support Chakra. We want to support those out of the box so that like hey, when if you're using like the Figma for shadcn or whatever, right? Like and you use a button, we're automatically able to like understand hey, this button exists from shadcn imported from NPM, use the props correctly, and then like even throw in certain primitive functionality. Like if you're using a button we should probably throw in a click handler with like a stop function, right? Uh, or if you're using an input component, we should probably throw in uh like a state with an onchange handler, right? Like some basic things like that, but the answer is that's not done yet, we're looking at about two to two and a half weeks to get that done.

Ah, excellent. Yeah, looking forward to that. Uh, and I use uh Chakra UI uh quite a bit uh in all the open source stuff that I do so that's that's great to hear. Oh amazing. I'll probably pick you up for advice. Yeah, yeah for sure. Uh, and I guess uh my next question um, can it create the corresponding frontend unit tests um for the components it makes?

That's a very good question and the answer for that is unfortunately no. Uh, I would love to get to that point and we eventually want to do kind of like the Storybook integration. So um, when we create a component, it automatically makes all the stories for that component because that would be fire. And obviously like if so if I were to go back here and um do the Subscribe button again... like I made like a little jank version of Storybook just for the purposes of a demo because I went here... So I mean this is just like a little jank version of Storybook for the purposes of a demo but obviously it's not actually good. Like this would work way better as like an actual Storybook integration or a unit testing integration. So we want to get there and that's definitely on our mind and would be the best developer practices, it's just we haven't gotten to it yet. Probably in the next couple weeks.

Sweet. And um regarding the flow of uh having Figma as a source of truth... so suppose that uh the PM uh instead of that little uh color change, right, uh says oh whoops I forgot to add a button or uh I added this button in the wrong place. Uh, so what would happen if say um the initial thing that it generated, um it removed a component and added like two more buttons for example? Like it took away one uh it took away a button and added like a radio radio button or something. When you go to generate the code again, will it still have the button that it originally generated or will it clean it up?

It would clean it up with the merge conflicts in the same way that you saw earlier, right? Like so we'd basically have like a merge conflict there. Right now our merge conflict doesn't doesn't support component sets, but that's just like a bug on our side which should be really cool very very quickly. So but if it uses components then yes, it'll just be caught by our merge conflict thing. And it won't it won't fix things out right because there might be a reason that the developer did it and we want to like give the developer more power to just be able to um to just like configure it. Does that make sense? Yeah, yeah for sure. Awesome.

Uh, we had a question here, I think it got answered in the chat but for those not watching the chat, uh is there any size limitations on the code base?

Yeah, there's uh not, Kartik already answered this in the chat but uh there's no size limitations per se. Right? It might take longer for us to like read through like type signatures and things like that because essentially what we'll do is we'll go through like the components library stuff and we'll read like the typing of every like component that you have and understand how to use them and come up with like solid descriptions so our like AI set also understands how to use it, right? Um, so it might take a little bit longer but the way that like we shard everything is there's no limitations or hard limitations on the size.

Sweet. And I guess uh if people want to get started uh with Bifrost, how can they sign up? How can they start using this?

Yes, so you can go to bifrost.so right now. Um, you know we announced a summer beta uh a couple days ago, so for the next three months this tool is free for you know a solo developer and all teams of all sizes. Uh, so you should definitely go to bifrost.so, hit Get Started, that goes straight into our docs, you can install the VS Code extension, um and learn how to use the product. Uh and actually if you hit back here for a second in that corner you'll see support and Discord. Uh anyone is welcome to please join our Discord and we're on there every day uh supporting people getting them started with Bifrost. Yep.

Excellent. And I think I missed it at the beginning but um what are the steps to get it uh so after you download the uh the package in VS Code, uh what's the step to connect it to a given Figma file?

So basically you hit login um in the VS Code extension and that will pop our admin panel which you'll see uh right here. Samraaj is showing it off. Um so then he has to just go and sign in. Sometimes this gets a little bit slow. There we go. Yeah, so basically uh you'll have a button to connect your Figma uh account, which is how we're able to actually look into like your frames and things like that. And then you could just add Figma files. So if you go to Figma and you like right-click here, you can copy link and then you just paste that link here. And we'll now unfortunately there's a couple limitations on the Figma API, like if you if we have like a user's auth we still can't see what files you have access to. So you still have to manually tell us what files, which is like really stupid limitation but whatever. Um, but once we have that we can see whatever frames and allow you to generate. Um, there are some things that are best practices on the designer side which would be uh like you would get better generations. Like right now we can support mostly anything on the Figma side but if you use auto layout which is kind of like Figma's answer to like Flexbox and you make things into components properly and try to use component sets, our generations go up in in um in quality.

Gotcha, gotcha. And uh is this um when people uh sign up is it a per per user kind of uh idea or do you guys have this concept of teams as well? So say you're a team of developers but you want to in the future like use just one Bifrost account um.

Yeah, so right now um it is per user so each user has to add their files, but as we get more teams on that's definitely been a request. So we're looking to support so you know one person could add all the Figma files and everybody else could just generate. Gotcha, beauty. And I guess um I'm kind of interested to hear the history of uh how you two met and uh like how all of this kind of came to be. You mentioned that uh you guys started on this in January and and got a pretty decent product out in a short amount of time. Like what's the background story of how uh Samraaj and Kartik met?

Okay so these are like these two events are very far apart um but I'd say that's a good thing. So Samraaj and I met 10 years ago. Um we both went to uh RIT which is a school in upstate New York. I actually met Samraaj and my now wife on the same day uh so that's pretty crazy. Um and yeah, we've we've been friends ever since, we did like hackathons and stuff in school together. Um always bouncing business ideas off each other. And then about nine years later we started a business. The reason we uh have this connection with Developer DAO is actually we started a crypto business. So uh I just had this idea like hey I have a decent bit of Ethereum, what happens if I'm just walking one day and a truck runs me over? You know like what does my wife do? Like I'm sure she can find the Ethereum but like is she going to know what staking is or what these monkeys are or like you know what I mean? Like there's a lot of crazy assets that don't make sense to even the most tech-savvy person. And so we kind of decided that's crazy, let's uh build like a smart contract based deadman switch um and solve it. And we actually got into YC uh together with that idea. Um worked on that for some time um and yeah, I think what we really realized there was like look, you know this is a compelling problem but there's just not that many people that want it. Like either most people have figured out some crazy maze and like have these steel sheets everywhere and they're already happy with that, right? They don't want to try anything new. And then the other, you know the other third just don't care. Uh is what we really realized. And so we didn't want to build a business with 10 customers and so we looking for new ideas. And actually you know Samraaj was working on a non-AI non-AI version of Bifrost you know a couple years ago. And so that was a project where basically you could edit anything in Figma and have it live in production and the whole idea is like hey, you know me as a developer I'm sick of making copy changes, like why can't my PM just go into Figma and change stuff, right? Um and the problem there was look, the code machine-generated code wasn't that great then so we had to hide it.

I was uh I got around the code being shitty by putting like a JavaScript snippet that would inject the code onto your site so then the developer would never have to like look at it but again that wasn't like the best. And then what we realized you know today with the advances in AI it's like look this problem like can actually be solved. And between the two of us we've you know we've managed teams with designers on them, we've been developers ourselves and we've been PMs too. And so we really know that this handoff problem is just something people hate. You know even when we were setting up before we went live you're talking about oh wow like you're going to like engineers like have them like Figma? I don't know, right? And we actually think we can. We've actually had a couple customers where like oh my god should I go learn how to use Figma now? It's just a better way to move rectangles around if I can get the code for free right? Um and so yeah after we put out our first demo on Twitter which went pretty viral, over 700,000 impressions in 24 hours, um we knew that we were really onto something. And that's kind of when we leaned in and decided all right like this is what we're doing, we're building Bifrost now um and we're going to solve this problem once and for all.

That's amazing. Yeah that's typically how a lot of these really great success stories start out is just like couple of friends messing around and like oh wait a minute we got this dope idea there it goes fire excellent. And I guess um up to this point what would you say has been like the biggest challenge you've guys faced while um building out this AI version of Bifrost?

Technical or non-technical? Could be either or both. Okay I could talk about the technical side. Um I had to learn a lot of like CSS relearn a lot of CSS fundamentals I would say um which is also interesting because I didn't study computer science, I studied computer engineering in college which is mostly like hardware stuff. But um a lot of like the base code for Bifrost is um compilers interestingly enough. So um all of our like code generation works based off of ASTs which are abstract syntax trees which are like literally compilers. And Bifrost at a core is actually a transpiler, right? And figuring out how to set up a generic compiler that extends libraries that give me like certain functionalities and also extends Figma's data structures that we could also add packages in in a very short amount of time that support different frameworks was pretty difficult, right? Um and this is the first time in my career I've ever used an abstract class. But uh yeah which was like a meme, right? But like abstract classes actually turned out to be like the best way to build this type of stuff because we needed an abstract like base compiler that had packages for like all these different systems. And figuring out how to set all that up from like a fundamental standpoint was pretty difficult but also really fun and really rewarding. Um I've also become a much better engineer that way. So I would say on the technical side that's been challenges. Kartik if you want to talk about like the business side all that type of stuff.

Yeah sure, definitely. I mean I think you know we're in this place with you know like a glut of AI tools, right? There's just so many of them. And it's so hard because there's a lot of stuff that's just like flashy and it's a fun demo. You know we've happened upon something that's just going to be an incredible product for so many engineers. I mean there's just so many people who get value out of this. And so I'd say it's kind of hard to one, you're part of that and you want to be. I don't think our tweet would have been viral you know without all this excitement around AI. But at the same time like you want your tool to actually be used. You're like hey like we actually have something that works, it works now and will deliver value right now, which isn't true of a lot of AI tools. But the thing is you get bucketed into that which makes it really challenging. And I'd say on top of that when it comes to distribution especially since we're making a tool for engineers um I would say kind of the hardest probably the hardest customer I think to reach just because so many uh I mean you probably know like all these recruiters and all these people are just flooding like like there's no cold like I'm very good at cold email, I can get an investor to return my call, I can sell to a manager pretty easily but like you cannot cold email an engineer, right? That's just a waste of time. And so it's just kind of figuring out that you know that loop, like what is the best way to engage with engineers you know that's why we're here now um and just getting the word out that look this isn't just another AI demo this is a tool that's going to save you hours or days right now.

100%. And yeah like you mentioned that like a lot of the the pains that you guys are solving here I've experienced multiple times throughout my career and I know like you guys mentioned probably millions of others have as well. Uh so really looking forward to uh the continued additions to Bifrost and uh having you guys get it into more and more people's hands to get that uh awesome feedback. And if you're in Developer DAO, I know we've used Figma in the past so like why not why not make your lives easier, right? Um and I guess unfortunately this kind of almost brings us at a time but uh just one more time for our audience um what's the best way for folks to to kind of get in touch with you if they want to ask you questions or just get started with Bifrost?

Yes, so the best way is to go to bifrost.so and sign up and get started. You'll see our Discord in the in the corner there to get support and we're always on there. That's the best way to talk to us and you can also see both of our Twitter handles here. Uh we check Twitter DMs all the time so you can do that too if you prefer. Uh the best way though is to sign up and start use Discord. The easier way, beauty. Love to hear it. All right, gang. Um thank you so much for taking the time to come on uh this week, really appreciate it. And uh yeah, like I like I said in the start uh this is a new way for to make Figma your best friend now. So uh yeah, really excited to see what developers do uh with this awesome tool.

And uh before before folks leave, um I want to present you with the thing. Uh the QR code to scan to claim your Kudos uh for being a attendee here today. So if um you're watching on YouTube, um please take out your QR code scanner, scan this code and you'll have up to one hour from now uh to claim your Kudos for being an attendee today. Uh Kartik and Samraaj, I have a special one for you that I'll share after but yeah go feel free to claim this one if you'd like. Yeah. Um but yeah with that just want to wish everybody a uh very happy Friday, happy weekend and we'll catch you back here next week. All right, gang. See ya. All the best. Cheers. Sounds good, cheers. See ya. Bye bye.