![]() ![]() For example, let’s select the vector paper plane. If you select any vector illustration and inspect the ‘Prototype’ panel, you can see the interaction details of the animation. An SVG vector illustration that will be the starting frame of the animation.Look at the ‘Animations’ component, which contains the card animations. ![]() Copy the visual assets provided into the card.īefore we add the animations within the card, let’s take a look at how they work.Now we’ll add the visual assets and animations within the card. Add the visual assets and animations within the card Drag the visual assets into the card Drag this card into the ‘Card Border’ frame.Ģ.Enable “Clip content” in the right-hand properties panel.Any random color will do – it’s just to help you differentiate the background against the visual assets that you’ll insert later. Give the frame a width of 350 px and a height of 590 px.Give the frame a width of 360 px and a height of 600 px.Click and drag in the canvas to create the frame.Press the keyboard shortcut ‘F’ to use the frame tool.To set up the cards in your Figma design, we’ll first start with the main frame of the card. To follow along, duplicate the Figma file and Adobe After Effects file for this tutorial. Watch the video above, or scroll down to read a written version of this tutorial. How to import the animation into Figma to create animated hover effects for card and button elements.How to export this animation as a Lottie animation. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |