Figma Motion: Design and animate assets with AI

Speaker A: Hey Leo.

Speaker B: Hey man. How's it going?

Speaker A: All good, Good, good, man. How about you? How was, uh, good. How's everything going on your side? How was the trip to Italy?

Speaker B: Uh, good, good, man. Been to Italy for like, um, two weeks or something like that. Maybe less than two weeks, 12 days. Um, to visit my friends and family. It's been nice, as always. Um, warmer actually than here in the Netherlands. As we speak in. We have to continue also with the topic of the weather because in every episode we talk about the weather. So we do it. Keep the traditions which we need to.

Speaker A: We'll continue to talk about it. Yeah, yeah, no, it's even warmer than here in the Netherlands.

Speaker B: Yeah, definitely. Yeah, it was, it was. Um, but also here right now is going pretty well, actually. Yeah, part of today. Today is like a bit cloudy, but

Speaker A: it is, I mean, it's nice. It's nice. Yeah, it's nice. It's uh, you know, uh, those warm days are fine. Uh, you know, but it's also nice that it cools down a bit, you know?

Speaker B: Yeah, sometimes. Sometimes, uh, it's needed.

Speaker A: Yeah, it is, man. It is cool down after the, uh, the hot moments. But um, no, I mean, great to hear that. You had uh, a great trip to, to uh, Italy, visiting some friends and family.

Speaker B: Uh, yes, but I've heard, I've heard that today we're gonna talk about. And playing around with Figma Motion. Right. Which is more interesting than me.

Speaker A: Yeah.

Speaker B: Going into, uh.

Speaker A: Good that you mentioned this. Yeah, yeah, we will talk, uh, about Figma Motion. Not, um, only Figma Motion, but more in general to talk about, uh, how to kind of like animate marketing assets or actually create marketing assets without having any materials in place. So basically let's say you are a marketing manager or you're a marketing person and you need to create visuals. Um, you can just open up cloth, uh, add a prompt, go into Figma, uh, it will all appear there, whatever you prompt in, uh, cloth. And then you can just customize uh, along the way. Um, and in that canvas of Figma, you can just animate all the stuff as well. So that's a very nice thing to do, a very nice flow. Um, and the good thing about it is that usually it took uh, a lot of, uh, different, well, different pioneers to do this right. You needed a designer, you needed After Effects, you needed all the stuff basically, ah, that as a marketing person, you not always are very, very talented at or very good at. Um, and the good thing about this. Yeah.

Speaker B: Oh, sorry, Go ahead, go ahead. You Know what? As a designer, I think that, uh, I've always been like, very intimidated by After Effects user interface because I think it's really. It's more complicated than it should be. Yeah. Um, um, so I truly believe that it's going to be like a game changer. Figma Motion. Right? Because, uh, for me, that I'm just a web designer, like a cool web designer that doesn't need too much fancy stuff. I just need, um, just simple stuff like animations and uh, I think, uh, yeah, not only for a marketing person, but also for designers like me that doesn't need, you know, something difficult to use or something like too much complicated like as After Effects. It's right now. So.

Speaker A: No, I do agree, man. I said talented in my previous sentence, but I basically meant, uh, that it's more like, um, you don't need to be a, you know, professional in, In After Effects or other tools. I always give the example, uh, of. Of let's say, of a photo camera. Right. Uh, you can be very talented in taking photos, but understanding the full camera options and stuff is very complicated. And it's the same with After Effects. It comes with a lot of advanced settings. Uh, you need to manually do all the keyframes and stuff, and that can require a lot of, you know, time. But also you need to be very well, um. Well, you need to be kind of like profession. Your profession needs to be in animation, right? And it takes time to learn that.

Speaker B: Tutorials 100%.

Speaker A: Um, and now kind of like in a minimal way, I would say, because it works very nice in Figma Motion. Uh, it's not so advanced as you would probably expect in After Effects, but still it's. It's very good and very useful for creating quick prototypes, but also creating very nice marketing assets in a very fast way. So I think it's very nice to just show this to everyone. What is possible within very minimal assets and very minimal materials. You can just. And in a very fast time, you can just create the nice visuals and marketing assets. And I think it's very nice to show this to everyone.

Speaker B: Uh, yeah, definitely. Do you have something to m. Show me?

Speaker A: Uh, well, my idea of this, uh, 20 minutes is just to get to start from scratch and just show everyone, uh, again, how easy it is. Uh, let me share my screen and we'll, uh, go there. The first thing to show here is the actual chat of, uh, Claude. We'll just prompt, uh, eldest prompt, a very simple prompt. Um, let me quickly check what I can say, but what I Need is basically, um, this is my Figma file.

Speaker B: Ah.

Speaker A: And then I say something like, I need you to read the design file carefully. Uh, and create eight marketing assets with the following topics. Uh, new feature, new website, new podcast. Create um, age variants in total.

Speaker B: Do you have a question regarding this? Um, is it required to have Fable 5 or you can just use like other, um, models like Opus or Sonnet.

Speaker A: Good question. I think, uh, you can use Opus as well. Uh, or Sonnet. It's pretty as it says, efficient for everyday tasks. What I find Fable 5 is more advanced. Uh, listen better to what you actually are asking. So I uh, use Fable 5 for this example, but you could use Opus for Potato Solid five as well. Fable takes a bit more credit, so it takes more, more. Yeah, as I said, more credits to create a prompt. So keep that in mind. Uh, not everyone has access to fail, but Opus 4.8 is also. Opus 4.8 is also very great. So um, yeah, in this example we use this.

Speaker B: Oh yeah. In any case, uh, sorry man to keep interrupting. Now I was, I was saying that, uh, in any case it's a really good use of tokens. So. Yeah, I mean, I wouldn't, I wouldn't mind to use tokens for this kind of stuff.

Speaker A: No, you're right. And I think, uh, that's actually a good point that you said about tokens. Uh, I mean, this is me freestyling, uh, because that, that's not the ideal way of spending your tokens, of course. But for this example I do it like this. But let's say I need a more advanced system. More, uh, well, pretty much more, um, or better result. I would basically say I would prepare this prompt a little bit better, adding more angles, adding more context, adding more colors, etc. But for now I'd like to have Claude think for me. So basically Claude is the designer here. Um, I just want to have minimal prompt and maximum output. I know that sometimes hard. But in this example I would just keep it simple. Um, we can dive into how to create good prompts, design, uh, prompts in different videos. Um, yeah, the goal of that is just to limit your token spent. Um, yeah, so for now I will just uh, click on this and then we'll jump into Figma to check the result.

Speaker B: Mhm. Perfect.

Speaker A: All right. Okay, cool, let's go. Um, so first of all, the result is this. This is very nice. Is exactly what I asked Claude. I asked Claude to create a new feature, release a new website, a new podcast episode. So I did all that. Um, how did Claude end up with this result. That's important to show you. Uh, because it's also important that you prepare this file a bit. Um, in Figma, I created a marketing asset format so Cloud knows what formats I need. I don't need to say that in the prompt because Cloud will just read it anyway in the Figma file. So that's very good and very nice. Um, I created a super simple style guide just with a couple of colors that I like. Also uh, typo. I just did it very simple. Said typo needs to be entered. Um, I added a couple of examples just of colors that I like. Uh, and the preferred style that I want to go for. Um, and this is actually all that Claude needs in order to create this 8 uh, well 8 marketing visuals which is very nice, right? Like minimum input.

Speaker B: That's amazing.

Speaker A: And it already gets to this result. So uh, yeah, I think that's very, very nice. Um, so yeah, what can you do now? Right, like you have a couple of options here. Um, yeah, I'm a huge fan of uh, spending my time rewise. So what I usually do, for example now it says my brand. I want to change that to uh, no go. Um, but basically what I will do is I will select uh, all these artboards. M and then the fun part is that I have a check mark here, right. But I can say like uh, please change add my brand to add no go. It's a text my brand to Noko, right?

Speaker B: Mhm.

Speaker A: Takes a bit of time. We can speed it up in the final video but for now uh, it does the job. It's thinking about uh, output, uh, change probably scanning the board.

Speaker B: Mhm.

Speaker A: Um, and as you can see it gives an indicator of ah, all the boards. And now the result is that all the text is being changed to no go.

Speaker B: Amazing. I think this is nuts. I mean it's really valuable because just from a starting point as a prompt or an idea, you can have the full assets with different colors in just like in two minutes. It's amazing. And other than that you can also have different ideas on colors that you want to use for your brand which I think it's also really valuable thing

Speaker A: I want to show you as well. So right now I just changed text and no go. Um, but what is also very cool to do um, yeah quickly move the board. Um is for example, let's say I pick a favorite, right? I like this one. Um, right now actually it did all the same kind of blur, uh, circles. But that's fine. But uh, what I can do is actually moving this one here and just say because now I am here. Right. Claude did the thing. Cloud actually gave me eight sports, which is nice, eight designs. But uh, now I want to stay in Figma and I want to explore there. So what I do then is uh, actually ask the AI of um, Figma and ask like uh, can you create or variants based on this style with different um, background circles, keep the blur, change the colors, keep text in place. Now actually the AI will um, made a couple of variants as I prompted. But the nice thing about this is just I use cloth, actually the normal cloud right now for um, you know, putting uh, some ideas in figma. After that I can use those ideas to create variants in figma.

Speaker B: Mhm.

Speaker A: Um, and then from here I can just explore whatever I like and it can take as long as possible. I can create as much assets and variants that I like because it's quite fast, you know, it just does, yeah, a couple of things. Uh, right now it's creating a couple of variants. Um, it gives titles to the, to the designs. Um, and from here it's super nice because this, just look at this, right? Like it gives you quite a nice, nice stuff. It's not as in the early days of AI, you would probably need to tweak stuff here and there. But I mean look at this. Uh, it's already on a very good level, right?

Speaker B: Um, no, ah, it's a time saver.

Speaker A: This is cool.

Speaker B: Um, I don't have any other words. I think it's just like a real time saver for this thing is amazing. And also you can, as I said, you can have other ideas um, about colors and text and you know, brand stuff that maybe you don't, you didn't have before. And yeah, it's uh, also like a brainstorming tool, not only creating more exactly,

Speaker A: you can create concepts very fast. Uh, that's also nice, a uh, nice way uh, to use this. Uh, you know, but I mean look at this, right? Like I just. How long did I prompt for? 5 minutes or something. I already have a lot of cards that I can use. And this is only the beginning, right? Because this is all static. And what you can also do, which is also a very, very, very nice thing to show is let's say I want to bring those assets, uh, you know, to life. I want to add a bit of motion here and there. Um, I want to uh, this is a new podcast episode. I want to you know, add an image, uh, and a shape or something. So this is the stuff I create myself. You can also add the, uh, ask the AI to do this. I kind of like uh, to do stuff manually, uh, because I'm a designer, so I like to do stuff and still uh, be uh, productive, you know. Um, but what a nice thing about is that. Let's say I create a shape, a circle shape. Um, no, I make it a uh, vector file and I put it into my card.

Speaker B: Mhm.

Speaker A: Somewhere around here. Adding it to the corner or something just like that. And then maybe uh, yeah. Make the strokes a bit, bit more weight.

Speaker B: Mhm.

Speaker A: Need to be able to see them. Okay, I like this. So then I placed in a good corner, making it a bit bigger like that. Okay, cool. And now uh, I say to or I ask to Figma. Oh, basically first of all, I need to move to Figma animate. Right that's on the corner of the screen. I was in design mode and I go to animate mode right now, which unlocks kind of like a timeline on the bottom of your screen. And uh, that actually works exactly the same as it would work in After Effects. Um, but the good thing about this is you can just click on an element and go to the AI icon and actually say like I like to animate this circle 180 degrees or actually 360 degrees. Um, ease in out. Very smooth animation. Uh, yeah, it's actually what I want.

Speaker B: So now the AI a really simple prompt. You don't have to overdo.

Speaker A: No, exactly. Uh, this is just something I have in my mind. I want to have this rotating. I think that's a nice idea. Uh, gives a bit uh, of an animation to uh, the card. And this is actually me asking the AI and the AI will animate it. Uh, there's also presets which I will show later. You can just choose from. Uh, that could be very useful for titles or text. Uh, but for shapes. Right now, uh, I think this is just cool to let the AI do the job. It's almost done. Actually it's quite fast as well. Usually. Um, now it's done. Uh, I can preview it here in the timeline. This is the timeline I set before. Um, so what it does, it actually rotates, right.

Speaker B: Whoa, look at that.

Speaker A: I can control it. And if I play, it just does a very nice smooth animation. I set ease in out. It's exactly what it's doing. This is very nice.

Speaker B: Yeah, it is. And you can, if you can change the animation, uh, like the loop, uh, the ping pong animation. Do you have uh, settings for that?

Speaker A: You can actually do A lot of. So you can actually add keyframes and stuff. You can here click on the easing. You can change that. For example, I did ease in as I, as I asked. Right. But you can do a lot of uh, tweaks and stuff here as well.

Speaker B: Uh, yeah.

Speaker A: So yeah, you can do pretty much everything you like. You can add new stuff here as well. You can add opacity. Um, all that stuff is possible. Just as you would like. Um, to see an animation tool.

Speaker B: Uh, yeah, sure.

Speaker A: For now I keep the same.

Speaker B: Fully customizable then.

Speaker A: Exactly. That's super nice. But for example, the titles I want to. If you want to animate those, you can do presets, which is in the sidebar on the right side. Yeah, you can just say like I want to. Well actually these are all presets, so I can say like, okay, I want to, um, I don't know, just do something. I want to have it.

Speaker B: Mhm.

Speaker A: What shall we choose here? Well actually I want to have the position do a bit of manual work. The slide in from the left side. The distance needs to be uh, a bit, uh, more than this. So let's say I want to have a thousand distance or maybe, I don't know, 700. You see the example? You see exactly what it will do in the lines here? Yeah, um, ease out. I can also say ease in out, which is more smooth and then it does exactly that. Which is cool, right?

Speaker B: Yeah. That's amazing. This is not.

Speaker A: These are all. Yeah, these are all presets. So that's very nice to just use, especially for marketing purposes. It's just, ah, a very useful option. Um, yeah, but let's say I don't have any materials, right. So I want to show a photo of the podcast. What I can do is I drag a rectangle of the photo that I like, um, add it to the artboard somewhere, I don't know, around here needs to be a bit aligned of course with text. Otherwise doesn't look good. Just like that. Have it somewhere around here. Add a bit of corner radius.

Speaker B: Okay.

Speaker A: So here's the rectangle. But now I don't have any image to show. But what I can do is actually go to the fill and then go to the image option and say make an image. Right?

Speaker B: Yeah.

Speaker A: Then I say like I want you to create a podcast, um, photo in a nice dark video with ambient lightning, um, built on a professional Sony camera. Uh, well, this is it.

Speaker B: Right.

Speaker A: Let's say this is the uh, the prompt. And the good thing about it, it's Very fast. So when I create it, it's just seconds and then it already creates the image. That's exactly what I need. Now I have the title, I have the uh, photo and I have an animation. The good thing about it is I can animate this as well. So I'd like to, well, let's say can you make this photo slide in from the button? Take some time.

Speaker B: I think that this is just, Yeah, I think uh, just like starting with uh, simple prompt is helpful, but I think that the more specific you are, the better results you get. But yeah, just like even simple stuff, it works really, really well.

Speaker A: It is cool, right, what it, what it can do. And I think this is an example of course to you know, show marketing assets. Uh, but for example, it can also be work very co, uh, to show prototypes of websites, right. For landing pages, uh, etc. You can just prototype an animation, uh, of the navigation bar just to show your ID to the developer, for example, and then the developer can implement it exactly as you, uh, as you had in mind. So I think these are all, there are very, there are a lot of, um, a lot of things you can do with this. But look, I mean now it slides in from the bottom, right? This is already a nice, nice animation.

Speaker B: Nice. Yeah.

Speaker A: And this is just by prompting to the AI and a bit of manual stuff, but minimal. I only created the shape at the bottom, but the animation is all AI and the um, direction is all AI.

Speaker B: Mhm, mhm.

Speaker A: So yeah, this is basically um, Figma motion in a nutshell. You can do way more again with it, right? Like you can do way more advanced stuff. You can uh, animate your landing pages. Uh, and the good thing about this is that you can all create it inside of this board. Um, Claude will stay connected with the mcp. Uh, I forgot to say that to show how did we connect uh, Claude to Figma. We did it with an MCP with the connector. Uh, Figma basically, uh, needs your link. Your Figma link, sorry, Claude needs your Figma link and then it can read your entire Figma file. And the good thing about this is now that Claude knows in what file I'm working, uh, in, I can just jump back to Claude and for example, say, can you create another 10 variants? I can also ask that to Figma, but just, you know, Claude knows exactly what style I'm, I'm up to.

Speaker B: Yeah.

Speaker A: So, um, I think this is a very useful way to just explore a lot of variants, a lot of styles, uh, create animation whenever you need it. You can do it yourself. Um, without having to be a professional animator in After Effects. Exactly. For these kind of like mark, um animations. Um, and you can export them to whatever you file you like. You can do animated uh, or static. So static it just takes the screen, whatever uh keyframe you're at and animated it will export it to an MP4 file, webm, m, gif or SVG. Um, SVG. That will be sequences so it will not be a animated SVG file. Um and later on that's something I heard is that they will add the function to uh the feature to export it as a Lottie file as well. So that will be the uh, end goal because then you can just create animations in Figma, export them as a Lottie file, input them into your website. But I mean for social media you can just export it as an MP4 file. Right. Uh, you can use the frame rate, quality size. It will all impact the file size of course, but it's just very easy. You can export it as an MP4 file, upload it to your social media and you have an animated. Animated video.

Speaker B: Mhm, mhm. Yeah. I think it's just a matter of time actually that Figma will put out a new update with the Lottie uh, animation export. So yeah, no, for sure we just need. And then you can just to wait.

Speaker A: Yeah. And if that unlocks you can just ask Cloud to add it to your webflow. Right. For example uh, CMS with this, I mean it will, this will become better and better. But I'm, I'm very well, uh surprised. Very very, very positive, positively surprised about what can already do with, with Figma Motion. Uh, I used to go in After Effects a lot. I still do. For more um, well, more complicated animations I would say.

Speaker B: Mhm.

Speaker A: But I mean for this it works perfect. You can just create. Yeah. Anything you want.

Speaker B: I was thinking, I was thinking that also is useful for not only for marketing assets but also for presentations. Right. If you want to like do a ah, cool presentation with uh animations and slides that are animated. I think um, this is a game changer for that.

Speaker A: Yeah, it's very cool. I do fully agree also I think nice uh to show how advanced it is. This is going to be a bit of a gamble but I'm not sure but let's just say um animate

Speaker B: uh

Speaker A: this dots into a Google like loading animation and um first start with one dot, then do the loading animation with three dots. After the loading animation the three dots will become a full circle tool circle with dots spinning 60 degrees, all in A, easing smooth motion. This is just only a dot that I gave the AI. But let's see what it does, right? Maybe it just creates a nice animation.

Speaker B: Let's see how far it can go.

Speaker A: Didn't create any shape yet, just the circle. It probably will take a bit longer right now because the animation is a bit more complicated. Um, but yeah, I mean in the meantime you can just design other stuff, right? It will still continue to, to do the animation. You can just go back.

Speaker B: That's another, that's another cool point actually that you can design while the uh, the AI does this, uh, does the thing, right?

Speaker A: Yeah, yeah, that's really cool.

Speaker B: You're not like blocked or something. You can just like continue with your own stuff.

Speaker A: Yeah, exactly. That's very useful because, I mean, yeah, in the meantime you can just, I don't know, explore more styles, right? And it does the animation and probably put that on the second card. And then in the meantime I can just explore new stuff and styles and yeah, what I did here, for example with the no code text, uh, I changed it of course, uh, to, from my brand to no go. But the good thing about this is let's say you have a landing page and you need to change a lot of text, right? For example, a footer. The footer is usually uh, a component. So you need to change the text once. But oftentimes links will be updated and you don't want to do all the stuff manually. So you just ask the AI to change the footer links in the component and then it will be changed throughout all the, all your web design. So that's also very, a very nice thing and it saves a lot of time to use this Figma AI tool.

Speaker B: Um, yeah, no, definitely, man.

Speaker A: Because I mean as designers you usually always think about, you see examples, right? Like uh, I built this complete landing page with uh, with Figma AI or Claude is destroying uh, the design world or something like that. But I don't think that's the purpose of these tools. I think these tools are very much in the market to help designers work faster so they can focus on the creative, creative part and not focus on all the manual stuff. And I think that should be the goal of AI will design. And of course there's a lot of things you can, you can do with it. Yeah, unfortunately my screen, uh, crashed. So, uh, but yeah, still a lot of valuable stuff in this 20 minutes.

Speaker B: Very cool. Yeah, very cool stuff. Um, I'm confident for the, in the future right now. Yeah, yeah.

Speaker A: What do you think?

Speaker B: Yeah, I think that we're going to be more creative in the future. We have a lot of stuff. We have a lot of tools that helps us designers to, um, give more space to our creativity, you know? Yeah, it's kind of. It's more, um, and also, it's not like they. Yeah, it's also this. But it's. It could be like a new starting point for ideas. Maybe sometimes you don't have like a blank space right in your mind. You don't even know what to think that day to do that day. And having something or someone that, um, basically is a starting point for your new ideas for a brand and stuff, I think it's really valuable. I think it's nothing, uh, that you should put into the trash. It's something that you should use more and more to become in order to become really good at it and, uh, to not be replaced by that. And I think that, uh, it's, um. Yeah, uh, it's amazing. This is nuts. Uh, I've waited for this for a long time and I've been waiting for this for a long time. So, um, it's cool. Really, really cool.

Speaker A: Yeah, no, it is. It's very nice to see this, uh, you know, these features being added to, uh, our favorite tools. Um, yeah, I'm not sure if, uh, if everyone catch that it. But my screen, uh, crashed. Uh, that was, um, well, a couple minutes ago. Reason why is I was, uh, working in the browser, not in the Figma app. So, yeah, it just timed out. So it crashed a little bit happened, uh, for me, for the first time. But I mean, that stuff happens. Right, but hopefully everyone, uh, got my point. What I was saying was that like the AI nowadays and you see a lot of messages on social media that people say, like Cloud, uh, is destroying designers or Figma is destroying, um, developers or anything like that. But I do think that that's not the goal of those tools. They add these features to make life simpler, to, um, make sure that designers can focus on creativity instead of all the manual work. Um, and what you said, right, like, you can just conceptualize things very fast. You can just explore things very fast. You can animate it right now, which is very nice, and just explore it yourself. And I think that's a very good thing. And yeah, I mean, I think it's a very nice, uh, 20 minutes. We didn't show everything. We can show way more in another episode where we dive more into advanced animations or how it will impact how we, you know, design landing pages, for example, or prototypes. Um, but for now, this is it. Um, hope you guys enjoyed. Uh, thanks, uh, thanks, Leo, for, ah, for, for the time and, uh, and being.

Speaker B: Thank you, man.

Speaker A: And collaborator on the call and. Yeah, up to the next one, man.

Speaker B: Up to the next one. Yeah. Looking forward for that.

Speaker A: Looking forward.

Speaker B: Ciao, man. Bye, bye.

Speaker A: Bye, bye.