Brand designer reacts to new Figma features (Config keynote watch-along)

Figma just released a bunch of new features and I've got no idea what they are because I haven't watched the keynote yet. So, I thought it might be fun to record my reactions as I watch the keynote and I'll be sharing my thoughts on what these features mean for marketing and brand designers specifically. Figma often focuses on product designers, UIUX designers, but it's obviously a tool that those of us on the brand and marketing side of design also use. And so, I'll be sharing my thoughts on the impact of these features for us. So, if you like me weren't able to actually go to config this year, I hope you enjoy following along with me. It's a long one, so we're gonna watch it on 1. 5x speed. And uh let's dive in. Welcome to Hi Dylan.

I do definitely have FOMO that I'm not in this room right now. I only got to go to config one year. It was a great event. Okay, I think we're going to jump to the new thing. So, let's skip forward a little. Okay, four new products. I know about one, but I don't know what the other three is. You're going to hear about a lot of new features and new services in Figma today. But please, please know that we're working just as hard to make sure that we keep up with the quality and the performance that you expect because at the end of the day, we don't want your focus on Figma. One of our foundational principles from the start of Figma has been that Figma needs to get out of your way. We want to make sure that you're able to do your best work and not That's the thing, right? Like I swear when I use an Adobe product, it feels like it is working against me and it's actively trying to prevent me from doing what I'm trying to do. doesn't feel like but ra design is more than just pushing pixels. Design is leading with curiosity. What is this leading to? It's asking and reasking what if. It's obsessing over the details because clearly this is like teing up for one of the new products, right? It's pushing what's possible. In a world where AI makes it easier than ever to build software, design is becoming more essential and more powerful. It's craft, its quality, its point of view that makes a product stand out and be loved. That makes me think they're not leading to an AI product is to help you all explore even more ideas and help you go from idea to product as fast as possible. And for this year's keynote, I want to give a special to uh Coto Studio almost all the We worked with Cotto on the kit rebrand and I am very much looking forward to seeing if makes an appearance in any of their examples because they did like give me a heads up that they've been working with Figma and they asked for my permission to use our brain for some we all of us care deeply about and that is layout. to walk us through this first launch.

Please welcomeunch Pigment Designer Giorgio Kavilla to the stage. Is layout one of the new four products or do they mean this is an update to like auto layout? Hello everyone. How are we doing? Layout without the auto that feels like a step backwards. I don't know. I'm so happy to be here today on stage because I get to talk about one of my favorite subjects. You guess it layout. You see, I spend a lot of time at Figma thinking about layout and as a result, I have this kind of weird theories and ideas about it. Wonder if it's for example that layout is a bit like the dark matter. That's the marketing designer in me thinking. I know I told you weird ideas like hoping that they prioritize that. Now, if you think about it, layout is a bit like a gravitational force that you can never see but is always there to make sure that things stay in place. Okay. So, they're different. Raise your hand if you know where this is from. Talking about the feature. I see a bunch of old folks like myself. Cool. Well, if you don't, well, if you were a kid in the mid '90s and you had internet access, this is where you'll hang out. This is the website for the first Space Jam movie back in 1996. Oh, yeah. And at the time, this was the pick of web design. And honestly, it looks pretty cool to me now. Now, if we take a look at the layout behind this masterpiece, we will see that even if it's not immediately clear, it's actually built using a grid. Sure, not CSS grid, there was no such thing back then, but still a grid nonetheless. Because you see regardless of the technology and the media grid layouts have been there as a fundamental tool for keying up for the one thing that I do know about because print existed someone linked something on LinkedIn existed um weeks ago maybe it was a few months ago now we kind of started getting a little bit just a little bit obsessed with grid and we use it everywhere and I mean everywhere speak to that more when it actually gets announced to exhibitions we use grid so much that at some point we got tired of it and we kind of rejected it and we learned how to break the grid. But you see the funny thing is even when you break the grid there is still a grid to begin with. Kind of confirming how important for us designers it is. And this is true still very true today because grid layouts are used again pretty much everywhere in our mobile apps and of course on the web and in branded marketing assets as well. a standard to create reusable and beautiful websites. Now in Figma, you might have heard of this thing called auto layout. Yes. And up which is awesome to create reusable and flexible designs and components. But when you use it to create two dimensional layouts like this one, things start to get a little bit messy because you now need to create containers just for your containers and you end up with a lot of pretty nasty nestings. I feel like auto layout is something that did take me a while to get my head around. Your file, they will spend 10 minutes just to understand what the hell you did. But yeah, that was me. Things are about to change because today I'm very excited to introduce a brand new auto layout option for grid. Okay, enough talk. Let's see grid in action. For this demo, I'm going to use Kotus design for flu, an app that helps shoppers earn cash back. Okay, so this is I've heard that bent boxes are pretty hot now. So why don't we start there and we will create one to introduce Flu's brand identity. I have my frame here and if you follow me here on the side you can see that we changed things a little bit in the properties panel but don't worry everything is still there. We have vertical layouts horizontal layout wrap is here by the way and if I click now on grid we'll see that by default a 2x2 grid gets applied but I can click here and change it to any sites very easily. This is potentially extremely useful. Now, I hope you enjoy using this little component as much as I enjoyed designing it. And our engineers hated building it. True story. Okay, I'm happy with the 8x4. And of course, here I can change the gaps. Let's do it maybe 20 and 20. And if I go here on the canvas, I can resize the paddings. Nice. Awesome. Now that I have my grid set up, let's drag some items in it. I can select multiple items, simply drag it and boom. Now, a couple of things I want to highlight here is that the first one is that items automatically span multiple columns and rows according to their sites. I'm already thinking about how understanding how grid works in code is going to help. This is already a responsive design. People wrap their heads around this feature like anyone who already understands CSS grid is going to be able to use this feature. We want to make very easy and intuitive and it might go the other way. It might help folks who don't know about CSS grid start to understand the feature. This field now tells me how many columns and rows an item. Yeah, because basically it's choosing how many columns and rows um a div in a web design will span. Okay, let's continue. Let's have this item here. Nice. Now in grid, if I realize that I need to move things around, it's pretty simple. I can select an item, drag it, and drop it and everything after it will reflow automatically. Now one more thing about resizing is that in grid I can resize every column or rows individually. So I can click an item it tells me which columns it occupies. I can click here by default. This is going to be so helpful for you can think about it like resizing social media assets. I think click it now and resize it. You know, if you set it up as a very precisely as a grid and then you shrink it, it should all Yeah, I think I mean I know you could do that with auto layout as well, but overlay this nice bird here that would be awesome to put inside the grid. This seems like it involves less settings. I think what I'm doing now is pressing control and I can put item still in the grid but absolute position like the rest of Auto. Okay, things look pretty good here. Let's move. They always do make it look really easy to use in these demos and then I get into it and I'm like, wait, what? What am I doing again? If you ever to build one, you know, it's not the most fun things to build. Takes a lot of time. But here, I can just drag the date of the week and I can do this. And now I'm pressing command. As you can see, easily I can But can you also have it? You probably saw this place content suggestion coming up. This is our AI feature that has been improved. And if I click it, okay, it automatically detects what I want to do. Nice. Thank god I don't have to insert those numbers. Will be a very long demo. That's what I was thinking. and put inside my app. Now here I want to show you that the app itself is already a grid layout. That means that of course I can nest grid inside other grids if I have to grids on grids. Now as I mentioned before grid is a very flexible and powerful tool that can be used to create a variety of layouts. And let's see how did this with the flu website. Here we have a grid kind of similar to the bento box. We have item here that go beyond the grid which is nice. In this one a simpler grid 2 x two but they use a grid with other auto layout options. So just so you know, of course you can nest all auto layouts in any combination you want. Wonder what the benefit would be of using grid for that 2 by two idea versus a regular auto layout. Here I just want to show you remember when I mentioned breaking the grid. This is a good example can also be very effective. So I have this design here but if I do this you can see that typography on the left is not too great but in grid it's very simple to having items spanning and overlap others. So I can just drag this and now I do this. Well, not quite there yet, but that's a benefit because yeah, in auto layout stuff will be beside each other. I can press the square bracket and now I can move items before or after. I'm watching this keynote definitely like as a Figma user learning about new features, but also as a creative director thinking about introducing new features um for kit and yeah, just learning from the way that they've set up these demos to be so smooth and like yeah, answer questions. like what happened just then we have whoops the span as well. So in this way grid is another step towards bridging the gap between design and real development. Okay I think that's it from me uh on behalf of the old team who worked on grid very one of the four I'm very excited the first one to show you today so much more we want to build on grid and we can't wait for you to try it. There's also a deep dive tomorrow if you're curious to know more about grid. Having said that thank you so much. Back to you. Cool. I mean, first big new feature launched here and I do think that is going to be useful for brand and marketing designers. What do you think of our first announcement? It's more about the discipline of actually using it. You know, when you're creating social media assets about it and definitely for the web design later today. Grid is also going to be available in the next product that we're going to

show you. Grid makes it easier to design products and websites. But design doesn't just stop at the mock. You have to prototype it. You got to validate it. You need to design the interactions, the animations. You need to build it or just publish it. Dogen recently posted on X. He said, "I've been waiting for every Dogen, we've got some good news for you because today we're excited to announce Sites. knew it. Okay, so this is the feature that I think it was I can't remember couple months a couple weeks ago someone posted on LinkedIn a screenshot of sites alongside slides uh design Fig Jam and so yeah it got leaked for sure and I think the Figma team asked they removed it. I don't know if they did but yeah it was a big drama in the design LinkedIn community. All right, we'll do this together. Let's do it. Hi everyone. I'm Tomasio. one of the leads on Figma sites and I'm also Tom. I lead our FXC team here at Figma. Now this is my config and this is my sixth config and usually I'm behind the scenes working on the keynote demo. So it's pretty cool to be here on stage to tell you all about what the team's been working on. Now when I think back to the very first config I remember one of our marquee feature launches was links in the Figma editor. Really feeling full frame right now an equally enthusiastic reaction. And so it's nice to fast forward to today to talk about taking your designs and deploying them and building a website directly from Figma tools. Now Tom So honestly, like I'm curious to see what this is, but I would for sure consider moving my site for about 30 years now. And like many of you in this room, I'm sure I'm saying that before I've seen the feature, but that is just my trust and finger. Um, this is super embarrassing sharing this in front of a room full of the world's greatest designers, but this is when I fell in love with making things for the web. The idea that I could build something and share it with the world with a single click just kind of blew my mind. Um, and I built a career, you know, designing sites, uh, and launching them. Um, but as a hybrid designer developer, I always felt this disconnect between the way that I would work when I'm designing sites in my design tools and the way that I would build them with code. So about 13 years ago, I started a company called Macau with an idea of like what if instead of writing code, you could actually just draw it. What if we could enable a free design workflow that also output usable code? This was something that, you know, I wanted, but I quickly realized that I was helping people make things that they couldn't make before. And that's kind of the ultimate reward for me as a toolmaker. Um, and you know, Macau only lasted for a few years. We all went on to build other things. That is until one of the original Kickstarter supporters reached out. Turns out he also got into building design tools. Uh and he had this idea, right? What if we could turn Figma into a website builder? Would we be interested in doing that? You know, and of course the answer was yes, right? We started thinking about it and realized that maybe that dream is still alive, right? So we've spent the past couple years reimagining that original vision. I can't imagine working on something for several years and not being able to talk about it. When we rebranded convert kit to kit, we kept that secret for a while, but it was only secret for like seven months, I want to say, before we told the world we were going to re rebranding and we were rebranded in public. Yeah, I'm just very used to working in public just right and then you need to take your design. Props to everyone involved for this and I can see why they were disappointed that it got what the team at Kick at Codo did when they were working on this design for Kicken. And full disclosure, if I zoom the wrong way, I'm the only one in today's demo that has to disable natural scroll. So, oh, it would have been so cool if they'd used our design here in Figma. What if we could pick up this over into the brand new Figma site editor to get started? Also, Cotto didn't design it. We got a desktop frame here and we're just going to paste our design already. We can continue working on our website, but what's a website in 2025 without thinking about how that website is going to look on different devices. So, a long time request from many of you have been building on the web has been the need for break points. So, very quickly, we can add our tablet and our mobile. See, these are always really impressive, but then it's like you have to do the setup correctly in order to get it to scale nicely. Has been translated to each of the viewport sizes. Oh, I'm noticing that it's even scaled to make sure it flows properly just the way that you want on most. Interesting. As you're designing your website, each page is going to have a frame for each one of the viewport sizes that you're designing on one. Do I have to make it on all three sizes? Anytime you select an object in your primary breakpoint, in this case, we've selected this headline. You'll see that it automatically engages Bigma's multi-edit across all of those frames. So, if I go in here and make an edit, we'll update this to say grow with the flow. You'll see that it makes that change across all of the break points. Nice. Cool. And of course, you're obviously going to want to make tweaks on one device, but not the other. So, when you come in and make a tweak, like maybe adjusting these headlines on mobile, you'll see that change only happens on the mobile device. It doesn't count. I was thinking this feature would be just about publishing a design, but I can see now that already pull in from your Figma library that already exists in Figma today. This could be the handover from the website designer on my team to the developer. You know, we won't be publishing the kit. com website to show you behind the scenes what component looks like. But like this makes it three of your and when we come back into Figma sites and drag this into our design, you'll see that it automatically adapts the right variant for each of the viewport sizes. All right, I'm going to set that to fill. I think this is looking good. What do you think, Tom? I mean, I think it needs something. Let me take a stab. Sure. Uh, let's add some interactions to this. And interactions work just like the prototyping tools that you're already used to. So, I'm going to switch over to this interaction tab. And from here, I could start to noodle out and link pages together if I want. But I really want to show you a new feature uh by zooming in here to this button. Um, I want to add a hover effect to this. And now, normally, I would have to turn this into a component, create some variants, fiddle with smart animate. But now, using a new feature called preset interactions, I can actually just come over here and add a hover effect. And now, this is going to give me a few preset values that I could simply tweak. Let's make it get a little bit larger. and we'll change that to a nice bouncy transition. I think that's going to feel good, but let me preview this. So, I'm going to hit shift space to open up our preview window. And here, you'll see when I hover that button, I get a fun little I don't have to show you the dictionary. Uh, so I want to point out a couple things about this uh I mean, it's been a while since I edited my web flow site, but I think that's easier than adding interactions in what my design looks like on tablet and mobile all from here. And the other thing is that this is not the normal Figma preview window. This is actually HTML and CSS. So, while you're working, all of your designs are being translated. I want to get in there and inspect that code, Tom. I saw some other effects in there, though. Yeah, there's How clean is it? Like, how optimized are these sites? Tom, relax. Yeah, I know. Parallax. I get it. Um, I'm not going to add it to all the things like Tom loves. Uh, I'm just going to add it to this image here. We'll knock it down a little bit. And then, you know, these badges are like a very playful design. Let's just come in here. We'll add uh Yeah, we've got all kinds of things in here. Scroll transforms, custom cursors. That's fun. But I really want to add uh let's add dragable to these. We'll put a little momentum on there. We'll just make sure they stay inside of their pair. Did I see a marquee effect in there? I thought they deprecated that tag. They Yeah, they did. Yeah, that's very good. They did, but we still love it. So, let's add Whoops. Let's also just add a little typewriter effect down here. They're so brave for like going in and doing a live demo. Looks pretty good. So, what good is it to do all of this work if your site remains unseen? Let's flip over here and click on the publish button. And very quickly, Figma will check for any issues with your website. You can see our custom domain and we'll hit publish. Okay, everyone in the audience right now is typing that domain and hope that in a few moments we got a website that's on the internet. I think it was the year I was there or was it the year after, but they shared a screen with the like file URL in the browser and everyone kept requesting to join the file while Dylan was presenting. It was pretty funny. Our classic typewriter effect. And down here we've even used interactive components the way that you normally build them in Figma design today. And I think that's one of the things that I'm most excited about is that you can take all of your existing ways of working in Figma and they directly apply to building websites in Figma site. That does not bode well for me because I do not normally make prototypes like interact prototypes. Launched the new layers. There'll be a learning curve for me to do that in order to make a website who created a custom font and specimen site in collaboration with other means and Kia. And you may have heard that readv is embarking on a new chapter. Well, we are working with them and Alexerson to build a plugin and a template to help you migrate your readv right over to Figma sites. Nice. And we've also partnered with the fine folks at Play Studio to build out a collection of gorgeous templates. You can access these from Figma community or from the new file dialog when you create a new website. We think these are going to be a great resource whether you're building your first website or you just want some templates to reference as you're getting started in Figma sites. Well, dang, now I want to make a template. Go to the next slide. Could that be my next in beta today? It'll be available to everybody that has a full seat on a paid plan and we'll be rolling access to starter soon. And just a note in the future when we come out of beta there will be some additional fees for people who have additional hosting custom domain or bandwidth requirements. Okay. Now before we wrap today we also wanted to give you a brief of what's coming next in sites. So Tom and I featured in now we know many of you are going to be made a change to plans recently and obviously dynamic content and also an easy way to manage them. So we're building a CMS that's directly integrated into Figma sites and we want to give you a preview. Sites is the culmination of a lot of hard work from the Figma team and it's also just a start. There's so many improvements to come. I can't wait to see what y'all do with it. I guess none of us now have an excuse for publishing our portfolio website. While Figma sites, yeah, my site hasn't been updated for a long time. Sometimes you still need other ways. Should we do a full redesign for sites or should I just like in the first place recreate what I had in ideas are very precious to me. And when I see ideas dying, it hurts. I see a tragedy. To me, it feels like a moral wrong. It feels like an injustice. So many great ideas are often left unexplored due to time. Very cool merch she's wearing. I just noticed it. Our next announcement aims to help you take ideas out of your head and into the real

new product. Today we're excited to introduce 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 Paul Lee, product manager of Make. So this is their AI. All right. Thank you, Dylan. Hi, Config. Make is a nice name for an AI. Came up in January of this year as a PM on the AI team, and it's already been the adventure of a lifetime. Now, like many of you, I've been making for as long as I can remember, including today's confit. I hope you like it. Oh, nice. Now, for work, I get to make AI products, but I'm sure we all face a lot of the same challenges. Turning a design into something real enough to validate takes a long time, and it's hard to do. So, that's why we built Figma Make. With Figma make you can go beyond having to imagine how your design should feel and actually just experience it. So today you all make on behalf of the superstar team behind it. We're building really rapidly like that. That's my favorite. We're just so excited about all the ways make can change how we design iterate and explore. So let's get into it. Okay makes an existing design in Figma. So here you can see my team is prototyping a music app we're calling earworm. Now let's say we just want to explore how this core player element 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 it into the make prompt box. And I'm just going to say, okay, please make this CD player interactive. The CD should spin when I play a track. Thank you. Honestly, just impressed that she typed all that without making a error and having to push the delete key, including all of that structure and metadata. The model can reference the layers in your design, understand what they're for, and iterate. So, it's like a replet inside. This is a live demo. No stage tricks and models can be finicky. So, wish me luck. Thank you. Now, make is making a plan. It's reasoning. You can see here that we're using claw 37 and code is starting to stream it. Now, many of you have used tools like this before, and you know, we're asking the AI to do a pretty hard thing, and it just needs a minute. So, while this runs, let's go take a look at some fun make examples. All right, let's start with this one. You can see here that Tom's team is testing out a new feature for their cycling app called Trail Journey and make I can actually upload a file. So, let me give it this bike ride and then experience all my data instantaneously live. Look at that. I can play back my route and I can even interact with my elevation data. Does this connect with sites? Like, can you then take this and publish it? Oh, I do see a publish button right there. A designer at Maven Clinic used to turn a mobile design into an interactive desktop clinic for their users. And this is complete with a real map. So I can search here in the search bar. Curious to know why they've made this a separate product and not like was able to reignite a conversation from the design. I guess it's because it needs different UI. Same reason that they made slides a separate product. Okay. Now, prototyping is a very powerful use case in Make, but that's not all it's good for. We're also just excited about the ways that Make can raise the ceiling for the types of things you can create in Figma. You guys ready to see some fun examples? Sure. Let's go. All right, buckle up. In Make, you can manipulate and render complex graphics like these shaders, courtesy of our designer, Daniel, and even threw in some really fun animations. And in Make, you can explore in new dimensions. Check out this amazing 3D tool by our designer Tammy. I feel like I've seen some Figma, what are they called? designer advocates posting some interesting like experimental things like this recently and obviously this is what they were and the next one is a personal design and make you can create and step into immersive worlds. So Tammy also created this really fun game where you can actually just wander around a forest and if they'll challenge me take on some of these gnomes. Okay, I know this looks simple but I've actually not won this game a single time. All right, let's look at one more really fun example. Oh my gosh, I'm being attacked. Okay, in make uh this is an experimental app by our friend Bruno. He is leveraging a handtracking technology to manipulate shapes uh and colors and because you can publish makes this means you can also access the hardware of your device and do things like this. That is cool. Very cool. And all of these examples are just the tip of the iceberg. And this is cool because it's made in that like one of the things we're working on in make is bringing it into more parts of Figma. And you guessed it, the first place is Figma sites. All you have to do is jump into the split view. And here you can see Tom's history of prompting with make. Now, we're so stoked about what this represents. You can free form design on the canvas, turn it into React code, and then bring it to life with make. This opens up so many possibilities, and we can't wait to see where you take it in sites. Now, remember that generation from earlier? Let's take a look. As you can see, this was our original design. I didn't quite understand what she was showing there. We never actually stop here. 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 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. That is helpful. and open-ended edits, we also have point and prompt where you can just pass in the specific. When I used replet at our um create week, if you didn't see the video about that, by the way, you should go check it out. It was a really fun like story time video that I made. We created an AI creator coach. want to do is that was the one challenge I had in replet. I was like, I just want to edit this myself because if I'm telling you to edit it, you're not doing what I want. All right. Okay. It looks like the gang's all here. Earworm 4. 0 has gotten quite a facelift. And it looks 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 designing AI chat experiences. And you can do that in make. 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 Wonder how this is gonna change the pricing of as much fun using it. Uh we're only just getting started and the price of AI tools recently. I can't wait to see all the amazing things you'll make. And with that, I think I'm going to play myself off. Incredible demo, Holly. Thank you. So, we're super excited to see what you all make with Figma make. We also know it has a long like I said I like the name for that tell you that your results you know making something with AI is how we need to be thinking about it also we are not just like giving AI the job to do yeah trusting it blindly it's more like a collaborative partner will be yeah how will that help brand marketing design the beta make will be free with maybe with prototyping interaction ideas for the website will be see that being useful so far this morning we've shared updates for how you improve design build websites and products I wonder if there's a way to use it to create we've seen you all stretch in so many ways motion graphics when we noticed that people were doing brainstorms and using if that could be a publisher like exporting option I'm not sure we built big jam and when we saw that so many of the files in Figma design were actually slide decks we built Figma slides okay what have they not new products for

these use cases does two things first it helps us keep Figma design focused on product design it creates more accessible spaces for you to bring your collaborator in the past and marketed things like social material in Figma design. Yes. In Figma, where else would we make them? The hard part. It gets harder when you try to work with people who don't live in Figma all the time like we do. So, we think there can be a better way. To tell you about one of our new products, please welcome our creative director, Damian, to the stage. Damian. I had him on my inside marketing design podcast a few years ago. He's great. Hey everybody. Thanks Dylan. Hey Config. I can't hear you. Just kidding. I totally can hear you. Um, hi everyone. Um, I'm a designer that never gets told to make the logo bigger. I'm not sure if you saw the config logo outside, but it's ridiculous. It's massive. But it's true though. Brand builders like myself, we're already in the file. In fact, I'm so in the file that I'm often there like three times. I'm my own hovering art director. And as an internal creative studio here, oh sorry. here in Figma, our brand team creates a lot and for a lot of teams and with the sheer volume of requests that come in, we just can't get to everything. That would have been a bit like that's going to lead to are making often sorry about that. It's embarrassing. Uh first live demo and I get this. Okay. Um we're often making small copy changes or production level tweaks, but we know our collaborators really need the work done. I'm like shocked right now that Figma is doing something specifically for brand and marketing design. When we become the production bottleneck, our partners are left to their own devices and ultimately that can risk the Who is Lauren? This is so relatable. Where are you? Lauren, are you really working during the keynote right now? Hi, Damian. Hi, everyone. Um, no, I just know you're so busy. I was just following off on those assets we talked about. I thought we could work on them after the keynote. I didn't mean for you to get the slacks right now. Okay. Uh, well, when do you need them by? Uh, ideally yesterday. Classic. Um, well, a few minutes and I was about to Oh, I can't wait to talk to Jackie, the brand designer on my team about this. Sure, why not? All right, let's do it everyone. Lauren McCann, our director for Pig Duo. It looks kind of like we planned this. Did we plan this? I think we planned this. All right. Um, okay. So, if I remember correctly, your request, you are looking to promote a new live stream series. Yeah, that's exactly right. So, our campus leaders are going to be hosting a series of talks across dozens of their campuses and we need help making assets for them. Also, quick shout out to our amazing campus leaders and all the other students and educators here today. My mind is going, okay, is this going to mean Yeah, that's what we kind of need help with. Okay. Well, folks can easily edit templates to make their own assets. If you see here, and if so, what seat will that be included in? Because I want that to happen. I'm going to break them. It might just be faster if you Okay. I hear you. But I was about to introduce a new product that's actually purpose-built for this use case in my It's called Figma Buzz. And let's check it out. Okay. I didn't think there would be anything in this keynote that I was more excited about than Figma Buzz looks very similar to Figma design, but with a streamlined focused UI. It gives you easy access to your shared brand library. So, illustration, announce that it's part of the collab. Announce it as Okay. I can already tell this is going to be so much easier for me to get into this file than what you normally send me. No offense. Uh, none taken. My files are often a disaster. Um, but let's get started. We have some templates right here. So, these are the templates that the team made. You can access them in Buzz. I designed them in Buzz. So, what channels are you promoting on? So, we want to make this a social first campaign. So, we definitely want to do something for stories. Uh, I would love to make something for the main Instagram feed. And too, you know, everyone's all about that thought leadership. So, Okay. If she updates the title in one place, will it update across all of them? All the assets in here on the canvas, you can navigate to them pretty simply and you can edit on canvas. But if you're more comfortable and you don't want to feel like you're breaking anything, you can just hit the edit content panel here and this is where you can information. Okay. Yeah. Go ahead. So, let me add the title. We've tried something like this in the past with um was it called variables giving his talk where you could like type in the side and oh look, it even edit text on a path on the circle. That looks pretty nice. Um, okay. So, now I definitely need this picture to be Braden, but I only have pictures of students in normal color, but I notic I'm pretty sure that's something that I usually find myself in illustrator styling there. So, if you drop in the photo, it'll make it black and white automatically. Like I've tried to find plugins for them in the past and have not been super thing about this. There are variants attached to this template. What is a variant? Uh, well, variants even in a template here, you do have some creative controls. So, variants allow you for example that image in the back there, there are some more options. So, you hit swap. Yep, there you go. Got it. Oh, nice. case I can just change out the pattern. Yep. Do you want to see something else cool? I would love to. Okay, cool. Well, if we zoom out here to grid view, we can see our entire campaign. Um, and okay, we only have one photo of Braden. So, if we want to change it on all of these other assets, all we need to do is click, hit the multi-edit button, upload image, and there we go. Braden's everywhere. So, this is going to save me time, but I still need to do this for what, 25 events, three channels, 75 assets. So, I have to do this all one by one. No, no, no. We do have a bulk create um feature right here on the left panel here. Okay. Oh, okay. I'm seeing a CSV upload. Now, you're really speaking my language. Okay. As a marketer, I do love my spreadsheets and I already do have something from my team with all the data for the event. So, do I just press open? Yeah. And then you just need to map the info from the spreadsheet to the elements on the design. And there you go. Okay. I think I saw Tom and Tom do this in their site CMS demo. So, see, I was paying attention to everything. Okay. All right. So, let me try this out. So, I'm going to match the titles to the title. I'm going to do name for name. I'm going to go photo. This is going to force all of us to be more systematic around what we're designing for sure. And we will do it because it will wow. It will lead to things being cuties. You know what? Easier for us in the long run. I'm just going to go back to my seat and send it to the student. They need it yesterday like I got it. Okay. Thank you. Thanks, Lauren. What about kind of fun? Um well, that's Figma Buzz everyone. Back to you, Dylan. Buzz. I guess Buzz because it's marketing. You're creating Buzz, but I don't know about that name. Not in love with it. Thank you Damian and Lauren. That was a lot of hustle working from the keynote. All right, we're very excited to hear what you think of Figma Buzz notes and availability for Figma Buzz is rolling out today to all users and when it beta will be included on the full and dev as well as a content seat which is new and available later this year. This is for your collaborators who contribute content for buzz site CMS and other products down the road. It will also have access to big jam and slides. Okay, so we hope this makes Figma more accessible to everybody. Not what I was hoping for, but better than having to pay for a full seat for everybody. All right, y'all ready for our last announcement of the day? Because that full seat is just so expensive. I am the keeper started and yeah, it's a when we started Figma, one of the first things it's a hassle to make sure needs access to design gets it.

bunch of vectors. Evan, my co-ounder in particular, really wanted to that was also a long time ago and since then, over the years, we've accumulated some longstanding issue. Anyone here recognize? Yes, I'm so sorry. That happens to me all the time. Whether it's booing ops, flattening vector objects, outlining strokes, we know there's a lot to fix. And so we did a complete rewrite of this functionality to improve core vector editing. We're bringing also I just notic on a path on his t-shirt as well. 22 new features and improvements to be exact. Are you all ready for this? To walk us through all of that, please welcome the instigator of this effort, an engineering leader on our team, and the product lead for this effort, Lauren Bedoric. Wait, is this going to be a new product? Hi. Have a blast. Cuz we've had three, right? Hi, I'm Lauren and I'm an engineer here at Figma. You might be wondering why is there an engineer looking up stage keep locked in the back. But I'm here because the work I'm about to share with you is very personal to me. I was a designer briefly before I was an engineer. I was an art major in school and so I knew how to use creative tools long before code. I still have a lot of creative side hobbies on the side. Are they going to do like a separate illustrator type and in this very frustrated by all the things that I couldn't do in Figma. I worked on countless makery projects over the years to hack more expressive tools into Figma. But I work at the core editor team and we've always been laser focused on meeting the needs of our core product design users. As the editor team, we're constantly working on things like typography features or shipping a better version of auto layout. But design is evolving. Tools are evolving. We saw that today and we felt like while tools are getting more powerful, design is sometimes also getting a little bit flat. Maybe it's time to raise the ceiling on what you can do in Figma to give users more power to unflatten their designs and to enable more craft. So today I'm very excited to share with you what has happened to our devmo toggle which is that as of today you can now use this toggle to switch to Figma draw. I do an appropriate competitor. Okay, so I'll go ahead and toggle to Figma draw. And you can see right away that there are some obvious visual differences in the UI. We have these big layer previews in the layers panel, some new tools in the toolbar, and also some UI elements that are more optimized for visual design like sliders. Um, but I'm going to start by talking about some of the improvements we made to vector edit mode. I've done a lot of vector editing in Figma, and I know that it can be pretty limiting at times. Um, so we're going to start with this icon set that Cotto is doing for Gustini. And it looks like we're trying to make a bunch of food icons. Um, and this is supposedly a pasta, but it's not quite there yet. Mentioning Cotto, I just remembered that I haven't seen kit anywhere yet. Um, and you can see menu here with a bunch of uh common actions. You might want to do boolean operations, use mask, etc. But actually today, I want to vector edit these. So I'll hit return. And now I'm actually in vector edit mode on all these shapes at the same time, which is my new best friend. Um, I can now select all these vertices and I can edit them all at the same time, which is pretty powerful. But I actually want to use our new shape builder tool today. So hold option and click or drag through some shapes that I want to remove. And click and drag through some shapes I want to combine. And that is the shape builder tool. Wow, that seems like something that would take a bit to get your head around. More precise editing on these. So historically I can use whatever they call that can be kind of impressive at times figures that takes a while to get your head around too especially if you're very used to illustrator and change the corner radius and now this is looking a lot more like a pos shape. It's nice to be able to select points like that because want to make this pop adding sort of this red scalloped edge. So I'm going to bring the circle to the front and historically I might do this by duplicating the circle a bunch of times around the perimeter but that's going to get pretty unwieldy and kind of hard to manage. So instead today I can do add a new radial repeat. Now I can change the gap here. I think something like that would be nice. And then increase the number off by a couple. Yep. A very illustrator like feature around the border. I'll send it to the back. And now I have this scallop edge. Nice. Okay. A few of you might have caught something in the buzz demo that you might not have seen before in Pigma, which was Oh, there's so much for us branded marketing designers to learn. Cut it because I don't trust myself to type on stage. Select this path. Use the type tool. And if I click here, I can add text to the path. Yes. Sorry, that's probably really loud. And finally, this spectre is looking sort of pretty uh computery, but Cassini is looking for like more of an old world feel. And so we might achieve with that with some of our new effects. So I'm going to add I am excited for what this might do for you all kinds of um interesting aesthetics by changing these parameters. And this is sort of a non-destructive effect that I can easily apply to this. So I might this and you can see if I zoom in here um it make this I'll finish my thought in a sec. Now this has like a nice sort of roughen effect as if it's been uh printed on paper. Okay. Yeah. I mean, that just adds to it. I'm excited for what this might do for design because I feel like everything got pretty flat because we were using the features that were easily accessible to like Figma or Sketchum. And then gradients became easier and so we started using them a lot but and so that's like kind of nice, but it has this sort of sharp edge here that I don't really love. Yeah. But when it comes to like graphic design, yeah, doing it in Figma, I think we have gone a little bit um it's been harder to be super creative. And now you can see as I scrolled here and you can do you can use progressive layers. Wait, I'm confused. Why is this part of Figment these illustrations that I coach I was working on? And these are

looking really good. They all look very sort of vectory. Um and so I might see what I can do to make these look a little drawn. These are our illustrations. Do is try this watering can to add a new brush stroke. So I'll change the stroke. It's a shame that no one will know that all kind we have presets. Um and I think that's pretty good. Now I might also do this on the colors. So these illustrations were created for us originally. I'll put one on screen right now so you can see like our final version. Um by the illustrator at Cotto. Now I might also want to draw free hand with a brush tool by hand but digitally I'm doing today by hand drawing on a trackpad on a stage. And so being able to recreate them or like create this type of illustration here and do a little bit of shading here, maybe draw some shadows here. Wow. And I think this is looking nice and handdrawn. I mean, yeah, that is not our style. So now I'm glad that they didn't put our name on this paper airplane. And I think this is like very sort of sharp and computery. And so I'm deliverability illustration. I can also add a new dynamic stroke, which is sort of a programmatic way to um to have these like wiggly strokes. So I can change the frequency values very wiggly um and the smoothing values and get something that looks sort of pretty um pretty nice and I am thinking that my um scribbles component library I'm pretty happy with that. Now I might also think that this red pattern for this instead historically to do this you might only get 500 times and grab it if you want to. So instead we built something that is powerful and useful but also way better for performance which is new pattern fills. So I can select a pattern fill here and then select a source from the canvas and now change my scaling and my spacing values change to a hex pattern. I mean specifically creating a half tone pattern like this I don't like this one is something that I've often wanted to do and haven't done because of the complexity of doing it in Figma. So that's what I mean about the like graphic design getting more simple not using details like this because they were harder to do and now all my patterns are also dynamic strokes. Oh, that's cool. Oh, I'm so excited to play around with this. Okay, next we move on to this illustration of some gears. And this is sort of in a manga style. It has some really nice sort of stro operating system illustration. I think that this stroke is looking not quite right. It looks a little bit too uniform and too thin. So, I might select this, enter vector edit mode and use a new variable with width stroke tool. Now, I can change the stroke weight here. Also change it over here. Maybe also over here. And then I can move these sort of stroke anchors around to give this sort of any kind aesthetic. Yeah. Now, variable strokes will be rolling out in a month or two. We were too excited not to show you today. Um, so when they're ready with all kinds of pressure sensitivity and stuff, then we will um release them. And finally, this bird illustration is looking a little bit sort of like too flat and victory. And so I might want to try using that same texture effect that I showed you earlier. So we'll go ahead and add a texture effect, but play with different values. I'm going to put our real one on screen right now. You can and you can see how sort of a smaller size and a relatively large radius. And I think that's pretty textured, but still sort of legible as a bird. How close this is getting to make the texture clip to within the bounds of the path. Yep. Oh my gosh. Okay, I need to pull it up, but you can be looking at it right now. Like, how similar is it? I think it's pretty similar. A little bit skew. And so I might add a rotation origin point by adding um option R. Then I can drag this rotation origin here and rotate this around the edge here. Nice. Cool. So this is the final illustration come up with I think and another really fun thing about doing this in Figma is that uh it integrates really well with all the Figma features you've come to know. So in this case I also set these up using um color variables. And so I can go to the appearance panel and all of a sudden these are all dark mode illustrations. We've been running this program. It's a huge benefit of working with a studio like Cotto is they're connected in ways like this like essentially free honestly every time I still brand awareness advertising we just got now you can supposed to be a slide here soon. There we go. Yeah. Cool. Which is awesome. Thank you Cotto if you're watching this for including us. Thank you. Okay. Closing thoughts. I am excited

personally about sites and I think that when it comes to our brand and marketing design work at kit, it might be helpful for David to be able to mock up like things for Corey and handover or yeah be considering um different breakpoints and be able to better present those or yeah more easily create those I guess than what we have going on right now in just like Figma design. Not sure how useful their AI tool is going to be. I guess it could come in handy for mocking up interactions and that sort of thing. Like I said, I want to dig in and see if there's a possibility of using it to export any animations. Um, or maybe that might be a future iteration on Figma Buzz. I don't know. If it's not possible right now, then let this right here be me saying I called it when they announced that at a future config. Yes, that would make it really useful from a brand and marketing perspective. Figma Buzz is like built for us. I'm really excited about that. I'm excited to dig into the whole UI and yeah to just see um our side of design in the tech industry recognized and appreciated and cared for in that way. Um really appreciate it cuz we have been using a tool that wasn't designed specifically for that type of work for a long time. And then I do think draw might replace the things that I currently open Illustrator for. So that is exciting. I hope you enjoyed watching this keynote together though. Thanks for hanging out with me. Let me know what feature you were most excited about and also which one you were most surprised by down in the comments. So, I was definitely surprised by Buzz for sure. All right, thanks for watching.