Transcript

Motion adds so much character, personality and play to a lot of our product experiences. From our research, we found that 85% of Figma users are already designing with it or want to. So today we're so excited to say you can finally build Motion in Figma. We're going to walk through three ways to add Motion, how it works with design systems, and then how to export. First off, let's try adding Motion through prompting with the agent. I'm going to select the sign up page and I'm going to ask the agent to add Motion. So let's say, hey, agent. Can you bring the product carousel to life by adding a swipe animation? All three cards should slide left and right as if a user's flicking through them with the center card slightly scaled up to show it's in focus. Keep it smooth and mysterious. All right, cool, let's let that work. And while that's working, I'm going to move us back to our file where we now have a couple of different frames here for another page where we have a few cards. And you can see here, we have a number of different. We could animate, but let's try to animate this moon and stars. So I'm going to zoom in here and the first thing I'm going to do is maybe. Had some rotation to the moon and then maybe add some kind of like the start, make the stars breathe a little bit. So I'm going to select the layer that I want to animate and select the moon and I'm going to flip into our brand new motion mode. And now I'm in motion mode and you can see that a timeline has popped up and now we can actually add motion. So the first way we're going to do this is by adding an animation style. I'm going to come up here to the right props panel and you can see we have a new animation section. I'm going to hit plus. And now we have a number of pre made or preset animation styles that we put together. So let's do a rotation. Let's have it move clockwise and then let's do maybe a 30�� rotation and it'll rotate in. And then maybe after the rotate in, I want it to rotate back out. So let's go back here. And we'll have rotate out and we'll add a 30��. Let's do counterclockwise this time. Cool. So let's actually see how that works. Nice, very twinkly. Alright, let's add some movement to the stars now. So I'm going to select the all three stars at the same time and I can actually bulk animate these. So I'm going to come back to our animation style and I'm going to hit let's have the scale and let's have it scale out by, let's say 140%. So I'm going to have these added to the timeline. You can see all of them here. And I'm going to actually select all of them and move them. I'll have them scale in. So this time I'm going to add another animation style for scale in. And I'm going to have it go 140%. OK, great. So I can now on the timeline, kind of drag and move these as I want to. So maybe I want them to stagger in and so I can kind of move them slightly this way and kind of have them all come in at different times. So now if we actually watch the whole thing and we can see what it looks like. So let's see, let's preview. Cool, nice. It's so starry. Night bugs. Alright, the third way we're going to try to animate is through key framing. So let's say we want to animate this play button component so that when we play, we sort of have like a path animation that moves as you play. So I'm going to select the layer that I want to animate and I'm going to come over to the properties panel. And now you can see that all of the different properties that we can keyframe actually have this new stamp here and kind of indicate what can be keyframed. So I'm going to hit specifically the keyframe for the path trim end, and I'm going to make this value 0 and then. Maybe at like 500 milliseconds, I'm going to have this be at 100 and we should probably see what this looks like and hopefully we're looking for. So if I press play, we can see a really cool play looping animation. And what's even cooler is that now that we've animated this component, every single instance of this component, such as this media player that has the play button actually has that animation. So now you can see it's directly copied over. So when I play, we have that animation directly into the screen, which is really cool. Everything that's. Key frameable will show up in the properties panel. Great. OK, let's see what the agent created. Nice. I like that. Good job, agent. So what's really cool about prompting for emotion is that once the agent actually adds motion, you can see that all of the motion is actually in the timeline. So everything is keyframed. And if I wanted to, I could actually edit directly by adding or changing or editing what's here. So it's a really cool way to get started with motion or maybe to tune up motion. One thing that we learned in research. Is that motion really needs to be systematic. 36% of our teams are already using emotion design system with tokens for timing and for easing. And so that's exactly what we built support for. You can now create 2 variable types specifically for motion. So I'm going to show us how to do that in our variables panel. You can see here we'll create a new collection, we'll call this Motion Tokens. And you can see here now we have a timing variable and we also have an easing variable. So I'm going to create an easing variable. Let's call this ease in. And you can see here we have a couple of kind of Figma created easing styles, but we also have the ability to add your own custom bezier, which you can then directly interact with in the graph as well as custom spring. And you can both like add and create what you want here. But also you could input the values that are specific to your design system once we've created this variable. They can actually just go and apply them in the same way that we would do this anywhere else. So for example, if I wanted to apply the easing variable that we just created to the moon, for example, in the rotation, I would select the moon rotation that we have here. And what I could do is in the panel, I can now actually apply the variable specifically. So you can see here I can select easing. And now my rotation should be design system compliant. And that's just the beginning for design systems support. We have so much more coming, so stay tuned. So before I hand this off to Dev Kelly, can you take a look? What do you think? Yeah, so I left some comments when you were adding the motion. And specifically over here, I called out this timestamp where I think we can make the stars and stay a little bit smaller just to emphasize the twinkle. What do you think? Yeah, that's great. And it's really helpful that it maps it exactly to the timestamp. Yeah, I just put it on the timeline where we want that changed. Well, this is all looking awesome. Thanks, Priscilla. But I think I have some ideas for how we can reposition some of these cards and possibly add a little bit of dimension to this world of astrology. So I'd love to explore some positioning changes. I'm gonna actually go over to my effects panel and apply the new 3D transform to this card so that we can change the perspective and dimension a bit to make the cards look more spatial. So right over here I've applied my 3D transform effect and I'm just going to play around with this cube until I get the desired spatial look that I'm looking for. So right away we can see that this card is being transformed in the XY and even Z axis so that we can get. That sort of realistic card tilt effect. I'm going to do the same thing with my back face of this card. And apply the same amount of rotation. Awesome. So I can even take this a step further and take this flat card layout and make it look like it's a fanning out, almost like I'm a fortune teller trying to give you a choice of the horoscope cards. So how would do this is I'm going to select all of these cards and add a little bit of a negative gap to make them look like they are all stacked mean recenter that and then I'm going to apply my 3D transform just like I did with those individual. Arts and how cool is that? They're all like kind of rotating and and they look like they're in 3D space. I can adjust each axis individually to get the exact desired fan out effect that I'm looking for. Well, this is looking pretty realistic, but what will take the realism even further is if I could add perspective to the container. And what perspective will do is it'll help us maintain the focal distance of these cards, almost as if I'm viewing all the cards in the same point of view. So if I drag out the perspective value here, you can see that the cards are kind of fanning out and almost like I'm moving closer and farther away from the object. By the way, all these properties are mapped to CSS, which is really powerful. And just like that, these new 3D transform properties gave me exactly the spatial effect that I was looking for. What do you think? Looks amazing. Awesome. Now that the cards are positioned in 3D space would really bring this to life. Is animated the experience? I want to make it actually feel like you're choosing. Card from this fanned out stock and that's why I'm really excited for 3D transforms to work seamlessly with motion, especially using those techniques that Priscilla just showed us. So I actually just created this effect prior to this jam, which is all the way over here and it kind of demonstrates exactly what we've been describing, which is fanning out the cards, moving the camera through the cards, picking that card and flipping it over. And I think it's really cool that we can create all these experiences in Figma. So now we're ready to export. I'm going to head over to maybe this frame that the agent helped us build and go over to my export panel where now we can see there's a new animated tab before things created in motion. I can export in the format of MP4, WebM, GIF, and SVG, and more formats to come. We're also so excited to share the animation is also completely backed by code. There's no more need for devs to rewatch and watch an MP4 and rebuild motion from scratch. And when I select a layer and I come into dev mode, you can start to see here. Now we have a new. Section called motion and this is the entire code backed version of what we just built. Additionally, we support JSON, React and CSS and this was really important for us to also have support for MCP. So we're really excited about this. So what is designed, well we just made is actually what's going to ship. No need for rebuilding and no reinterpretation. We love bridging the gap between design and code. Cool. Well, we've had so much fun building and experimenting with this, and we can't wait to see where you take it. Please share your creations and feedback with us, and we're so excited to see what you create.