What Figma shipped
Figma introduced a new agent for motion, allowing designers to generate and iterate on layout animations using text prompts. By typing instructions like 'animate in all of the cards in this gallery,' users can instantly preview complex staggering and opacity adjustments before tweaking the timeline manually.
The feature targets the friction of setting up baseline keyframes. By handling the initial heavy lifting of expressive transitions and looping, the agent lets designers focus on fine-tuning the final output.
How the motion works
When demonstrating prompt-driven interfaces, motion designers can use a typewriter effect to reveal the user's input. Pacing the text generation to match natural typing speeds grounds the interaction, while a subtle punch-in on the input field directs focus entirely to the command being given.
To showcase the resulting animation, designers should emphasize the stagger effect requested in the prompt. Introducing the gallery cards with progressive delays and adjusting opacity creates a deliberate, readable sequence rather than a chaotic block of movement. This proves the agent understands nuanced motion principles.
For prompts that dictate specific timing—like holding for three seconds before scrolling back down—using a deliberate hold-time becomes a critical storytelling device. Building a clear pause into the sequence validates the tool's adherence to the prompt, giving the viewer a moment to process the layout before the transition out and loop begin.
What to steal from it
- Use a typewriter effect to make text prompts feel active and intentional.
- Punch-in on text fields to isolate the input before revealing the output.
- Emphasize stagger and opacity adjustments to prove the tool understands nuanced motion.
- Build deliberate hold-times into the edit when demonstrating time-specific commands.
Want a video like this for your product?
Impractical cuts one from a single prompt — the same motion craft, in about twenty minutes.
