html.to.design alternative for animations: when you need the motion too

If you search for an html.to.design alternative, you usually want one of two things. Either you want a different way to import a web page into Figma, or you imported a page, noticed it stands still, and want the animations too. This post is about the second case.

html.to.design and Capture Motion both take something from a live website and put it in Figma. They capture different things. One gives you how a page looks. The other gives you how parts of it move. Knowing which job you have makes the choice easy, and for many projects the answer is both.

What html.to.design does

html.to.design is a Figma plugin that imports a web page into Figma as editable design layers. You give it a page and it rebuilds the layout: frames, text, images, colors and styles, as layers you can select and change. It is a good tool for that job and many designers rely on it.

Typical reasons to use it:

• Auditing an existing site before a redesign.
• Starting a redesign from the current production page instead of a blank frame.
• Pulling a competitor's layout into a board for review.
• Recovering a design file for a site whose original source was lost.

What you get is a snapshot. It captures the page as it is rendered at one moment. Animations, transitions and hover effects are about time, and a snapshot does not hold time. That is not a flaw. It is just a different job.

What Capture Motion does

Capture Motion works on motion. It is a Chrome extension plus a Figma plugin. In Chrome you pick an element and play its animation. The extension records the keyframes, durations, delays and easing of every animated property while it runs. It works with CSS transitions and keyframes, the Web Animations API, GSAP and Lottie, and it triggers hover animations with a real :hover state.

You can then take that capture in several directions:

• Into Figma. The Capture Motion Figma plugin rebuilds it as a Figma Motion timeline with the captured keyframes and easing. See website animation to Figma.
• Into code. A self-contained HTML and CSS file, a React component or JSON. See animation to code.
• Into an AI assistant. A prompt for Claude, ChatGPT or Cursor that carries the exact motion spec.

Capturing and previewing need no account. A free account is needed to copy or download. Captures stay in your browser unless you save them.

Side by side

The table is not a scorecard. Each column describes a tool doing what it was made to do.

When to use html.to.design

Use it when the layout is the point. If you are redesigning a marketing site and want the current pages as a starting file, importing them saves hours of redrawing. If you want to compare how three competitors structure their pricing pages, static layers are exactly what you need. Motion does not matter much in those tasks.

When to use Capture Motion

Use it when the movement is the point. Some examples:

• A teammate shares a link and says "make our menu open like this". You need the duration, the stagger and the curve, not a picture of the open menu.
• You are building a motion library in Figma and want references with real numbers, not screen recordings.
• A developer asks for the spec of a hover effect. You want to hand over the actual easing, not "something springy".
• The site uses GSAP or Lottie, so DevTools' Animations panel does not tell you the full story.

In all of these, a static import would give you the element in one state. A capture gives you every state in between, with timing.

Using both together

The two tools fit into one workflow without overlap. Here is a common way to combine them on a redesign.

1. Import the page. Use html.to.design to bring the current page into Figma as layers. This is your layout baseline.
2. Find what moves. Open the live page and note the parts that animate: the nav, cards on hover, a hero entrance, a tab indicator.
3. Capture each one. With the Capture Motion extension, pick each element and play its animation. Check the preview to make sure you caught all of it.
4. Open the captures in Figma. Run the Capture Motion plugin in the same file. Each capture becomes a Figma Motion timeline with its real timing and easing.
5. Redesign with both. Change the layout on the imported layers, and tune the motion on the timelines. You keep the parts of the original motion that worked and change the rest with intent.
6. Hand off. Export the final motion as CSS, React or an AI prompt, so the build uses the same durations and curves you settled on.

This avoids the most common redesign problem with motion: the new layout ships, but nobody wrote down how the old interactions felt, so they get rebuilt from memory.

What a motion spec looks like

To make the difference concrete: a static import of a card tells you its size, radius, colors and text. A capture of the same card's hover tells you something like this, which you can paste straight into CSS:

.card {
  transition:
    transform 320ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 320ms cubic-bezier(.22, 1, .36, 1) 40ms;
}
.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgb(0 0 0 / .18);
}

That second set of numbers is what a static layer cannot carry. It is also what developers ask for when a prototype "feels different" from the build. If you want to learn to read these curves, see how to find the easing curve of an animation.

Limits to know about

Be clear about what each tool will not do, so you pick the right one:

• Capture Motion does not import a whole page layout. It works per element. If you need the full page as layers, use a page import tool.
• A static import does not carry timing. If the animation matters, capture it separately.
• Neither tool gives you rights to someone else's brand. Use captures and imports as references. Rebuild with your own visuals.

The short version

If you need what a page looks like, html.to.design is built for that. If you need how it moves, use Capture Motion. If you need both, run both: import the layout, capture the motion, and design with the real numbers in one Figma file. For a step-by-step guide to the motion half, read how to import a website animation into Figma.