Chrome extension · Figma plugin
Bring any website animation into Figma
Capture an animation on a live page in Chrome. Open it in the Capture Motion Figma plugin. You get a Figma Motion timeline with the real keyframes, durations and easing curves, ready to edit.
No account needed to capture and preview in Chrome.
Stop rebuilding motion by eye
The usual way to get a website animation into Figma is to record the screen, step through it frame by frame and guess the numbers. The result is close, but never the same. Capture Motion reads the values the browser actually ran and rebuilds them in Figma, so the timeline starts from the real thing.
Real keyframes
Each animated property comes in as its own track: position, scale, rotation, opacity, color and size, with the values captured from the page.
Real timing and easing
Durations, delays and easing curves are kept per property. A 420 ms ease-out with a 60 ms delay stays a 420 ms ease-out with a 60 ms delay.
Editable, not baked
It is a Figma Motion timeline, not a video. Change a curve, stretch a duration or restyle a layer, and keep iterating in Figma.
How it works
- Capture in Chrome. Open the page, click the Capture Motion extension and pick the element. Hover, click or scroll so the animation plays. The extension records every animated property.
- Check the preview. Replay the rebuilt element in the extension to make sure you caught the whole animation.
- Paste it in Figma. Click Capture Motion in the extension to copy the capture, run the Capture Motion plugin in your Figma file and paste it in. It is rebuilt as layers with a Figma Motion timeline.
- Make it yours. Swap in your own visuals, tune the timing, and use the same capture to hand exact values to developers.
What designers use it for
Motion references
Collect the micro-interactions you like from real products and keep them in Figma as working timelines, not screenshots with notes.
Matching an existing product
Rebuilding a flow that already ships? Capture the live version so the Figma prototype moves the way production does.
Cleaner handoff
The same capture exports as CSS, React or JSON, so the developer builds from the numbers you designed with. See animation to code.
Capture Motion records motion, not page layout. If you need a whole page as static Figma layers, a tool like html.to.design does that well. Read how the two compare.
Learn the details
Questions
Can I import a website animation into Figma?
Yes. Capture it with the Capture Motion Chrome extension, then copy it and paste it into the Capture Motion Figma plugin. The plugin rebuilds it as a Figma Motion timeline with the captured keyframes, durations, delays and easing.
Is it a video or real layers?
It is not a screen recording. The plugin builds layers and animates their properties on a timeline, so you can change a duration, swap a curve or restyle a layer and the motion follows.
Which animations can I bring into Figma?
Anything the extension can capture: CSS transitions and keyframe animations, the Web Animations API, GSAP and Lottie. Hover animations are captured with a real hover state.
Do I need an account?
Capturing and previewing in Chrome needs no account. A free account is needed to copy or download a capture, which is how it gets to Figma. See the pricing page for plan details.
Does html.to.design do the same thing?
No. html.to.design imports a page's layout and styles into Figma as static layers. Capture Motion captures how elements move. Many teams use both: one for the layout, one for the motion.