Loading summary
Transcript68 lines
- [00:00]
Rid
It really just explodes the surface area for the types of questions that people can start to validate at any point in their process.
- [00:08]
Nicholas Klein
Whatever is most important for you or for your product. That's the part that you need to focus on prioritizing prototyping as early as possible.
- [00:16]
Holly Lee
The quality of the interaction is everything. Like, either the design is good because it feels good or it feels bad, therefore it is bad.
- [00:23]
Nicholas Klein
And now you can ask it like, make this bouncy like a rubber ball on a rainy afternoon, you know, and it's like it somehow figures it out and gives you something that like, like maps to this expression. And I think we're, that's. I think the cool thing about this is we're meeting users where their head is at instead of getting them to meet where the computer is at.
- [00:41]
Rid
They're basically building interaction tools so that they can compare a b. Like, how does it look like to bounce at this speed versus to slide at this speed? And it's as easy as literally like prompting make to add those toggles.
- [00:53]
Holly Lee
I'm literally just building my own inspect tool inside of my prototype to send to a developer. That was a aha moment for me where I was like, oh my God, I can literally do anything.
- [01:02]
Nicholas Klein
There's like a small slow wave of like, what this means for designers, for design tools that like, we're at the startup and that's pretty exciting.
- [01:11]
Holly Lee
Welcome to Dive Club. My name is Rid and this is where designers never stop learning. This week's episode is with Nicholas Klein and Holly Lee from the Figma make team. And we're going to go super deep into the future of prototyping because things have changed a lot in the last year. So we're going to try to make sense of it today and get into some real world use cases for different types of prototypes, talk about how our workflows have evolved as designers. And one thing is abundantly clear. Things are way less linear now. So I hope that you enjoy this conversation as much as I did. I definitely came out with some very practical tactics that I hadn't considered before. So without further ado, let's dive in.
- [01:55]
Nicholas Klein
The fascinating moment to me was at Config London. I was there with Holly and a couple others and we preparing for different keynote demos. It was cool, kind of like seeing everyone playing with the stuff. But Holly kind of like pulled out a couple of the demos that we had built internally ahead of the keynote, and one of them was from Tammy, one of our designers, a full 3D modeling environment. And I think there was this moment where I looked at this and we're like, how are we not more crazy about all of this happening again? I've worked on prototyping for the last seven and a half years and I think over the years we always made incremental improvements. We had smart animate here, we added interactive components, we, we added all these kind of like small fidelity improvements. And then AI ENCODE comes along and makes all of this progress feel like, like miniature. And already we got, kind of got used to that. That that's possible. Like it's possible to create a 3D modeling environment in Figma Make. Like that's, that's like, like that's ridiculous.
- [02:53]
Holly Lee
Yeah.
- [02:53]
Nicholas Klein
And I think that from there kind of like, of course the, the whole question is like, what does this mean for designers? What does this mean for the role of design? And I think there's one part that I keep coming back to is that hard problems are going to stay hard problems. I've worked on stuff where you just try to explain it to someone and you just have a hunch, but you can't really put words to it yet. You don't even know what the right way of evaluating your problem is. So you're going to end up tapping in the dark in a way, trying to find a solution that somehow works and you can't put words to it yet. And I think that that's still true. And AI will help you express your first idea, of course, and Figma make will help you build a first prototype faster. But as a designer, you'll still have to do that a lot of times until you find the right solution. Hard problems are going to stay hard.
- [03:45]
Holly Lee
So here's the thing. The last few prototypes that I've made haven't been in figma. Instead I'm using Lovable. And honestly, it feels like magic to create real software without touching a single line of code. I mean, you could literally build whatever you can come up with and it's good. Like I'm genuinely proud of the prototypes that I'm making and developers can't believe how quickly I'm able to bring my ideas to life. So this is your wake up call. Don't stay stuck in rectangle land. I mean, I promise Lovable is way easier than you think. And I'm having more fun designing right now than I have in a long time. So head to Dive Club slash Lovable to start building today. That's L O V A B L E. All right, picture this. You're in design crit, getting a Bunch of feedback from everyone on the call. And you're taking notes as fast as you can because that's what's going to fuel that next round of iteration. Sound familiar? Well, thankfully those days are over. All you have to do is run Granola in the background the next time you're talking with people on your team. That way you can relax a bit, be present in the conversation. Granola feels like a notepad, so you can still jot ideas down so you don't have to be a hundred percent reliant on AI or those creepy meeting bots. You can kind of think of it like Apple Notes, but it transcribes crit for you. You can even have a template to pull out specific action items or capture all of the questions you were asked. And I'm never starting a meeting without granola again. And I strongly believe that designers everywhere should be using it. They're offering three months free for you and anyone on your team. All you have to do is go to Dive Club Granola to get the special offer. Okay, now on to the episode. It's funny because it wasn't that long ago that we were having a conversation on this show and we were talking about how cool variables were and reducing the number of frames and cutting into the noodles. And like, I was just clicking on the community demos before this call and I was playing an interactive 3D game where I was fighting off these aliens and it was all in Figma make. And it's like, oh my God, right?
- [05:45]
Nicholas Klein
Like, it makes you think of, like, like, what were we doing back then? A little bit. Yeah. Like, it's crazy. I can. Again, I could joke about it because it's literally my own work that if I'm looking and I'm like, what was I doing there? And I think it's like, I think it's the beauty though of, of all of this is the high level goal always was to get thought and expression closer together. AI and code in this industry has made significant progress on if you have an idea and you can start to express it, you actually can get really, really far. And that's. And that's amazing.
- [06:13]
Holly Lee
I don't want people to think that Figma is always every single time the right tool for the job, though. So, like, how should designers even think about the types of prototyping formats? Like, what's your strategy for what to reach for and when.
- [06:28]
Rid
It's funny to hear, you know, you two reminisce on the former conversation you had about prototyping together. Those are the old days. I think that what's very notable here is that like, it's interesting that Nico worked on that version and is also working now on Make. And so the DNA of prototyping, it's very important to us that like we are taking a very design centric way of building out tools for designers for these types of use cases. To answer your question around what type of tool make is, I think the really beautiful thing about it is that because it's so accessible, because all it takes is like an existing Figma design you have, or even just like idea that you want to articulate in two to three sentences and you can bring it to life in a way. Our goal I think is just to add that into a designer's arsenal and just make that an option when it wasn't one before. And you know, it's worth also noting that 2/3 of Sigma users are not designers. And so there's a huge population of folks that are maybe a little bit more native in ideas and in sketches that now also have their own kind of mechanism for prototyping and idea production that like wasn't as easy to them before. And we're really, really excited about essentially the, the Cambrian explosion of creativity and ideas that will come out because of, you know, the introduction of something like Make.
- [07:49]
Nicholas Klein
And I think the other side too is we, we just launched, or just a couple of weeks ago launched Code Layers as like the first time the make technology is actually integrated into an environment in which designers are more like intuitively at home. Like Sites is an open ended canvas. Right? And one of the biggest questions there was how do we get code and AI in a way that feels intuitive to designers as a way that it extends their workflow. Right. If you think about make as something that is really good at creating the entire prototype from scratch, sometimes you don't want to create the entire thing. Maybe you already have a bunch of stuff and you want to extend it with just this one element here to be more interactive. And that's something that we brought make into Sites as Code Layers. And the biggest discussion here with a lot of the engineers was, wait, we're bringing code into a canvas based design tool? How do we do that? And I'm not kidding, there's a slack thread. We actually talked about this at Config in one of our deep dives. There's a slack thread with 400 replies, 400 plus replies that went on over multiple days because we were talking about how should we integrate code into a design tool in a way that Fits to designers needs for iteration, exploration and alignment. Whereas code, because it's generally used for production, is more about don't repeat yourself, components first. And so the biggest discussion was I create a code layer and I duplicate it. Do I get another version of this or do I get an instance of this? Because under the hood it's a react component. So what engineering uses as terms for code inside of a design tool and what designers use for this didn't really match. And there was a lot of discussion going on on how we can make this work for designers, but also have a system under the hood that is like actually a solid foundation for how code works within a design tool.
- [09:45]
Holly Lee
You said a word extension that I really appreciate because there's almost this strawman that I see in the design community from people who are a little bit less excited to adopt code based explorations in that oh well, you know, AI just creates this generic slop and it's like well, well yeah, like if you're maybe don't have the design skills and you come in and you just type those three sentences, it's probably going to look like AI. But nothing that I make with prototyping tools looks like AI because I'm trying to recreate the pixels exactly as I've made them in figma. Like they're my designs. And so having that extra level to my explorations, but it's still rooted in what I'm bringing to the table as a designer was definitely an aha moment in terms of how you are positioning the feature.
- [10:32]
Rid
And just to add to that, I think one thing that we feel super, super strongly about with MAKE is that it is brought to you by the same ethos and spirit of figma, which is the understanding and appreciation that designers are the source of creativity. And so one of the key parts of figma make's kind of value proposition is extension of your design process. Meaning when you have a design, you can just copy and paste it into make. Have make kind of go off of your design and kind of work with AIs as a collaborator instead of just showing up kind of empty handed. And that way we have found that it kind of complements the designer's workflow a lot better. But we're finding that like designers have these really, really kind of large and messy canvases. We're excited about the way that MAKE can just be an additional way that you can take those designs multiple frames at a time, bring them to life in make, and then be able to show those prototypes as part of your design. Crit.
- [11:32]
Holly Lee
I want to get ultra specific, and I'm going to talk about my workflow, but I know that I'm not alone, and I'll let you know. One of the things that I'm wrestling with as someone who is like the rest of the industry, trying to figure out how do I make sense of where these AI tools and new capabilities fit into how I operate? I'm a designer who, per usual, I like to make a big mess, right? My figma files look like the Charlie Day meme. It's absolutely absurd. But I'm prototyping in real time. I don't treat prototyping as this thing that I do. Once I have the design figured out, I have my monitor here, I'm making a mess. I'm playing with little interactions, and I have the prototype mode on my computer and I'm like, okay, yeah, I don't like how that feels. Let's do. Let's try something else, you know? So it's like very much intertwined, this act of putting pixels onto the canvas and then seeing how they feel. And one of the challenges for me has been at what point do I make the jump, right? Because, like, it is a jump. Once you go in to make land, there's a little bit of upfront effort that's required to, like, get it up to speed and, you know, at the point where it feels real. And so. So it's like there's still kind of this line in the sand, and sometimes it's. I don't know if it's like, at the very beginning of my process or at the very end of my process. And there's not even really a question there. But I hope that people listening resonate with it, because that's one of the things that I'm really trying to figure out is, like, when do I start using these tools? When does it make sense?
- [13:00]
Nicholas Klein
The answer is it depends, honestly. Right. And I think there's. Or there's two parts to this, right? On one side, it, of course, depends on how you intuitively express your idea at first, Right. Sometimes you start with something where it's like, oh, I think I can describe how this works, and I can't imagine what a UI or what a behavior for this should be. Then you're starting with words, and then you should start in make right. But sometimes I've been at other problems where I literally cannot describe it. I have a vague sense in my head, right, of like, I think if we do this this way, and then you click on this one Then I, and, and, and in those moments I, the only thing I can do is, is, is like feel my way through it, if that makes sense. And I have to create a design by hand, put the things on there and then create a duplication of that. And I basically be like, okay, if I click on this one, then I go here and then I click on something else and then I go to this other state. And then slowly as I'm kind of like illuminating the room, it's kind of like this, this, this fog of war that you see in computer games kind of like clears up as I'm uncovering the different states that this, that this thing should be in. Then I suddenly find the rules and systems or the descriptions for how this should work. And maybe that's the moment in which I kind of like try to then describe it back into make. Right?
- [14:20]
Holly Lee
Yeah.
- [14:20]
Nicholas Klein
And so I think those are the types of things where there's different ways of expressing your idea. We're at version one of make and Figma Design, right. And it's our role to blur those lines more like we did with Code Layers Insights as a first step. But yeah, you shouldn't have to have this feeling of now I'm switching roles, I'm switching tools, I'm going into this other world. It should feel a lot more integrated in a way that you can express in the way that makes the most sense for the problem that is right in front of you. And throughout the design process that changes. Right. The problem right in front of you is always a different one. There's always a slightly different one. Sometimes you have to go into like vector editing mode or draw a little icon to kind of like see if that helps the communication of your idea better than a MAKE prototype. But sometimes it's the interaction flow and then you want to kind of like explore what a high fidelity interactivity piece should be. So I think the biggest thing to me is that all of this flips the design process that we've kind of like seen in the industry. We've talked about this last time too, of like I'm designing and then I'm prototyping entirely on its head. Because if you have an idea just how it should work, but you don't know how it should look like, start with a make, right? If you know what it should look like, but you're not sure yet how it should behave, start with just designing and then put it back into make. And I think that it depends on what's exactly ahead of you. And we need to. It's our responsibility to make it fluid.
- [15:54]
Rid
I think there's two pieces of that, that that answer, which I just want to highlight. The first is like, as Nico mentioned, we're really, really excited and there's a lot of work to be done to make make in your existing figma workflows feel more seamless. So much really, really exciting stuff that we're thinking about and working through there to kind of really motivated by, you know, questions like the one you just posed to us. And then the second piece though is just kind of at a more meta level. I think that these AI tools are also introducing kind of new ways of validation and new ways of like thinking through a design process. Meaning, you know, Nico gave a really great example of like, if you don't really know how something's going to work, maybe you want to prototype it first. And like, what I've literally done before is I don't even have the designs yet, but I tell make, like, use colored boxes to represent X and just show me at a high level, like, how would this thing kind of like swing in when I click blank just to make sure the mechanics make sense in my head before I go to actually sketching it out. On the kind of other end of the fidelity spectrum, you could show up with a hyper, hyper specific dashboard that you've designed down to the button, bring that alive and make and just fixate on like a button hover interaction. And you could do that too. And the reason why I'm really excited about this is because it really just explodes the surface area for the types of questions that people can start to validate at any point in their process. I would want to make sure people realize that with tools like make, you can be really, really creative at what stage you're exploring. And it can be the wireframe stuff as well.
- [17:37]
Holly Lee
Just to clarify. So you are prompting make to say, hey, keep this at a wireframe level. I don't want this to feel high fidelity. I'm only going to experiment with the interaction.
- [17:47]
Rid
I literally say keep everything as gray boxes. And I just want to see like when I like drag this box, like, how is the movement of the other boxes going to change, right? And just like to validate. For example, like a. I don't even have the right words to describe it, but like the liquid movement of how the other things are going to move around this thing as I drag it. And you can keep those as. Yeah, I've literally said just like keep them as gray boxes. I just want to figure out what this interaction is going to look like. And then once I validate it that that works in code that feels good for me to use, then I will go and like actually figure out like the design specifics.
- [18:26]
Nicholas Klein
I really like what you, what you said of like mechanics. Right. I think there's like there's so many different dimensions of quality of software. Right. There's like the mechanics which I think covers a lot of stuff around like interaction behaviors, maybe some animation details. Right. There's kind of like the visual parts, of course, there's the information architecture, there's also the like the edge cases. How does it react when kind of like data comes in, right. And you can ask make to pull in real data into a prototype. And I think the part is that whatever is most important for you or for your product, that's the part that you need to focus on prioritizing prototyping as early as possible. And again, right, it's not a linear low fidelity to high fidelity, right? Because if you zoom out the prototype that Holly just described with gray boxes, is it a high fidelity prototype or a low fidelity prototype? Because visually, visually it's low fidelity. But into action design wise, it's actually really high fidelity.
- [19:19]
Holly Lee
Really high fidelity?
- [19:20]
Nicholas Klein
Yeah, really high fidelity. So that's kind of like by this one linearity fidelity thing I've always struggled with. And it's like that just doesn't make any sense, right? It's more like a skill chart. You want your design to be good in all of those skills. But previously it's like, oh, I'm going to sketch on paper, then sketch a wireframe. But maybe that's the moment where you make something interactive. Because maybe the thing that your problem ahead of you is actually pulling in real data and seeing how users react to that real data. And that's more important maybe than the visual style, because maybe the visual style is a native,OS representation. Right? You're not going to design and explore visual styles. You're going to design how the data comes in and how users react to this. And that's the thing you're designing.
- [20:01]
Holly Lee
I really like thinking about different axes of fidelity. And it reminds me even the other day I was prototyping a suggested follow ups action inside of this chat ui. And it's very simple ui. You know, it looks exactly like what you're picturing in your head. It's very simple, but the quality of the interaction is everything. Like either the design is good because it feels good or it feels bad, therefore it is bad. And so playing with that was really Only possible using code prototypes. But also on that, like, you described it as like, the skill chart. Right. I'm not really great at interaction design. Like, I can hold my own, but I don't even have the ability to articulate what I want necessarily. And I've come to realize that that's actually a feature, not a bug, when you're in a tool like make. Because I can use language that it doesn't really even map to CSS or framer motion or anything like that. It's just like, make it feel kind of like this. And then something happens. I'm like, oh, that was cool. I didn't think of that. Well, actually, maybe can you take it a little bit further and go like this instead? So I'm creating really fun interactions for the first time that previously, not only did I not have the skills to be able to make, but I wouldn't have even had the language to communicate to an engineer to try something like that.
- [21:22]
Nicholas Klein
And especially, like, that's something. It's been so interesting to me because when we last were here, we were talking about advanced prototyping, right? And it's about. Here's a trigger, and you can use variables, and there's a set of actions you can do, and you can have conditionals, and you can check those things. And we're like, yeah, we just built a programming environment, but, like, visually, right? But it still was hard, right?
- [21:43]
Holly Lee
You made me teach, like, thousands of designers. If then statements. I spent a whole summer figuring out how to teach it, and now we're.
- [21:49]
Nicholas Klein
In makeup, and now you can ask it, like, make this bouncy, like a rubber ball on a rainy afternoon, you know? And it's like, it somehow figures it out and gives you something that like. Like maps to this expression. And I think we're. That's. I think the. The cool thing about this is we're meeting users where their head is at instead of getting them to meet where the computer is at. That's such a big flip in how people express interactive behaviors in any of these other dimensions of software rather than visual. I think that's beautiful because you have a sensibility for the interactions you want and the interactions that feel good. You don't have the language to describe it at the computer level. But that's the beauty. That's what the beauty of AI generating code for you is because it takes in a truly natural language of a bouncy ball when I click on this button. And we can make that work.
- [22:40]
Rid
One really interesting kind of observation that we've seen from users is that so many makes are actually. They're building in essentially interaction playgrounds in their makes. We're seeing a lot of examples where designers are prompting like give me a bouncing toggle, give me a sliding toggle, give me a this toggle, give me a bunch of different controls to control the speed of the bounce and the bezier curve of the bounce and yada yada. They're not proficient designers in css, kind of like hover interactions or X or Y or Z. And they're using make in a meta way to essentially nail the exact degree and detail of a bunch of different interactions. They're basically building interaction tools so that they can compare a b like how does it look like to bounce at this speed versus to slide at this speed? And it's as easy as literally like prompting make to add those toggles. We actually had one of our demos at Config London, was a designer, had built like a 3D credit card rendering and had built all of these different controls around shimmer and speed and X and Y and Z. And then also asked make generate the code once he had kind of nails those interactions that he could then just like copy and paste. And so again, like very, very meta ways of bringing in entirely different capabilities to your design. And it just comes down to how creative you are with with make on.
- [24:02]
Holly Lee
The generating the code piece. Something that I did actually right before you all released Figma make that it kind of just worked. And I've brought it into my practice of how I use these prototypes now is after I get it to the point where I have something interesting. And this one I was working through some theming logic and it wasn't as much like interaction level code. It was very much so, like, how does this system work? Because there's a lot of conditional things happening. And. And so I was like, okay, cool, this works now. And I was like, okay, I'm going to send a developer this link. How do I communicate this? And I was like, add a inspect tab at the top and break down exactly all of the logic and format it for developers. And then I was like, sick. It just worked. And I just sent them the link. And then I was like, oh, there's a bunch of this array of gradients. Make it so you can one click copy the CSS for those gradients. I'm literally just building my own inspect tool inside of my prototype to send to a developer. That was a aha moment for me. I was like, oh my God, I can literally do anything.
- [24:59]
Nicholas Klein
What Are even we do it as design tool authors. Right. If you can just design your own inspect panel. Right.
- [25:04]
Holly Lee
Can we talk about more examples? Like I want to get into your heads as the people that are doing a bunch of user research and seeing how people are using this out in the wild. And again, I know there's people listening that are like, all right, I know that I should be doing something, but I still don't exactly know what I should be doing. So are there other slam dunk use cases that you've seen where you're like, yeah, I mean, it just makes so much sense if you're working on this type of thing or at this type of stage or in this type of situation. Figma MAKE is going to be the.
- [25:33]
Rid
Way we're in kind of conversations with users every single day and learning from them. And especially at kind of like larger organizations and large teams, you know, the workflows are completely different than if you're just kind of a freelance designer. One really fun example is that like, you know, a designer was saying, I used MAKE to absolutely like nail the interaction of like this button that I need to add to this product. And then he said he duplicated it and then he has a version where he's just actually asking make and ideating on like crazy, crazy like non design system versions of this button. And he basically is going to crits with both using MAKE both to show kind of like the real thing today that it should look like. And then a version where like if we changed and we migrated off of X, Y or Z, this is how it could feel. We're actually hearing a lot from customers that they are using MAKE and kind of like at least these two tracks. One is like, help me prototype exactly what I have today and then help break the bounds of what we're doing today by 10% and then by 20% and explore kind of like adjacent territory from what we have. And that they actually have these dedicated tracks in their workflows now and sometimes even dedicated teams that are using make in those two different ways, which I think is really, really cool.
- [26:53]
Holly Lee
I was at a demo day in San Francisco, I guess maybe last month for South Park Commons, and there were 14 companies that went up there. And I'm not kidding, I bet 11 or 12 of those companies had some sort of AI chat in it. Yeah, like you can knock on it all you want, but the reality is like that's the pattern of the era. And as it becomes increasingly popular, like you have to, you gotta make it feel real. Especially if you're getting feedback on it, right? Like if you're gonna get feedback on anything that happens dynamically with AI, you can't do it unless you are sending a link that behaves and looks and feels like the end product.
- [27:33]
Nicholas Klein
One example I've seen that I think shows the power of code with code layers and in make right is you can access the device, tell behaviors, right? And so in this case here I have one that guy, one of our design managers has built where it uses the gyro sensor of the phone to kind of flip through a bunch of these images here. I think this shows the ability to ask for anything, right? But also be able to tap into the native material that is code. You're not constrained anymore to what we have built interfaces for in Figma design. Essentially I have asked to kind of like have like a thing where I have to like select five elements and it would send an event. Basically I asked it just to like send an event. And then I had a, I had a little completion bar at the bottom and I had to press those five in rapid succession to complete the bar and kind of like build a little game. And those were like five different code layers that I ended up letting them communicate with each other. Did we have an interface or a feature like, we've been thinking about something like Events, of course for the longest time, but we don't have a feature for this. I looked into the code and it was just using the JavaScript events feature and it was just building it for itself. And then I think that like it's related to what you said earlier with the Inspect panel, like building your own inspect panel. I think the beauty of code layers and insights is it's an escape hatch, right? You can do anything you want, which puts you a little bit into a decision paralysis as well. It's like, what the fuck am I going to do now if I can do anything I want? But I think that's kind of like the power there is. Just try, try and duplicate a code layer, try out something else and see. And yeah, you can. If you publish your code layer or your makeup, you can access kind of like the native camera, you can access gyro sensor. Like all of those things are at your disposal now, which I think is like, it's just astonishing that that's just there. It's like waiting for you right under the surface of all of these pieces.
- [29:30]
Holly Lee
I'm a big believer in the power of video to explain my thinking as a designer. So when it's time to get feedback I'll drop a loom link in Slack and another link to a Figma prototype and feedback will be scattered everywhere. Everywhere. And I mean, it's a mess. So I'm building the product that I've always wanted to exist, and it's called Inflight. You can kind of think of it like an Async Crit. It's an easy way to share a video walkthrough along with an interactive prototype or whatever you're designing, and then AI interviews the people on your team to get you the feedback that you need and organizes everything for you in a beautiful insights page. So right now I'm only giving access to Dive Club listeners. So if you want to be one of the first to use Inflight, head to Dive Club, slash Inflight to claim your spot. We've talked a little bit about how this impacts the individual designer workflow, but I kind of want to zoom out for a second and given all these changes at the individual level, when you're talking to teams that are making use of these new prototyping capabilities, how are you seeing it evolve? The way that collaboration happens and how the design process itself has changed?
- [30:37]
Rid
Even there's excitement around both the increased speed with which they can show concepts, but also the kind of new ease at exploring fringe ideas that they never really had the time, bandwidth or ability to do before. And so, as I mentioned before, we're seeing designers do both prototyping existing kind of designs to bring to Crit faster and show kind of the behaviors, and also exploring new design directions at like increasing velocity. Now, what, what that means for the change in a design process, I think is it's still early days, but what we're really excited about is that, you know, Sigma make exists within kind of the existing Figma workflows, meaning that like, people are being able to share with their teams in the same way and it's all kind of in that same ecosystem. And then on the other hand, you know, like PMs and developers are also a huge part of, I think Figma makes potential. And as we referenced earlier, we're seeing also actually with a lot of our users that it's PMs who are being very, very vocal about their excitement and their use now of make in their workflows, meaning that they no longer necessarily feel like they need to wait upon a designer to get something done and polished before they can weigh in, that they now, because they have access to Figma designs as well, start being a part of that kind of product design flow and ideation. Process both earlier and in an entirely different capacity.
- [32:17]
Holly Lee
When everybody can contribute in design and code, it does make you kind of wonder, like, where does PM live and where does design live? And Nico, I know you made the switch to PM recently, and it's part of me is kind of like, so what?
- [32:31]
Nicholas Klein
You know, I think there's this beauty there where good ideas. That's something we've been talking about at Figma for years, right? Good ideas can come from anyone, right? And we need anyone to be able to express their ideas, depending on however that might happen, right? Like, we launched Raw and I've been just astonished with how many people are creating illustrations where I'm looking at them and I'm like, I know that this was theoretically possible now, but this is so wonderful, right? And I think that there's so much from so many other people that they should want or like they should want to express their ideas, and it's beautiful that they can. And I think that that's the part similar to the different axes or different dimensions of quality is different people have different views on software too, right? And I think it's our job to find a. To create a platform in which they can collaborate well. Right? And in that case, right, it's that. But one thing that has been really, really interesting to me is seeing how people look at code layers within sites and they look at make as essentially a file type right now. And it's the same technology and we surface it as a file type and we surface it as an element that is powered by AI and code, right? And so it's the same technology, but the perception, literally by having this in slightly different contexts, it's wild how it changes how people look at it and how different roles look at it as like, is it for them or is it for someone else? Because I think that when we. When we had code layers in our internal betas, of course, or in our internal staging versions, people were kind of like playing with this and we're creating elements for sites, right? And then we surfaced it as like a make file and people suddenly started asking it so much bigger questions because now they're going to the file browser and they're clicking New make and then they're presented with an input field and then they're starting their brains go wild and they're starting to ask about all these different possibilities that's there because that's the only thing you can do in Make. And there's a lot of value in having these different kinds of entry points and meeting users where they are with their idea. This is the first version right where we are today. But I think that shows a little bit about the range of how we can leverage AI and code in different ways. It's not one workflow to rule them all and replace everything you have ever seen. Because as we talked earlier, sometimes you got to feel your way through something and then AI isn't the right job because I can't fucking describe it yet what I'm trying to do. I need to just do it and then take a step back and be like, what did I do? I know that this was right or that this was interesting, but I can't describe it to someone else yet. And if I can't describe it to someone else, I can't describe it to the AI on what to repeat there. And sometimes it's the other way around and different users come at it from very different angles and we need to meet them where they are and find ways that the PM can collaborate then with the designer, can collaborate with the developer. And one of the things we've built in code layers is that if you duplicate a code layer and somebody has chatted with it, you see the entire chat history. In a way, it's actually closer to like a group chat than it is to like a single AI chat that I have. And we could be in a design file or in a sites file and you chat and ask the AI something and then I see, oh, it's working now based off of Ritz question. And once it's done I can ask it a question. And all the while the other thing we enabled is, is collaborative code editing as well. I think that like kind of flew under the radar a little bit. Right? But developers can support designers in writing code into the code layers. It's a full blown code editor inside of Figma. Like we also launched that, like, I think that's the part when it comes to collaboration that shows a little bit. Like you can express your idea by drawing something insights, you can express your idea by asking the AI to create a code layer or you can just write code, right? And like you can write code in Figma. And that's the small news of the last couple of months, right? And I think that that shows a little bit that like depending on who you are, depending on what skills you are, we need to find ways for you to express your ideas.
- [36:50]
Rid
We had a huge off site a couple weeks ago with a lot of big brains in the room trying to come up with the future of a very specific part of our roadmap that was very heady. It was very, very abstract. It had to do with like moving X to Y, flattening A to B, then being able to do C on top of D. It was like very like people in the room.
- [37:13]
Nicholas Klein
I love the description.
- [37:14]
Rid
Yeah, exactly. People in the room with PhDs were like, oh my God, I cannot follow what is going on and what does that mean for how the design of this, when we surface this to users is going to look? We didn't have designs yet, right? This was part of a conversation that happened over two days and I went to make and I basically wrote down the prd. I was like, this is what a user should be able to do and this is everything at a high level. I pasted in the existing MAKE UI and I was like, just allow me to do this capability. You can be as opinionated as you want on the ui. I just need to be able to click on that button to see X, to see Y, to see Z.
- [37:54]
Holly Lee
Just to be clarifying here really quickly, you had basically no visual intent inside of that prompt.
- [38:01]
Rid
No, just existing MAKE UI as a sigma frame attached. And then like what I needed to be able to do at a high level, what we were trying to evoke out of this new product direction and, you know, MAKE outputted something within, I think three back and forth messages that I then shared with the rest of the crew that immediately allowed us to visually grok. Oh, that's what happens. I wish I could tell you the specifics, but like, you can do this very complex thing and then press that thing and have another very complex thing happen. But here's how it looks visually and here's what a user might want to do next. It wasn't obvious until we just had a version of it that we looked at. And the crazy thing rid is that it took less than five minutes. It took less than five minutes. We shared that artifact around. You know, the designs for that maybe look very different today, but. But the, the beautiful thing about it is just like the basics of the workflow we understand and sometimes I think it really helped kickstart the team on the possibility and like the immediacy of this because we were looking at it and we were playing with it. The prototype was real. You could click that to do X and do Y and do Z and it was live. We played with it.
- [39:11]
Holly Lee
It's cool too, because the goal at that point isn't even being correct. You know, like you might fundamentally be wrong about how it should be implemented, but you've given people Something tangible to point at and use and be like, well, I hate it for all of these reasons. Great, we've made progress, we know what we don't like, you know, and sometimes it's very difficult to even get to that point without having something in hand.
- [39:33]
Rid
The one thing about you saying like it wasn't correct. Obviously the code under the hood was just, you know, there to allow us to perform the basic mechanics and the UI get added like a color button that like we would never have or you know, X and Y and Z. And it didn't look quite right. However, you know, one of the new features we've launched is this new style context feature which allows you to essentially add a library to your makes. And while it's not pulling components yet, what it is doing is having make extract the css, you know, the fonts, a bunch of other really, really critical kind of styles, and then just adding them and appending them to a global CSS file in your make. What we're really excited about with that is that even in a world where people are just exploring ideas that they don't have designs for yet, this is essentially creating like a foundational level of aesthetic consistency with the rest of your products, which I actually think is quite important even in the brainstorming ideation phase that like, oh, this kind of looks like my company, this kind of looks like my brand or my team. So what you're seeing here is that down here I have Colab, which is a library, it's a design system library that we've extracted and then I've not attached any designs. I've just said make me a desktop signup flow. And this is a pretty opinionated using my Colab Con logo, using the right fonts, the colors, and it's creating me a signup flow that looks like what that design system might evoke, which is really, really cool. If you ask it to make you a desktop signup flow without a style kind of attached, it's going to give you like black and white boxes and something really, really generic. And this is really powerful that like right out of the box you can start ideating with something that looks like everything else you're designing and making in Figma. One of the other things we're really excited about is here I've just attached a completely separate design and I've just asked it to translate this design into the collab style that again you can see here I have in my prompt box. And this is just a completely one shot output. And so really, really excited about the infinite kind of translation abilities that this new feature also gives designers, which is like, if you don't have an existing design, you can now create anything you have in your mind in that style. And if you have existing designs, you can now translate them into infinite different styles that you have. If you use our kind of Libra.
- [42:14]
Nicholas Klein
Extraction feature, we're like two months post config, right? I think that's like. It's like, probably there's this feeling of like, oh, we're like, at config and let's like, slow down, right? Because it's like. But I think that's been like, the cool part. Seeing that too, is just kind of like how rapidly we can just keep going on a lot of these pieces. And I think that for me, seeing that config moment was big because at that point it was like, okay, this stuff is out. Let's go. Right? Because I feel like in the weeks before, we. Of course, we can't. There has to be one big announcement, and now we're going. And like, yeah, the design system theming is the first. And it's cool. It reminds me of the Studio Ghibli trend that happened where I'm able to convert things into another style, and it's sick.
- [42:59]
Holly Lee
Secretly, the thing that I'm most happy about in terms of the impact that all of this new AI tooling is having, is I'm finally being rewarded for being the really organized designer with my libraries, my auto lay, my habitual naming of layers. And all of a sudden, that's like the most valuable context for the model. And I'm like, I knew it. Like, I. I knew it. I knew it was going to matter.
- [43:24]
Rid
Oh, my God, you're ahead of the curve.
- [43:25]
Nicholas Klein
Maybe that's why I became a PM now.
- [43:29]
Rid
He chose poor design hygiene. He's like, can't. Can't keep going with this.
- [43:33]
Holly Lee
Just sitting in rectangles in groups. Like, it's 2015.
- [43:37]
Nicholas Klein
Maybe not groups. I wasn't. I wasn't as much as a group. A group designer, but okay, good. But, yeah, no, and I think the other thing, too, to the examples, right? I think the other thing that we're like, thoughts that we're just overlooking in a way, too. It's like, I'm pretty sure that all of those checkboxes now worked and all of those sliders were working. How nuts is that? They just all work out of the box. And it does that too. There's so many aspects here where, like, oh, yeah, it converts my designs into functioning Code and makes it look correct.
- [44:06]
Rid
Oh.
- [44:07]
Nicholas Klein
But it also makes all of those things work. And I think there's so many aspects where, like previously in the past, right, we've built inactive components. For you having a checkbox, the checkbox.
- [44:17]
Holly Lee
Is the perfect example of when it's like, this is actually the hardest thing to prototype without.
- [44:21]
Nicholas Klein
Radio buttons are really annoying. Like a checkbox, right? It's two states. But like a radio button group is like, there's these things that are better in code to describe in code and behave in code. And I think that's where a lot of the future is going, where you can work with the material that makes the most sense for the problems at hand. And I think this just shows this too, that all of this got converted, it's working, right? There's a small slow wave of what this means for designers, for design tools that we're at the startup. And that's pretty exciting when you think.
- [44:54]
Holly Lee
About what this means. We've obviously covered a lot of the short run stuff. Is there anything rattling around in your brain where you're thinking about where might this be headed given the types of things that you're exploring internally? I know you can't talk at a feature level, but in terms of the way that it impacts the industry, the role of design, the defensibility of the role in the long run, even anything come to mind there that you want to share with us before I let you both go?
- [45:19]
Nicholas Klein
I think defensibility is maybe the wrong words, right? I think because it feels like it's like, oh, this is my little kingdom and I'm going to do it by myself. But since we've talked about these different qualities of software, right. Ideally we can build a space in which the different qualities of software can be worked on by different people that are good at these qualities of software. What you said you're not good at interaction design, I'm not good at visual design. We should be able to work together and we should be able to leverage Sigma's entire platform in a way that brings the best of each of our strengths together into a workflow that feels even more collaborative. Right. And I think that there's just parts where AI and code in particular is something of like a glue that might bring us closer together rather than create this, like, unicorn designer who is now doing everything by themselves. So I think that's the part about collaboration that I'm actually really excited about, is more people working more together rather than a single person doing it all by themselves. And I think that's important for teams and for enterprises. Because in the end, design is about alignment, right? Design is about figuring out the 999 ways of not to fucking do it, right? And that's what you need to get to as a team as well. And then I think the other part is that I said this earlier, hard problems are going to stay hard. The details are still going to matter, right? You can describe something, you get a functional version out of this, and then there's still 15 other small questions. And then you answer those and it's like a hydraulic. And there's like 30 more small questions that you need to answer. The details still have to be decided and they still matter for the end user, for things to feel intuitive, right? And so I think that the part is that we're going to see more collaboration, we're going to see more interactive patterns and behaviors as a way to sharing things out. Designers are at the perfect point because they've been doing a lot of this just by hand, right? They've been figuring out all the edge cases, they've been thinking about all the different ways that certain things do, but so did developers in a different way that kind of like goes full circle to, we're going to see more collaboration with AI and code being a glue that pulls people together.
- [47:38]
Holly Lee
I love code as the glue. It's the only way that you can standardize output within a software team, because at the end of the day, the code is what ships. And so the only way to all be contributing to the same thing is you have to be playing in code. And if people can do that, then you're right. You can just insert yourself at the point where you are most qualified or most interested, and there's an episode that maybe will ship right before or after this. I'm not actually sure, but I was talking to a designer who has a motion background. They're working on this animation, and instead of doing something in after Effects and then lobbing it over the fence and saying, good luck, developer, they just started making a shader. And it was a way that they could bring that artistic spike that they offer, but contribute directly to the thing that the engineer was already working in. Instead of having that one engineer have to do the full spectrum of output and probably drop the ball on the shader, at least from an art direction standpoint. And so code as the glue, code as the standardizing layer within a software team is a really, really interesting way.
- [48:42]
Rid
Of framing that concept as we look to the future. Figma make lives in the context of also figjam, figma, Slide, Dev Mode, draw, all of these other tools. And not only the platform of figma, but also again, the fact that there are designers in figma, but the entire rest of your team is there. The PMs, the UX researchers, the marketers, the developers. And so, as we look to the future, I think one of the really, really beautiful things that you both have so astutely observed is that there's so much beautiful work and context that lives within figma and the rest of your team. And I think one of the really exciting things for MAKE is that that is a lot of surface area where we can show up at the moments that matter most and just be for any type of person on that team and at any point of that workflow across any of those products. When is the best time to be furthering an idea? And furthering an idea can mean a lot of different things, as we've discussed in this today's session. And we're just really, really excited to see how MAKE can kind of become that really, really accessible way of kind of standardizing what it means to be part of the product and design process and lowering that, that barrier for people.
- [49:59]
Holly Lee
I'm excited to see where you take it and it's not hard to imagine the different ways that it can weave through the rest of the product suite. So I will be buying your IPO and rooting for you as a future stockholder. So thank you for coming on today and just hashing it out honestly and talking about all the different ways that this is changing things and giving us a glimpse into what you all are observing in your own research. It's been honestly just a lot of fun, so appreciate you two taking the time.
- [50:27]
Nicholas Klein
Thank you so much for having us.
- [50:29]
Holly Lee
Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly adding asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobin is how I find design inspiration. Paper is how I design like a creative. And Raycast is my shortcut every step of the way. Now I've hand selected these companies so that I can do these episodes full time. So by far the number one way to support the show is to check them out. You can find the full list at Dive Club Partners.