Framer 3.0: Agents Turn Designers into Orchestrators

Welcome back to another episode of 20 Minutes by No-Code. And as the AI hype train is in full effect, some of those folks just keep their head down and just keep building. And it seems like Framer is one of those because, you know, you still remember, and it's not that long ago, that Framer was the next best thing, basically right before that whole AI explosion. Well, They seem to have been in the shade a little bit, I would say, publicity-wise, but that didn't slow them down because the upgrade or the update that they launched, I think it was last week, Fravor 3.0, they coined it, looks pretty impressive to me. But then again, I didn't have a lot of time to tinker around with it. Maybe you guys did, but at least we have some videos to look at, and which we did, and I'm not the expert here, guys, but it looks pretty intuitive to me, that, that agent's workflow. It's, it's really quite something. Um, yeah, I don't even know where to start. First, let's introduce you guys. Leonardo Zamboni, designer at Noco. Daniel, head of development. Look, we got a little heart there, and that's always nice. Um, what do you make of the, the update? Let's just start there. Let's do a high over You know, let's have a high overlook at it. Framer 3.0. What's your take, Leo? Yeah, my take is that I'm stunned. I think this is really a game changer. It's pretty much insane. Essentially, we have now these new agents in Framer that can run the work for you. And essentially, yeah, exactly. That was the event that I've seen. And right now you have those agents basically where you can, you know, they can do the work for you while in parallel at the same time you can still working at the website, maybe in other sections. I think that Framer changed the entire tool at this point. It's not, in fact, they called it 3.0. 3.0 for this reason, because it's a new era of the tool. And if you take a look at the actual product, it's completely different. Now we have on the right panel, we have a whole dedicated section for the agents. And yeah, and this is kind of like impressive because at the first time, yeah, for exactly those exactly as you can see in the video. You can switch model. Another really cool thing is that you can now attach an external tool like Cloud Code to the software. Yeah, that's what they get into at the end of the video, man. But let's stop at the agents, right? Because the keyword of this whole update is agents. Now, we've heard this before. Almost every established platform runs, you know, rolls out updates and they all have agentic workflows. We saw it with Webflow. We saw it with, well, even the tool that we're using now to record this podcast, Descript. They all have agents. They all have agents. And I guess the common denominator is that you have somewhere, you have a chat window in the workflow that you're using. You type and you ask it to do something and then it starts working for you. And then some tools do it better than others, right? For example, looking at the Descript agent, which they call Underlord, it works quite well, but it's still very limited. Now, I know that's a marketing video, but looking at the examples that the Framer guys gave in this video where they actually take you on a trip and show you their workflow looks pretty damn intuitive. And that was the first thing that stood out to me. You can just prompt like you always do. Yes, you can choose your model, but you can do that everywhere. But you can also, you can tag components, you can tag pages, you can tag all kinds of stuff that is in your Framer project and add it as context to your prompts. And it just looked really, really seamless. Yeah, yeah, definitely. Yeah. Seamless, seamless is the right word for this, I guess. It's really, you know, I think that we're reaching to a point where basically the idea and the execution are like becoming more and more tiny, like the space between the idea and the execution is really, really small right now with this kind of tools. And I think Framer understood that well. The idea needs to be put in the first place. Instead of having, of course, the execution, which is, of course, something that we should not take for granted. But I think that we're reaching to a point in the design era where you can have an idea and then you can just use Framer, for example, to address the idea. And it's amazing. They totally understood this. Yeah, and this was the premise. This was Framer's premise to begin with, right? They are a design-first tool. They have always been. Well, started as a, I think as a prototyping tool. The guys from Eli Five, our software studio, used to use it in the early days. And yeah, yeah, yeah, yeah. As a, exactly as a prototyping tool. So that's funny. But then they made the jump to, I guess, to full-blown web design. But yet I think the head start that Framer has is that they were always about bridging that gap between creating it, visualizing it, visualizing the idea, and then just building it, making, turning it into something workable or working product. So I guess that it makes sense that it's easier for them, that it's a more straightforward path to further enhance that design-first workflow by adding agents. Well, for example, when you compare it to Webflow, and maybe Dan, this is where you can weigh in. So what Webflow is doing is, well, they were supposed to be a visual builder, but it seems like their implementation of those agentic workflows is a little bit more— it feels less natural to me. It's like they're trying to build something on a platform that was essentially created with a different idea in mind compared to Framer. How do you feel about that? Yeah, so there are kind of two ways to do this agentic workflow in Webflow, and none of them really compare to this. So the first one is they have their built-in kind of AI composer where you just say build this specific section and it just crafts it. And it's kind of how their app generator works. So it's basically just a prompter inside of Webflow. And then there's the MCP way where just connect it to Claude, right? Which does work well, but it's, it's not perfect. So it does require some customization. So yeah, I don't really have the best experiences yet with these two, but I believe that it can get you there, like maybe even like 50-60%. So it can cover some ground base. So you can start customizing and improving. But then the trillion-dollar question, then the trillion-dollar question is, will that be enough? Right? Will that be enough? That's 50 to 60%. And that also depends on what you want to achieve with it. Because what is your first response when you see this agentic workflow within Framer and how seamless it looks and how well, how native it looks almost? What do you, how do you feel about that being a more technical guy? Approaching things more from the technical side of things and then the foundational side. Everything has to have a strong foundation for you, which has merit, which is important, but that's your thing, right? So how do you look at this? Yeah, so I always have this kind of puristic perspective of like, oh, make things work, make things modular, make it in blocks, make it reusable. But it's crazy to me, like what always comes to my mind is like, it's it's crazy that it can craft something that maybe would take me like a day or even 2 days, like in, in minutes. So, but I think everyone's past that. But the thing is that it's, it shouldn't just be basically it, it's, it, it, I still, I still believe that it should cover the basis. Because I don't know what's behind it. So I don't know the system behind it. I've always been a little bit skeptical about Framer just because of the way it's building things, because sometimes I felt like the sites are a bit clunky. So are these agents trained on that sort of clunkiness a little bit? But question. Yeah, yeah. So it's— but what I know is that there's, there's already some sort of a Basically, like, I believe it's a documented way how they're building sites, because I know that sometimes it's not as— like, Framer is fully customizable, but sometimes, like, at least on mine, when I tried Framer, I had a hard time building the same thing that I was going to build in Webflow, so with a much easier approach. So I wonder if I wonder how those things would work. So like, I would say like specifically like a complex background setting, let's say like different images like scattered around. It's like a very complex thing to build normally. Yeah, you want to know every line of code that's behind it basically, whether it's AI generated or not. Okay, let's go to the other side of the spectrum to Leo. So Leo, when you see this, like, there's a couple of things that I, you know, some takeaways that I had watching the presentation, right? So with this agentic workflow, I don't think that Framer is merely a website builder anymore, but it's actually directly competing with Claude Design, for example. And the reason I say so is because in this demo, I mean, they also simply generate they generate stock imagery, they generate illustrations, they generate even a style guide. So basically a brand book. And then the biggest question I have, and that I would love to find out, is how much raw creative power does this framework agent have, right? So for example, in Claude Design, you can prompt quite complex shit, sorry, stuff from scratch. And I'm just very curious if Framer has that same raw power to create stuff from scratch, like for example, complex illustrations or visuals, or that you really have to feed it something first. And I'm not just talking about references, but have it give it some sort of outline that you as a designer, I guess, have to create that it can then extrapolate on. I'm curious to learn about that. Yeah, sure. Yeah, but you see this here, like the way they prompt, like you can tag lists, you can tag components, you can tag headers, I guess you can tag basically anything. Exactly, that's really related to the question that you were asking to me because basically as far as I understood and this is why I think this is a big change, a game changer tool. Is because you can, once you define the homepage, for example, with the artistic direction that you want to give to the project, you can also mention pages or components or whatever you think is best to have that look that you gave to the entire homepage. So this is why I was mentioning before that the execution of the idea is really small right now because you need to have the artistic direction and then the tool does the thing, you know, runs the agents, does the entire thing for you essentially. You have to be the leader, the, how do you say, the orchestra, the orchestra, well, it has to orchestrate it. The curator, the executioner. Yeah, the curator. Yeah, exactly. It has to orchestrate the entire project. Basically, you have to be in the middle, and once you've been in the middle, you can orchestrate all the things around you. So components, new pages. Also, another valuable thing is breakpoints. You can now, for example, create an iPad and an iPhone, for example, a smartphone breakpoint, which is time saver. It's incredible. Once, like 2 or 3 years ago, you have to do that manually. Now you just tell to an agent, hey slave, does that thing for me. Hey, don't say that to an AI because you never know how that will come back to bite you. You're right. You're right. Like in 2050 or something. Exactly. You never know. Maybe it puts you in its AI dungeon and punishes you until eternity, right? So, Yeah, but I see what you mean. Yeah, it's just, okay, so now from the creative aspect of it, right? So, um, you as a designer, when you have all these tools at your disposal and you have the hypothetical scenario where you have very little time, you have very little budget, but you still want to create something that is, that looks, that at least looks like something premium, what would your approach be? So where would, so you have a limited amount of human time, you know, as Leonardo, that you have to that you can put your artistic brilliance— it only has a very, very limited, limited window of time. Where would you put that to use? How would you do that within this workflow? This is a great question, and I'll start by saying that this is a completely new workflow, meaning that we have to still figure it out what will be the best-case scenario for a good workflow with this new tool. But if I had to respond right now. I would say that for keeping like the same high level of aesthetics with a low budget, you can just start by do the essential stuff. So basically the typography, the colors, and try to put them together in the homepage. And then you can, as you said, I can run agents to do the other work for me. So, for example, other pages, new suggestions, and that is valuable for a really tiny budget because it is, as I said, time-saving. So I can just focus on one part of the project, for example, the homepage, and then I can be quiet and I can settle down that the agents can do the work for me. Of course, I'll be the orchestrator, as I mentioned, but you have a really good and big hand on this side from this perspective. Yeah. Another thing is— Yeah, in a nutshell, I would— Sorry, go ahead. No, go ahead, go ahead. No, I mean, it's just like I would focus only on the homepage if I have really a small budget, and then I can orchestrate the entire thing for creating the other pages. Yeah, got you. And I think maybe what could also be the case is that, as you know, in website sprints, obviously you have your allocated bit of time for discovery, for finding style references as a designer, just to get the inspiration and get some sort of direction where you want to take that project. You know, it could also, but we all know that time sometimes is limited, right? Maybe, you know, as a creative, sometimes you just want to spend like 2 days looking at cool stuff and playing around. The reality of a project is that— Also 3 and 4 days. Exactly. Yeah, exactly. That is the fun of it. I had that myself, you know, being a creative director at my former agency is you just want to sit in a room and just, you know, tinker around with ideas and scribble stuff. But the reality is that, you know, not every project has sufficient budget for that, has sufficient room for that. So you have to cap it. You have to cap the time that you spend on it. I can also see that sort of this becomes more and more of a curation thing, but also a front-loaded effort thing, right? You already mentioned like putting extra, extra punch in that homepage and making sure that you get everything right, every element and component right, so that it carries over to the— the agents can carry it over to the other pages. But maybe it also frees up some creative bandwidth, I would say, for more discovery and more of that sort of letting your mind roll into the perfect creative direction. I think if you use it smartly, then it can also be a good thing while still keeping things cost efficient. Because the reality is that, yes, every page should be perfect, should work. But the reality is also that some pages are more of a difference maker than others, right? So obviously the homepage, some other core pages, like for example, a product or solution pages for a SaaS product that you're trying to sell. But there's also a bunch of pages that do cost time to create but are not the difference makers. They are not going to push you over that edge of selling more products or getting more demos booked. Exactly. So Yeah, the positive scenario creatively is that you can, you know, put your human creativity where it moves the needle most. And I think that is what we should strive for. Question for you, Leo, which I don't know. To what extent in Framer can you set up a design system like, for example, we do in Cloud Design with the MD file and all these custom instructions? Like, what is the— the workflow for basically setting up a brand system in Framer? Good question. So I've seen that they just passed by that you can attach Cloud Code as an external tool to Framer, right? Yes. So essentially, this is really related to the question that you were asking to me. Because you can setting the design system in more ways. You can do that directly in Framer, but you can also attach other tools like Cloud Code to Framer once, of course, so this is after the art direction of the homepage. So this is the next step. And this is really valuable. In fact, I do think that right now, Cloud Code is not a really competitor of Framer, but it is more like they're on, they're like in the same level in the market and they can talk to each other. So essentially they can, you can use Framer with Cloud Code and you can use Cloud Code with Framer. Of course it has a little bit of level of, how do you say, like, I don't know the name, guys. Well, I mean, it's like, of course, it has the same level of sales, I would say, but I would, yeah, I would say that right now, Cloud Code is more like a software that you can use with Framer. Yeah, sure. No, I was mentioning Cloud Designer and you're not Cloud Code as a competitor, just to clarify. Okay. So, so, but then my question is still like in Framer, uh, natively speaking. So in Cloud Design, you can set up a design system, right? We use an MD file. You have, you have literally, you have a tab for it where you can set up your design system. How does that work in Framer? How do you set up your design system? How do you just basically, how do you incorporate your brand, your brand system, your design system into Framer? Like, is that something that you can set up once and then, uh, let the agent use it all the time you need it? Yeah, exactly. Exactly. It's something that you can create directly into the tool, and then you can update the design system with the agents, essentially. So let's say that I need to create a new landing page or a new website for a B2B SaaS, fictional B2B SaaS. I create the homepage. The proper workflow for now, would be that I create the homepage with the art direction. I set up the design system. I create the other pages with the help of my little agents. And then I can create the design system and refresh the design system, whatever you need. So For example, you need to, after a while, you need to create a new button, which is a tertiary button or something like that, secondary stuff. You can definitely do that with the help of the agents. So you can prompt, hey, I need a new button, blah, blah, blah, and they can do the work for you. And that work is not related to the idea and the creative direction. It's just like technical work that you need to do that in any case. And right now you can save a lot of time to just do that with the agents. So I think it's amazing. It's amazing in terms of commercial, commercial-wise, sales, not only design, it's the whole spectrum of the thing. Right, right. Yeah, I can imagine. I can also envision using Framer after you designed a website for creating other marketing assets, to be honest. Yeah, for sure. I think that's coming. Yeah. All right, last question, guys, regarding Framer and all the updates. By the way, they also introduced page branching, which we know from Webflow, or at least the Teams and Enterprise tier. Yeah, thumbs up from Daniel. There you go. However, the page branching in Framer looks really good. And yeah, you can just very easily create your sandbox and then merge it all together. It's probably the same principle Webflow. It just, you know, I'm very visually oriented and UI sensitive guy and it just looks sexy. So good job to Framer. Let's play around with it more and see where it takes us. You know, as the guys from Framer said themselves in the video, like we are also still figuring out all the possibilities of these agents that we built ourselves. We barely scratched the surface. So that's exciting. That's exciting. Yeah, yeah, yeah. One last hot topic, and then would like your take on it briefly if you can, because I know you're passionate about this, but there's of course a lot of, uh, talk about, uh, you know, the headless CMS here, a lot of Sanity talk, et cetera. Obviously everybody's vibe coding website using Cloud Code, Codex, and what have you. Um, and you already see also after this framework update, you already see people, you know, sort of influencers in the space creating videos saying, you know, don't fall for Framer, don't build your business on Framer, it's a trap because you're still boxed into one product, you're still boxed into one ecosystem. Now, we've had this discussion a lot of times also internally, and there is, that discussion has merit. I can see where that is coming from. I do think that it is more from a tech utopia perspective in a lot of cases and not so much from a sort of a customer-oriented or commercial focus because my sort of Counterpoint there is, like, I'm a little bit older. I'm not 20. So I know very well how important product is, what sort of what product is and what the value that a purpose-built product is with meticulously created and polished features for a very specific industry or even niche, right? It's a product. You can call the people at the product. Hey, product people. You know, my stuff broke down. Can you fix it for me? Here's a ticket, right? There's people, there's faces, there's a CEO, there's a CTO. You read their blogs. It's there. It doesn't evaporate overnight, right? And I noticed personally that for customers, especially the scale-ups and the more enterprise-grade customers at no-code, they find that very important. They're still a little bit conservative and old school for good reasons most of the time because they have a responsibility. They have an InfoSec team. As they scale, there come the InfoSec people, there comes the compliance. So I, I, I fully understand that people make the case for headless CMS because you can literally prompt everything and you, you're, you have complete endless infinite field of play where you have all the flexibility you need. But I do feel that product gets so much disrespect, and that is why my plea for, for, for, you know, uh, for the importance of a good purpose-built product. So Dan, there you go. And what's your take? Yeah, I know, I, I, I, it's a very, very interesting take, and I feel like, um, we really have to think, uh, with, uh, basically like in a, with a responsible, um, mindset, right? Like, we have to think about that. Like, if something super custom breaks down, who is gonna fix that? Like, it's just like going back in the day, like when we, we didn't have AI. Like, people just built their kind of own CMSs or editors, or, uh, we still met clients that were just pushing stuff from GitHub and things like that. So Like there are still cases like this and then who is going to fix that? Like, you know, I'm like, what if I'm not, I don't want to like be like some, like the bringer of bad news, but what if like the guy who built it has an accident or something or whatever is not available or he's on holiday? Like how is he going to be responsible? Then the only person you can reach out to is that tech support side. I do, I fully believe that like a company that has built a product takes the responsibility because like if you, if you build something with cloud code, like, and that, that thing breaks down, like Anthropic is never going to be picking up the phone like, hey, like, what's up? Like, oh, you cannot push to GitHub. You cannot branch. You have troubles hosting on Vercel or Like, no, they're not gonna do that. But then, like, there are, like, there's a responsive customer support at Framer or Webflow or any site builder that, you know, that really pushes a lot of money into these products and invests and raises money. So I really agree. Like, that's where I'm like a little bit scared too, you know, like, I'm never gonna be able to make such a nice and convenient page branching that I can just onboard a marketer to or a CMO to. Exactly. And that is a consideration. Now, I do agree that when you want to move fast and you're super early stage and you have the capacity, but you don't have the budget and you just wanna go to market fast. Yeah, sure. There's definitely a case to be made for that. But okay, we should definitely do a separate episode about this. Because we're almost breaking our own rule. We're almost at 30 minutes, which is my fault entirely because I came up with the concept of 20 minutes by no-code, which is a very hard one to— very hard promise to keep. But thanks. It was good checking on Framer 3.0. And yeah, we will start playing with it and working with it and then see which things come up and which details we can discuss further. So Yeah, thanks guys for joining and for everybody watching. If you like the content, like the stuff we talk about, subscribe to the No-Code YouTube channel by clicking the subscribe button. Shall we do the thing that the link down below? Let's do that. Let's ask Nada, our colleague out of content. Let's ask Nada to do a couple of those little animations. Yeah, maybe she can prompt them in the script. Using the agent. Yeah, well, new agents. I'm actually pretty sure that Underlord, uh, this Krebs agent can do that. So let's try it. Okay, it's a 30-minute mark, guys. Was a pleasure, and we speak soon about other stuff. Thank you very much, guys. Thank you for your time. Exciting. Bye-bye. Bye-bye.