For designers
Motion references you can actually use in Figma
Capture the UI animations you admire on real websites. Open them in Figma as Figma Motion timelines with the real keyframes, timing and easing. Hand developers the exact values instead of a video and a description.
Made by Crafttor. No account needed to capture and preview.
The problem with motion references
Most motion references end up as screen recordings in a folder or links in a board. They show the feeling, but not the numbers. When it is time to design your own version, you are back to guessing durations and drawing curves by eye. Then the developer guesses again.
Collect
Capture any animation on a live page: a button press, a menu, a card hover, a hero entrance. CSS, GSAP, Lottie and the Web Animations API all work.
Rebuild in Figma
The Figma plugin turns a capture into a Figma Motion timeline with each property on its own track, so you start from the real motion and change what you need.
Hand off exact specs
Export the same motion as HTML and CSS, React, JSON or an AI prompt. The developer builds with the durations and curves you designed with.
A workflow that keeps the numbers
- Find it. You notice a good interaction on a product site.
- Capture it. Pick the element with the Chrome extension and play the animation. Hover animations are triggered with a real hover state.
- Design with it. Copy the capture from the extension and paste it into the Figma plugin, swap in your own layers and tune the timing on the timeline.
- Ship it. Send developers the code export or the AI prompt, so the build matches the design. See animation to code.
Start from a ready component
Not every project starts from someone else's site. The Capture Motion gallery has ready animated components, such as a slide-to-confirm button. Change the speed and the per-card controls, save your version to My Gallery, and export it the same way as a capture.
Customize
Adjust speed and each card's own controls until the motion fits your product.
Save
Keep your edited versions in My Gallery, next to your captures.
Export
Take it to code or to Figma like any other capture.
Have only a static mockup? Animate Image splits a screenshot into layers you can animate.
Learn the details
Questions
Do I need to know code to use Capture Motion?
No. You pick an element in Chrome, play its animation and open the capture in the Figma plugin. The code exports are there for when you hand off to developers.
How is this better than a screen recording as a reference?
A recording shows how something looks. A capture gives you the numbers behind it: keyframes, durations, delays and easing for every property, and it opens in Figma as an editable timeline.
What can I give developers?
The same capture exports as a self-contained HTML and CSS file, a React component, JSON, or a prompt for AI coding assistants. Everyone works from the same timing and curves.
Can I customize the components in the gallery?
Yes. Each gallery card has speed and per-card controls. Adjust it, save your version to My Gallery, and export it like any capture.
Is it free?
Capturing and previewing need no account. A free account lets you copy and download. See the pricing page for plan details.