How to import a website animation into Figma

Designers have always been able to bring a website's layout into Figma. A screenshot works, and HTML-to-design plugins go further and give you real layers. The motion is the part that gets lost. You end up with a still frame of a page that was alive, and a note saying "make it feel like this".

This guide shows how to bring the animation itself into Figma: real keyframes, durations and easing on a timeline you can edit. It uses the Capture Motion Chrome extension and the Capture Motion Figma plugin. For the bigger picture, see website animation to Figma.

A quick note on animation in Figma

Figma has added timeline-based animation to Figma Design, often called Figma Motion. Instead of only linking frames with Smart Animate, you can animate layer properties over time with keyframes and easing, on a timeline, inside the design file.

That matters for this workflow. A timeline is the same shape of data that a browser uses to play an animation: a property, a list of values over time, a duration, a delay and an easing curve. So a web animation can be translated into a Figma timeline instead of being redrawn by hand.

Figma's motion features are still developing, so details of the interface may change. The idea in this guide does not depend on any one button.

Why copying motion by eye is slow

The usual approach is to record the screen, scrub the video, and rebuild the animation in a prototype. It works, but it costs time and it drifts.

• You guess the duration. At 60 frames per second, a 300 ms transition is 18 frames. Being off by a few frames changes the feel.
• You guess the easing. Easing is the hardest thing to judge from video. An ease-out and a cubic-bezier(.22, 1, .36, 1) look similar in a recording and quite different in a product. Our guide on finding the easing curve of an animation explains why.
• You miss tracks. A card entrance may animate opacity, position, scale and a shadow, each with its own delay. Video shows the result, not the parts.
• Staggers multiply the work. Ten list items with 40 ms between them is ten tracks to line up by hand.

Reading the values from Chrome DevTools is more accurate, but it is still manual, and it does not cover GSAP or Lottie at all. The guide to copying an animation from any website compares the two approaches.

Step by step: website to Figma

You need Chrome, the Capture Motion extension, the Capture Motion plugin in Figma, and a free Capture Motion account for the export step.

1. Install both parts. Add the Capture Motion extension from the Chrome Web Store, and open the Capture Motion plugin from the Figma Community in the file you want to work in.
2. Open the page in Chrome and scroll to the animation you want.
3. Start the extension and pick the element. Click the Capture Motion icon in the toolbar, then click the element on the page. If several children animate together, pick the container so you get all the tracks.
4. Play the animation. Trigger it the way a visitor would: reload, scroll, click or hover. Hover animations are triggered with a real :hover state through the Chrome DevTools Protocol, attached only while the capture runs.
5. Check the preview. The extension replays what it captured, with each animated property and its keyframes, durations, delays and easing. Capture and preview do not need an account.
6. Copy the capture. Sign in with a free account and click the Capture Motion button in the extension popup. It copies the capture to your clipboard as JSON.
7. Paste it into the Figma plugin. Open the Capture Motion plugin in your Figma file and paste. The plugin rebuilds the capture as a Figma Motion timeline in Figma Design, with the captured keyframes, timing and easing.

Tips for a clean capture

The quality of what lands in Figma depends on what you capture. A few habits help.

• Pick the smallest container that holds the whole motion. Picking the full page brings in tracks you do not want. Picking a single child can miss the parent's movement.
• Trigger it the normal way. If the animation runs on scroll into view, scroll to it. If it runs on load, reload. Animations can behave differently when they are started out of order.
• Close banners and pop-ups first. A cookie banner sliding in at the same moment is just noise in the timeline.
• Use a normal window size. Many sites change their motion at different breakpoints. Capture at the size you are designing for.

Edit the timeline

Once the animation is in Figma, it is yours to change. A captured animation is a starting point, not a final answer.

1. Swap the layers. Replace the placeholder content with your own components. Keep the animated layers' names and structure where you can, so the tracks still line up.
2. Tune the timing. Adjust durations and delays to suit your product. A marketing site can afford a 700 ms entrance; a settings screen usually cannot.
3. Adjust the easing. Keep the captured curve if it is the reason you liked the animation. If you change it, change it for every track in the group so the parts still move as one.
4. Trim what you do not need. Websites often animate more than they have to. Removing a blur or a second shadow track rarely hurts the feel and makes the build cheaper.
5. Check reduced motion. Decide what the animation becomes when the user asks for less motion. Usually that is a short fade with no movement.

Hand it off to developers

The point of starting from captured data is that design and code can share one source of numbers. Before you hand off:

• Write the values next to the frame. Duration, delay and easing for each track, in milliseconds and cubic-bezier() or linear(), which is what developers will type.
• Share the code too. The extension popup shows the same capture as code in CSS, React and GSAP tabs (plus Lottie when the source is Lottie), each with a Copy button. Copy for LLM copies the JSON with a ready-made instruction for ChatGPT or Claude, and you can also download a self-contained HTML and CSS file. See animation to code for what each one contains.
• Name the trigger. Say whether it runs on load, on scroll into view, on hover or on click. That is often the detail missing from a handoff.

A small table in the file helps:

The values above are an example of the format, not taken from a real capture.

How this differs from HTML-to-design tools

HTML-to-design plugins are good at layout. They read the DOM and produce frames, auto layout and text layers. What they produce is a still snapshot. The motion on the page is not part of their output. Capture Motion does the opposite: it focuses on the timeline, and leaves the layout to your own design. Many teams use both. We compare them in more detail in an HTML-to-design alternative for animations.

Where to go next

If you are a designer working mostly in Figma, Capture Motion for designers walks through the workflows that matter to you. If you want a head start without capturing anything, the gallery has ready animated components you can customize and send to Figma or code.