Figma Extension Release Fumbled

So, if you can copy any code, like I can copy, I don't know, any dashboard, I can copy uh the Apple website with the animations. Command AI We have a cool update from Figma. They're calling it design together with code layers on the canvas. So, they showed us on Fig Conf with the basically like having running code on the canvas. And now, [music] you can actually use their Chrome extension to add these, presumably, these uh code components on the canvas. And the way it works, you just go to the extension that you have, you click on it, and now you have this new button. Previously, it was just capture design or like select element. Now, you can capture code. So, I can basically capture the code from this entire website, and I can paste it in Figma and have everything that works here, like the animations, the JavaScript, the functionality, should work. Let's do that. We paste it, and pasting as a code layer isn't available to you yet. So, even though on the extension side, I can load it, I can copy it, knows that what it is, but it doesn't let me paste it. So, if I go back and capture design, it captures it. It's taking some time. And now, it If I go back and paste it, should Yeah, it pastes it. So, capture code, you capture the functionality, the JavaScript that like if you have a slider, you can have that slider inside of Figma. So, it's almost like a iframe. It's not an iframe, I believe, technically, but it's almost like that. And the cool thing with that is what they showed, then I can take the live, whatever component it is, I can take it out and do [snorts] stuff to it, like change it, change the design of it. And then maybe presumably tell my agent to say like, "Go fix it." So, that that's really exciting. It's really cool. Imagine you're vibe coding an app. And again, as we always talked about it, like the last bits of like the design, it gets frustrating commenting the like the details to the agent, like make the border radius like change the border radius. Maybe you just want to do it yourself. And this kind of like gives you that level of granular control. But I think realistically for me, for my clients, the way I could imagine using this is we had this type of clients doing their own app, vibe coding the designs. They are more focused on making the functionalities, building the functionalities. Then we can later on join and kind of like clean up their design by maybe putting all their code, not just as dead design, but as live components that work inside a Figma as well. Drag them inside a Figma, then tell the Figma agent, as they showed, to show us all the states, you know, that kind of stuff. And Right, there's a theme with today's episode. I don't know if you've noticed it, but it comes down to one word. Begins with P. Production. No? Piracy. [laughter] Yeah. [snorts] Yeah, you can now legally uh Apple's website, I guess, legally. I wonder what the intended use case is, cuz it's like, well, if it's been already is it way of vibe coding first and then getting it from vibe code into Figma, or is it indeed piracy? Yeah. Oh, there we go. Look, see, same error. So, people are saying that it Yeah, they don't have it. not it was not not you then. It literally they've Again, this is always a rolling out feature thing. It's so annoying. Yeah. What what is it? We We used to announce something to say, "Okay, now it's available." Now we announce the announcement. But similarly, they finally I don't know whether it was in the email that they gave me, but Payload is also now part of Figma sites presumably. This the long-awaited CMS aspect. So, that's the news on that. All I'll say is that Payload is a nice CMS. I do like it. I like using it for mostly because I can host it on Vercel. It runs on Vercel. And if any of my websites need a CMS, then Payload is the one for me. And that's how it looks. The Payload Yeah. So, Figma, you can have the browser, you have the files. I mean, every app is becoming this five-coding environment type of thing. And anyway, it's good it's a good design. I'm not complaining, but it's the same. So, you have the collections and here you have a very simple CMS. Looks like thing is I I think it will be even for the client it will be a Figma-like UI. They will have access to their own Figma account, their Figma organization, and You're probably right. There they have design files and website files. And in the website file they will have the content management system. And because like they already have all the architecture for the billing and the permission system for Figma and all of that. And they don't want to sell you the content separately, you know? They want to sell you Mhm. slides and AI and all of that. Yeah. It begs the question why they even bought Payload because this is just a Postgres database. I mean, it's open source, right? So, they are not obviously buying it for the current state or whatever or the UI. It's for the team, I would say. The team that was making that tool gets acquired and they can now build you know, have more architectural impact. Let me tell you Figma, you you could have saved yourself a hell of a lot of money if you just hired me because you did not need to buy payload to implement They in the prompt also they are not saying build this site with the CMS. They say build this site with its back end. So Interesting. I I just found it interesting terminology like uh we don't use back end as much anymore, right? CMS isn't really a back end, right? It's uh They could They sometimes call it a back office. The company call it a back office. It's like calling HTML a programming language. This is part of a larger conversation on my show Command AI which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI