{"schema":"https://www.layerpath.com/schemas/public-document/v1","version":1,"id":"/learn/how-to-animate-in-figma","route":"/learn/how-to-animate-in-figma","canonical":"https://www.layerpath.com/learn/how-to-animate-in-figma","title":"How to Animate in Figma","h1":"How to Animate in Figma","description":"Discover the art of animation in Figma with our comprehensive guide. Learn techniques, tips, and tricks to bring your designs to life effortlessly.","archetype":"tutorial","blocks":[{"type":"heading","depth":1,"children":[{"type":"text","value":"How to Animate in Figma"}]},{"type":"paragraph","children":[{"type":"text","value":"This guide provides a step-by-step process for creating animations in Figma. Follow these simple instructions to enhance your Figma projects with engaging animations."}]},{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9inubv50006jv0do9iolt2w/tour","canonicalUrl":"https://share.layerpath.com/e/cm9inubv50006jv0do9iolt2w/tour","id":"cm9inubv50006jv0do9iolt2w"},{"type":"list","ordered":true,"items":[{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Open Prototype Mode"}]},{"type":"text","value":" – In the top-right corner, click on the "},{"type":"strong","children":[{"type":"text","value":"“Prototype”"}]},{"type":"text","value":" tab to switch from design to interaction mode."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Create Multiple Frames (States)"}]},{"type":"text","value":" – Make different frames for each “state” of your animation. For example, one frame with a button at rest, another with it hovered or clicked."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Link Frames Together"}]},{"type":"text","value":" – Select an element (like a button), then click and drag the blue "},{"type":"strong","children":[{"type":"text","value":"“Prototype node”"}]},{"type":"text","value":" (small circle on the edge) to the next frame."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Set Trigger Type"}]},{"type":"text","value":" – In the right panel, under "},{"type":"strong","children":[{"type":"text","value":"“Interaction details”"}]},{"type":"text","value":", choose a trigger like:"}]},{"type":"list","ordered":false,"items":[{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"On Click"}]}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"While Hovering"}]}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"After Delay"}]}]}]}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Choose Animation Type"}]},{"type":"text","value":" – Under "},{"type":"strong","children":[{"type":"text","value":"“Animation”"}]},{"type":"text","value":", select the type of transition:"}]},{"type":"list","ordered":false,"items":[{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Instant"}]},{"type":"text","value":" – No animation"}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Dissolve"}]},{"type":"text","value":" – Fade between frames"}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Smart Animate"}]},{"type":"text","value":" – Auto-animates similar elements across frames"}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Move In/Out"}]},{"type":"text","value":" or "},{"type":"strong","children":[{"type":"text","value":"Push"}]},{"type":"text","value":" – Slide elements in/out of view"}]}]}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Customize Animation Settings"}]},{"type":"text","value":" – Adjust the animation "},{"type":"strong","children":[{"type":"text","value":"duration"}]},{"type":"text","value":" and "},{"type":"strong","children":[{"type":"text","value":"easing"}]},{"type":"text","value":" (e.g. ease in/out, linear) for smoother or snappier effects."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Preview the Animation"}]},{"type":"text","value":" – Click the "},{"type":"strong","children":[{"type":"text","value":"Play (▶️)"}]},{"type":"text","value":" button in the top-right to launch the prototype and watch your animation in action."}]}]},{"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"Done"}]},{"type":"text","value":" – Your animation is live! Use more transitions and smart animate for a complete interactive prototype."}]}]}]}],"tours":[{"type":"layerpathTour","sourceUrl":"https://share.layerpath.com/e/cm9inubv50006jv0do9iolt2w/tour","canonicalUrl":"https://share.layerpath.com/e/cm9inubv50006jv0do9iolt2w/tour","id":"cm9inubv50006jv0do9iolt2w"}],"plainText":["How to Animate in Figma","This guide provides a step-by-step process for creating animations in Figma. Follow these simple instructions to enhance your Figma projects with engaging animations.","https://share.layerpath.com/e/cm9inubv50006jv0do9iolt2w/tour","Open Prototype Mode – In the top-right corner, click on the “Prototype” tab to switch from design to interaction mode.\nCreate Multiple Frames (States) – Make different frames for each “state” of your animation. For example, one frame with a button at rest, another with it hovered or clicked.\nLink Frames Together – Select an element (like a button), then click and drag the blue “Prototype node” (small circle on the edge) to the next frame.\nSet Trigger Type – In the right panel, under “Interaction details”, choose a trigger like: On Click\nWhile Hovering\nAfter Delay\nChoose Animation Type – Under “Animation”, select the type of transition: Instant – No animation\nDissolve – Fade between frames\nSmart Animate – Auto-animates similar elements across frames\nMove In/Out or Push – Slide elements in/out of view\nCustomize Animation Settings – Adjust the animation duration and easing (e.g. ease in/out, linear) for smoother or snappier effects.\nPreview the Animation – Click the Play (▶️) button in the top-right to launch the prototype and watch your animation in action.\nDone – Your animation is live! Use more transitions and smart animate for a complete interactive prototype."]}