Tutorials
End-to-end walkthroughs: a launch video, an interactive button, a draggable toggle, a logo reveal, a component list, a social loop, a team review, Claude, the Figma round trip and a Figma button with Auto Layout.
- Your first product launch animationFrom one prompt to a finished MP4: describe it, steer it with feedback, tune the feel and render a video.
- An interactive button with statesBuild a pay button that goes Default → Hover → Pressed → Loading → Done, try it on the stage and export a React component.
- A toggle with color states and a dragBuild a switch that turns green and changes its label, toggles on tap, drags on and off like iOS, and exports as a React component.
- Logo reveal: trace, draw on, export LottieTurn a PNG logo into vector paths, draw it on with trim, fill it in and export Lottie for the web and apps.
- A staggered list with a componentBuild a notification row once, expose its text as props, place four copies with their own start times, and add a read variant.
- A social loop with sequences, transitions and musicTurn app screens into a 9:16 story with matched transitions, a camera, a seamless loop and music on the beat.
- Reviewing with your teamLeave notes on the stage, share a link your team can comment on, and let the AI work through the feedback.
- Using EaseKit from Claude via MCPConnect EaseKit to Claude Desktop or Claude Code, then create, refine, check and export animations from a Claude conversation.
- Figma round tripImport a Figma frame as layers, animate it in EaseKit, and paste key frames back into Figma for Smart Animate.
- Animate a Figma button with Auto LayoutImport a button component set from Figma, let its Default, Hover and Pressed variants switch on hover and press, watch an icon appear while the label reflows, and export React.