Figma announces a CMS and a vibe coder? Oh boy

Summary

Highlights

• Figma branches out with Figma Sites, a CMS tool for non-devs. 🌐
• Figma Make employs AI to code directly from Figma designs. 💻
• The company adapts to the AI trend without threatening designers' jobs. 🤝
• AI-driven competitors like Bolt inspire Figma's latest strategies. 🔥
• Figma’s focus is on empowering designers, not eliminating them. 🌟

Key Takeaways

• Figma introduces Figma Sites and Figma Make to expand their market. 🌎
• Figma Sites functions as a simplified CMS for non-developers. 🖥️
• Figma Make utilizes AI to automate parts of the design process. 🤖
• These moves aim to preserve Figma's role amid AI advancements. 🛡️
• Designers remain central to Figma's strategy despite AI integration. 🎨

Overview

Chapters

• 00:00 - 00:30: Introduction and Figma's Current Position Figma finds itself at a pivotal moment after a failed acquisition by Adobe due to governmental intervention, leaving its future acquisition prospects in question. Despite this setback, the focus shifts to Figma's need to generate revenue independently. A recent discussion highlighted a significant incident with another company, Lovable, but the core issue remains Figma's need to expand its user base. Currently, Figma is favored by designers creating digital applications for web and mobile platforms, but its usefulness diminishes for those outside this niche.
• 00:30 - 01:30: Figma's New Products: Figma Sites and Figma Make Figma has introduced two new products: Figma Sites and Figma Make. Figma Sites is a website builder and content management system (CMS) that is comparable to WordPress. Meanwhile, Figma Make is an AI code generator similar to tools such as Lovable, Bolt, and Vzero. These products demonstrate Figma's strategy to expand its reach to a broader audience, including product and project managers and developers, with varying degrees of success in these efforts so far.
• 01:30 - 04:30: Discussion on Figma's Strategy and Mobin Sponsor Segment The chapter discusses Figma's strategic direction and how it is developing its platform for different user needs. The author humorously notes that Figma does not sponsor them, despite their subscription. This sets the stage for the transition to a sponsor segment which is necessary to fund the content. The chapter underscores the importance of having design references to create visually appealing apps and introduces the relevance of the sponsor in providing solutions for design challenges.
• 04:30 - 09:00: Figma Sites: Goals and Features The chapter discusses the goals and features of Figma sites, emphasizing the endorsement and positive experience of the narrator with a sponsor, Mobin. The narrator describes how they were impressed by Mobin to the extent of subscribing to their pro-tier. The narrator mentions the use of Mobin for building dashboards across various platforms, highlighting its usefulness with numerous examples.
• 09:00 - 13:30: Changing Dynamics in Web Design and Development This chapter discusses the vast array of applications and screens available in web design and development, particularly focusing on the ability to filter and search through these to find specific examples. It emphasizes the extensive database of over a million apps and 400,000 screens, allowing users to explore various app categories, including educational dashboards and components like stacked lists in crypto apps. The chapter highlights the usefulness of such a vast repository in finding inspiration and references for designing web applications.
• 13:30 - 19:30: Figma's Position Against AI and Market Competitors The chapter discusses the advantages of using AI tools for app development, particularly focusing on Figma's position against AI and market competitors. It highlights the convenience and efficiency of using such tools, like taking screenshots for building app components, and emphasizes the inadequacy of relying on Google images for finding design references. The chapter also mentions the affordability and cost-effectiveness of these tools, with a subscription price of only $10 a month alongside a free tier option.
• 19:30 - 24:30: Demonstration of Figma Make by Product Manager In this chapter, the Product Manager discusses the benefits of using Mobin as a reference tool for building projects, emphasizing its utility as a source of real-world design inspiration. Although initially skeptical about its importance, the Product Manager becomes a proponent after personal experience. Additionally, they introduce Figma sites, highlighting simplicity in understanding and also mention issues with video quality, noting lag unrelated to the user's or presenter's devices.
• 24:30 - 30:30: Product Demo Review and Competitor Comparison The chapter discusses the goal of Figma sites, which is to simplify the process for non-developers and non-designers to create aesthetically pleasing and editable websites. It highlights the advantage of using Figma sites for individuals who may not have extensive technical skills, thereby making web design more inclusive and accessible. The chapter also touches upon the reasons behind WordPress's popularity. It is preferred not because of its inherent qualities but because it allows clients to make modifications through its dashboard after the initial setup by a consultant, emphasizing its user-friendliness for ongoing content management.
• 30:30 - 40:30: Figma's Evolving Strategy in an AI-driven Market The chapter discusses the evolving strategy of Figma in the context of an AI-driven market. It highlights the challenges faced by clients, designers, and developers due to the separation of design and implementation processes. Clients often require more control, but currently, changes made in Figma need to be re-implemented by developers, creating inefficiencies. This problem represents a significant risk for Figma, signaling the need for an innovative strategy to integrate design and development more seamlessly.

Figma announces a CMS and a vibe coder? Oh boy Transcription

• 00:00 - 00:30 figure is in an interesting place nowadays. After the acquisition from Adobe failed due to intervention from the government, it seemed like they were not going to be able to be acquired ever. That is still the case, but they need some way to make money. I recently did a video breaking down a drama they had with Lovable, and I tried to focus the video on one particular thing. How does Figma grow their audience? Right now, Figma is the tool of choice for designers who are designing applications for the web and for mobile. But if you're not doing that, if you're not a designer working on applications, Figma is not particularly useful to you.
• 00:30 - 01:00 They've been trying to branch out, getting everybody from product and project managers to developers to use their stuff to mixed success. Today, they have doubled down with two new products they just released. Figma sites, which is a website builder and a CMS similar to something like WordPress, and Figma Make, an AI code generator similar to tools like Lovable, Bolt, and Vzero. These tools are very interesting and they help really show how Figma is starting to position themselves. I'm going to go through both Figma and
• 01:00 - 01:30 sites, what they're for, who they're for, and where Figma is going with all of this. As you guys know, Figma has never paid me a scent, even though I'm paying them quite a bit with an old subscription that I forgot to cancel. So, someone has to pay for this. Quick word from today's sponsor, then we're going to dive all in to what Figma has been building. Building beautiful apps has never been easier. as long as you have a good reference for what a beautiful app is. If you don't, or more importantly, you have hard UI problems you need to solve in your app, having good references is essential. That's why I was really excited about today's
• 01:30 - 02:00 sponsor, Mobin. I actually just filmed an ad for these guys, and as I was getting all the details right and started playing with it myself, I fell in love immediately and went and subscribed for the pro tier during the ad cuz I was actually that impressed. This isn't a gag. They're not paying me to say this. They would have given me a free sub if I asked. I didn't. I'm in my work browser right now, not my content browser because I went to it to subscribe because the product is really good. Let's say you need to build a dashboard for your app. Web, mobile, desktop, whatever. Here's a bunch of examples, like a ton of them. And I can
• 02:00 - 02:30 switch to different app categories if I want something specific to education. If I want to look at education dashboards, there you go. How do they have things that specific? Because they have over a,000 apps and over 400,000 screens. Yes, that's an insane level of references. With this level of filtering and tagging, too, you can search for basically anything and find a good example. How about we look at stacked lists that are used in crypto apps? I don't know, there's a ton of good
• 02:30 - 03:00 references. You know how good this is if you're building an app using AI tools? You can just take a screenshot of one of these and tell it to build something like it and you're good to go. You can filter on different screen types, too. I don't know how to explain how useful this is. I can't tell you how many times they need to like add a payw wall or a billing page or a card or something to an app and just was going through Google images trying to find something. Your design team and your edge team both deserve something better than Google images for finding references. If you think that that's all they need, you just haven't heard the price. It's only 10 bucks a month and the free tier is
• 03:00 - 03:30 super generous, too. You can take my word for it or you can look at the list of companies that agree. Mobin is a lifesaver if you need good references for the things that you are building. There is no better source of real world design inspiration. I didn't believe this was a big deal until I tried it myself. Now I am all in. Check them out today at soyv.link/mobin. I want to talk about Figma sites first cuz it's a bit simpler to understand. Also, the video is hilariously laggy. This isn't your device or even my device. This is just the thing they put out. It is what it
• 03:30 - 04:00 is. The goal of Figma sites is to make it easier for people who aren't developers or designers necessarily to be able to make their website look good and most importantly be editable by non-designers. If you've ever done consulting work before, you know there's a reason people pick WordPress. And it's not cuz WordPress is this magical tool. The reason people pick WordPress is once you have set up a client with a WordPress site, they can go into the WordPress dashboard and make changes
• 04:00 - 04:30 that might be weird and chaotic and break things a bit, but you're giving the client more control. With Figma, if you hire a designer right now and they use Figma to design the thing and then they send you the PGs of that design, now you have to hire a developer to go implement it and put it on the website and then if you want to change, you have to go through both the designer to make the change in Figma and then the developer to apply that change to the code. Not a good experience. And Figma knows that this is a thing that's going to become an existential risk to them because right now that designer, they
• 04:30 - 05:00 might lose their job because a lot of the people hiring consultants, they don't want a groundbreaking highquality design. They want something passable that looks good enough so they can get back to doing their business. That means that a lot of these people are going to be more than happy with decent 6 out of 10 quality AI generated designs and applications. As such, Figma might be at risk for that design pocket that they currently own. Cool. There we go. Okay, it looks a lot better on their website than on the Twitter
• 05:00 - 05:30 video. So, we still have all the fancy multiplayer stuff, all their crazy layout shifting, auto layout, grid stuff they just put out today. But the cooler part here isn't just like multiplayer graphics editing for a web page. In the video they showed, there's a publish button now. So you can just click it and ship the thing that you were building. And soon they have prompting coming for it where you can prompt to build the site. I did notice they didn't talk about this particularly loudly. I have a
• 05:30 - 06:00 conspiracy about why in a minute. The other part that they mentioned that isn't there is that they have a CMS coming, a content management suite. This will make it a lot easier for your clients to add a blog post or make changes to the content on a page without needing to go into Figma directly. If they can pull that part out, that'll be huge. But this again, like this is competing with WordPress. I think the role of these tools will be much clearer if we think about the flow that things would go through even like 5 years ago.
• 06:00 - 06:30 So I have a business. I want to make a website for it. What do I do? Maybe I go try to learn how to code, realize it's hard, and then say, "Okay, we need a website." So I hire a consultant. They're like, "Okay, we need a designer." So I hire a designer. So I have a designer. The designer has a design that they make in Figma. They send the Figma design out as a PNG or whatever that goes to the developer. The developer builds it, we'll say with WordPress, and that gets handed off to
• 06:30 - 07:00 me. Now, when a change needs to happen, I have to tell the designer what I want. They make the change in Figma. They hand it to the developer. The developer adds it to the WordPress site, and now I, the owner, have some amount of control where I can make some changes here. So, pretty normal flow. I think we're all somewhat familiar with this. So, what's changed? The things that changed are Bolt and Lovable and to an extent VZero as well, but I want to focus on these two for reasons that'll become apparent in a minute. Bolt and Lovable are a very different flow for building your thing.
• 07:00 - 07:30 You can import a design from Figma in both if you want to. What's more important is that I, as an owner of a business, it might not be technical, can tell this what I want. And instead of having to wait days or more for this whole loop to be completed and paying a bunch of people along the way, I can just tell the text input here what I want, I get an idea of it. This cuts the designer and Figma out of the iteration entirely. Because if I am the owner and I want the same thing, I go to Bolt. Bolt outputs a website and then I, the
• 07:30 - 08:00 owner, can look at it and make changes using Bolt. And if I need a developer to come in and fix some things, I can hire them, have them come in, tidy up the app. This flow here, this new way of a non-technical owner being able to build something is a massive risk to the business that Figma has here. Because this flow involves Figma directly in it because it involves a designer using Figma directly in it. There's a huge risk that future flows don't involve
• 08:00 - 08:30 designers, thereby don't involve Figma, and that would destroy their business. And that's why they're fighting back. Remember the video I did a week or two ago where Figma was suing Lovable for using the term dev mode? It wasn't just suit, it was a cease and desist, but the same difference here. They are clearly threatened by what Bolt, Lovable, and these other companies are doing. And for better or worse, they woke up to this risk earlier than most probably would have expected. Other businesses are going to quietly die because they don't realize this soon enough. Figma has realized it. They have some problems
• 08:30 - 09:00 though. The first problem is designers. I'm not saying designers are problems. In fact, I'm saying quite the opposite. Designers are awesome. Designers are great. The problem is that designers are feeling some existential dread at the moment because AI does meaningfully risk a lot of their work, especially full-time employed designers on a team of 50 working on mocks for random things in the application that their company builds. Those roles are going to become less important when AI tools get good enough to generate work of similar
• 09:00 - 09:30 quality. And we're getting there fast because of that. and also the general frustration that the art and design worlds have with AI. Designers don't get along with AI. As such, Figma can't really go allin on the obvious thing, which is what if Figma took their canvas and made it automatic with AI? What if I could prompt in Figma for it to make a mock? They can't do that because then they're risking losing their most important persona. They have to be very careful with how they roll out AI on the
• 09:30 - 10:00 design side because they don't want to lose the designer sentiment. If they lose that, they're screwed and they are very very aware of that. As such, Figma's focus isn't on automating on the side here. It's over here. They want to make the developer less relevant because their goal is to hold the designer and make them the individual that can build all of the things you want. So if you think of this less as how is Figma trying to win developers, more how is Figma trying to use AI to keep designers
• 10:00 - 10:30 happy, maintain their business's position in the world at cost of whatever else, it makes much more sense. Figma doesn't mind replacing developers because Figma's customers aren't really developers right now. And if they can help a designer not need a developer, they could cause a cultural shift that will allow them to survive as things are changing. As such, Figma sites makes a lot of sense. And when you see some of the features that it has and you compare it to something like Lovable, it'll make even more sense. As I mentioned before,
• 10:30 - 11:00 one of those most important pieces, it's this button, publish. All these tools have a one-click publish button. So, I can take the thing I was building and send it to somebody. That is huge, especially if you combine that button with like a domain purchasing product. You would allow for normies to build websites and send them to people with a real domain. And Figma is clearly petrified of this. But in order to better understand why they're so petrified, we should probably watch their announcement video. There's a lot of little details in here that I think
• 11:00 - 11:30 will explain what's going on much better. So without further ado, let's dive in to help you take ideas out of your head and into the real world. With Figma Make, you can take an existing design and prompt your way to a fully coded prototype. For this demo, please welcome to the stage Holly Lee, product manager of Figma Make. Okay, so as we just heard, the person coming on stage is the product manager for Figma Make. If this
• 11:30 - 12:00 has been core to their strategy for a while, you would imagine she's probably been there for a bit. How long do you think the product manager leading Figma Make has been at Figma for? And how long do you think she's been working on this product? Get a an idea in your head before she says the answer. Hi, config. All right. I joined Figma in January of this year as a PM on the AI team and it's already been the adventure of a lifetime. She's only been there for
• 12:00 - 12:30 about 4 months and the reason for that is because this is a recent bet that Figma is making. It seems like they woke up to the threat that these things had for them very recently. And that's why they're hiring people like her and building products like this. This is a recent thing they woke up to, not some long-term thing they've been planning for years. This started this year. So today, it's an honor to present to you all Figma Make on behalf of the superstar team behind it. Yeah, they
• 12:30 - 13:00 presented the input box on the stage. This is how they announced the feature, including the Claude 3.7 sonnet in the bottom right corner. I don't know about you guys, but the designers I know aren't particularly versed in the intricacies of different models and how they differ. My guess is that either the team making this is so AI pilled that they felt like they had to put that there or they have a partnership with anthropic that involved them putting that there. I think the latter is more likely. We're building really rapidly,
• 13:00 - 13:30 shipping new features and improvements every week. And while it's still really early, we're just so excited about all the ways mate can change how we design, iterate, and explore the interesting points we get to when she pulls up an example. Okay, like most makes, you're probably going to start with an existing design in Figma. So here you can see my team is prototyping a music app we're calling earworm. Note that this is a normal
• 13:30 - 14:00 Figma app that they designed using Figma. This isn't an AI generated UI. They recommend that you start with the UI already in Figma and then bring it in to the Figma make product. Again, they're trying to not scare designers. They're trying to keep designers from feeling threatened by the AI for as long as possible by empowering them to do more. They're trying to give designers capabilities outside of their norms without threatening the thing they actually do. The closest comparison I
• 14:00 - 14:30 could think of for this is something like co-pilot with VS Code back in the day. Copilot wasn't threatening to automate our jobs by writing our code for us. It was offering to help us with parts that were tedious and annoying as we did our work. They aren't doing that. I'd argue things like auto layout are kind of the equivalent there in the Figma world, but it's the same mindset of not threatening the thing that you do for a living and just augmenting it and making external dependencies of it better. Now, let's say we just want to explore how this core player element
• 14:30 - 15:00 will feel, right? How the CD is going to spin, how those buttons will feel like to click. Now, historically, prototyping even a simple design like this would have taken a lot of noodles, maybe an engineer, maybe switching to a different tool. But today is not that day. Now, with Figma Make, you can play with your designs just as you created them, all in Figma. All we're going to do is take that core player frame, copy, and paste
• 15:00 - 15:30 it into the make prompt box. And I'm just going to say, "Please make this CD player interactive. The CD should spin when I play a track." Thank you. Remember to be polite to your large language models. And because we're Figma, we're not just giving the model an image of your design. There's an important button in the corner right there. It's hard to see right now, but it says publish. It's very clear what they are going for. And
• 15:30 - 16:00 it's kind of funny when you remember this is the same company that went after lovable for using the term dev mode when they're ripping the entire user experience like piece for piece. But yeah, we're passing the design itself including all of that structure and metadata. The model can reference the layers in your design. Understand? Look at that React code. Set current track set current time duration. You get the idea. What they're for and iterate uh and incorporate that knowledge. style JSX global doing global
• 16:00 - 16:30 styles here. Fun generation. Okay. And this is a live demo. No stage tricks and models can be finicky. So wish me luck. She did not have very good luck. She showed off some other demos of things that they built, including a 3D RPG apparently. Curious to see what that ends up looking like. Uh it seems like it's just using 3JS, but my guess is it's React 3 fiber under the hood. They didn't show the code for that one sadly, so I can't confirm. But then they go
• 16:30 - 17:00 back to the generation. This time the model had a little bit of difficulty, but that's okay. Uh, all of the interactions there, but just to prepare, I had this one also made right before a stage. So, as you can see, this was our original design and make translates it pretty much one:one. But we know you'd never actually stop here. You'd keep adding things, right? Riffing on it, adding designs, adding functionality. And to give you more creative control, we've actually introduced ways to target
• 17:00 - 17:30 your edits to specific parts of the design. So, we're introducing the point and edit tool, which allows you to directly manipulate things like size, color, and font of elements on the page. And for more complex Thank you. And for more complex and open-ended edits, we also have point and prompt where you can just pass in the specific part of the design and ask the model to only make changes there. Super original feature they just demoed there. I'm sure that the edit here is very different.
• 17:30 - 18:00 Oh. Huh. I can edit the tailwind right there. I can prompt it to do different things. I can even edit the text. Please subscribe. save. Almost like clearly Figma is paying close attention to what Lovable is doing and they are building a near onetoone clone. This feature is really cool by the way. The fact that you can as a a non-technical person click edit, click
• 18:00 - 18:30 an element and modify it as though it is just like a wizzywig editor when in reality we have a code view that is actual React source code being edited directly. Honestly, pretty nuts. Lovable's built a pretty cool thing here. I can't help but notice when I hover here though, it says code view now. It used to say dev mode. I wonder why they had to change that. I thought they weren't going to. It seemed like they were fully committed to not changing it, but that is different. Curious what happened there. Yeah, you
• 18:30 - 19:00 get the idea though. There is a lot of overlap between what Lovable and Bolt offer. By the way, both has the same features. I'm actually pretty sure both had deploy first. They partnered with Netifi in order to get that supported super early. But they also have the inspector where I can click on a thing and I can prompt to change it. I don't think it has the same like inline text editing that Lovable has, but you can tell it that you want to do something different like tone down the glow. It's a bit much. And now it will on this one
• 19:00 - 19:30 element make a change. You can see how useful this would be for a a non-technical person. Maybe somebody who's not even a designer can get something roughly how they want here and then click through and tell it, I want to fix this, I want to fix that. Is it as fast as the developer doing it themselves? Probably not. But when you consider that the developer had to spend thousands of hours learning how to code, and the person doing this doesn't have to have any code experience at all, suddenly the product makes a lot more sense to have exist. And look at that. It toned down the glow nice and easy.
• 19:30 - 20:00 Make the CD spin more 3D. All right, these are only my edits. And one of the best parts of make is that it's all in Figma. So the gang's all here. What I would actually want to do is collaborate on this design with my entire team. So as a parting note, let's see how my team would take earworm. All right. Okay. It looks like the gang's all here. Earworm 4.0 has gotten quite a facelift. And it looks
• 20:00 - 20:30 like Greta and Noah have even added a real AI DJ experience. Uh, give me a song. We know a lot of you are probably prototyping and chat UI overload. We need like one more in here so I can chat. Like if this was on YouTube and we had the chat so I could talk to the video that has the AI app builder with a chat that built a chat into the AI chat. Oh god. Yeah. And I can promise you as a person deep in the music world, the last thing any musician wants, any DJ especially wants is a chat
• 20:30 - 21:00 interface. Um, and you can not only rig this up to other models, but you can also rig it up to real data sources. So, we can fetch real audio tracks for all of these uh music tracks right here. Now, my team and I have had a blast building make, and we hope you all have as much fun using it. Uh, we're only just getting started. Knowing Figma as well as I do, this is one of the earliest states they've released a
• 21:00 - 21:30 product in. Normally when they release things, they're like more demoable. Like the one demo they tried live failed outright. It seems like this is them firing a warning shot as much as it is them shipping a real product that you can use today. But that's what Figma is meant to be. All of this is Figma fighting back in a world where their product is at existential risk. I went from spending a decent amount of time in Figma to almost none over the last year and a half or so. And I know I'm not the
• 21:30 - 22:00 only one. These AI tools made it so we didn't have to have a full-time designer and we could build a real product people love. I then obviously had to bring in help for T3 Chat cuz it was not very pretty, but now it is. And that was quite an experience to get there. And Figma was not part of our design process there almost at all, which is crazy. And thank you Dom for all of the help with the redesign by the way. You get the point. Figma's role is quickly getting squeezed out. And rather than wait till
• 22:00 - 22:30 it's too late, Figma's decided to rush to show the world that they can't be killed off just yet. They're going to keep fighting back. They're going to keep trying to empower designers. And I think they're going to make a side bet of automating more design work, too. As we saw a little bit of hinted at in the Figma, what's it called? Figma site. Yeah, Figma sites isn't mentioning AI a whole lot. Yeah, AI isn't even mentioned on the Figma site learner page, but they did
• 22:30 - 23:00 hint during the presentation that in the future they'll be able to generate designs with AI, but it's very clear where Figma stands. They want to avoid telling designers that their jobs will be automated with AI. They want to show designers things that they can do with AI that they couldn't before. And I think this is going to be very exciting to those designers. I know the best designer I ever worked with when I was at Twitch, she wanted to do really good testing of her designs with users before developers put all the time into
• 23:00 - 23:30 building it. So, she learned a bunch of like basic HTML, CSS,JS stuff to make mocks of her own designs from Figma, so she could put the UX, even it was entirely mock data and didn't work, so she could throw it in front of real users to get their feedback and see how they navigated the experiences she built. Is this going to replace the developers that would have had her work handed to them? Absolutely not. But is this going to allow for designers like her to do better feedback loops? Is it going to allow for more designers to do the things that she did? Absolutely. I'm
• 23:30 - 24:00 curious to see longterm where they position themselves with this. Things like the publish button suggest they really want to go after devs and go after things like Bolt, but they also want to fight WordPress for some reason, and they also really don't want to hurt designers in the process. It's they're in a weird spot. I don't envy where Figma is today. Curious to see how they survive the chaos going on in this AIdriven world. I'm also curious what you guys think about all this. Am I overreacting here or is Figma actually behaving as scared as they seem to be? Let me know what you think. And until
• 24:00 - 24:30 next time, peace nerds.