Design Engineering Tip:
Ever wondered why an idle animation suddenly snaps back when you trigger another interaction?
It’s often because both animations target the same property. By default, the later animation replaces the earlier one.
Instead of replacing your floating animation, compose the second one on top.
animation:
float 6s ease-in-out infinite,
shake 250ms ease;
animation-composition: replace, add;
Show more
Design Engineering Tip:
If text inside your container scales when the container animates, that's Motion's layout. It doesn't re-typeset the text - it scales it, like an image.
“Your Text”
layout="position" moves the text with the container but keeps it at its real size.
Show more
If your spring feels too fast, use visualDuration, not duration.
Same 0.5, same bounce:
duration → the move takes 96ms
visualDuration → the move takes 231ms
duration is the time until the spring stops. visualDuration sizes the move.
transition={{
type: "spring",
visualDuration: 0.5,
bounce: 0.5,
}}
Show more
Design Engineering Tip
Make reordered cards keep their identity.
When a layout changes, cards shouldn’t pop into new slots. Keep each item mounted with a stable ID and animate its position, size, and corner radius. The result feels like the interface is rearranging itself not re-rendering.
Add Motion’s arc() to the movement path for a subtle curve. That small deviation from a straight line makes the transition feel more natural and physical.
Show more
Onboarding Experience made with Figma Motion
Design Engineering Tip:
If your whole page shifts 15px the moment a modal opens, it isn't the modal.
It's the scrollbar disappearing, because the library sets overflow: hidden on
the body to lock scrolling.
Reserve the space before you ever need it:
html {
scrollbar-gutter: stable;
}
Show more
Dropdown Component Animation
Design Engineering Tip
Make hover interactions respond to where the cursor actually comes from.
Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive.
const direction = getDirection(event, ref.current);
const variants = {
top: { y: 20 },
bottom: { y: -20 },
left: { x: 20 },
right: { x: -20 },
};
Show more
Drop in your logo to customize.
A rewarding footer gives users a reason to scroll all the way down. Small details leave lasting impressions.
Design Engineering Tip
Your tooltip doesn’t always end up where you placed it?
When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction.
@ container anchored(fallback: flip-block) {
.tooltip {
animation-name: slide-from-top;
}
}
Show more
Design Engineering Tip:
If you struggle to describe button or card hover states in Claude or Codex, these commonly used hover effect terms can help.
Design Engineering Tip
If your modal scrolls like this,
you’re probably missing one CSS property:
overscroll-behavior: contain;
It prevents the page behind the modal from scrolling when users reach the top or bottom.
Show more
