Motion
Use movement to guide attention and explain change. Keep the logo's silhouette intact and leave time to read.
One clear idea
Make the change clear
Arrive with a gentle fade or short translation. Hold long enough to read. Resolve cleanly; avoid decorative loops. The demonstration is a web example, not a new production timing token.
Still state · reduced-motion equivalent
In practice
Move the complete mark as one object. Finish with a still, readable signature.
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
The layout reveals useful detail. The button exposes its expanded state, and reduced motion receives the same content instantly.
Completed, with or without motion
Next: shape the lesson
Confirm the action with a check and a readable result. Keep the transition brief.
01—12 / Figma
Animation principles
Twelve studies from the Figma motion system. Select a principle, replay it, or move the timeline to inspect the pen trace and ink fill.
Download native source dataThese are construction studies. In product UI, move the finished mark as one unit. Their longer timelines are not UI duration tokens.
Squash & stretch
Open Figma studyThe ink compresses, releases, and returns to its original proportions.
Where to use it Use on decorative ink accents. Keep the finished logo unchanged.
Stretch is confined to the green ink layer. The finished white mark keeps its approved contours.
Read all study notes
Squash & stretch
The ink compresses, releases, and returns to its original proportions.
Where to use it Use on decorative ink accents. Keep the finished logo unchanged.
Open Figma studyAnticipation
A short pull back precedes the forward stroke. The motion settles before the ink fill finishes.
Where to use it Use before a deliberate reveal or a user-triggered transition.
Open Figma studyStaging
The strokes arrive in a clear order so one part leads at a time.
Where to use it Use when an introduction needs a clear visual hierarchy.
Open Figma studyStraight ahead / pose to pose
The continuous pen trace becomes a filled form through planned drawing stages.
Where to use it Use for a step-by-step explanation of the symbol.
Open Figma studyFollow through & overlap
The larger strokes arrive first. The dot and lower seam trail, then settle.
Where to use it Use for related elements that should arrive as one group without moving in lockstep.
Open Figma studySlow in & slow out
The pen and ink slow at the ends of each stroke instead of moving at a constant rate.
Where to use it Use for a calm entrance and a readable landing.
Open Figma studyArcs
The drawing follows a curved route and returns to the resting position.
Where to use it Use for a short, contained transition across a brand canvas.
Open Figma studySecondary action
The dot makes a small follow-up movement after the main form is drawn.
Where to use it Use one small accent after the main action. Keep attention on the primary form.
Open Figma studyTiming
Changes in stroke duration and pauses give each part a different pace.
Where to use it Use timing to separate drawing, reading, and completion.
Open Figma studyExaggeration
A longer approach and a restrained overshoot make the direction easy to see.
Where to use it Use in a large brand specimen. Reduce the travel distance in a compact interface.
Open Figma studySpatial assembly
The ink components arrive from separate positions and meet at the exact symbol contours.
Where to use it Use to explain how the parts connect. Never leave the mark disassembled.
Open Figma studyAppeal
The sequence balances the drawing pace with a clear, still finish.
Where to use it Use when the logo needs time to be read after the reveal.
Open Figma study
01—08 / Figma
Composed motion
Eight sequences combine the principles. Compare the order of the strokes, the pauses, and the way each sequence settles.
Download native source dataThese are construction studies. In product UI, move the finished mark as one unit. Their longer timelines are not UI duration tokens.
Idea takes shape
Open Figma studyA small preparatory movement introduces the dot, followed by the connected strokes and a final accent.
Where to use it Use for a brand introduction after an explicit play action.
Read all study notes
Idea takes shape
A small preparatory movement introduces the dot, followed by the connected strokes and a final accent.
Where to use it Use for a brand introduction after an explicit play action.
Open Figma studyPrecision assembly
Separate components approach their final positions, slow down, and lock into the mark.
Where to use it Use to explain alignment and the relationship between the components.
Open Figma studyConfident signature
A quick preparation leads into the ink impact. The lower seam follows the larger stroke.
Where to use it Use for a short signature moment. Keep the impact on decorative ink.
Open Figma studyQuiet resolution
The main form leads a soft ink fill. The dot and seam arrive later and settle into stillness.
Where to use it Use when the brand should arrive without interrupting nearby content.
Open Figma studyMomentum relay
A small impulse passes from the right triangle through the dot, middle, seam, and left triangle.
Where to use it Use to show a connection passing through the symbol from right to left.
Open Figma studyHeld tension
The drawing pauses, pulls back, releases, and returns to its resting position.
Where to use it Use for one deliberate reveal. Avoid repeating the build-up around routine actions.
Open Figma studyMaterial memory
The broad stroke briefly flexes. The dot and seam follow before the ink settles.
Where to use it Use on decorative ink to suggest the pressure of a pen. Preserve the finished logo.
Open Figma studyFocus lock
The drawing order and pauses keep attention on one part before the full mark resolves.
Where to use it Use for a clear end frame with enough time to recognize the symbol.
Open Figma study
When movement earns its place
Demos play once when clearly in view and replay when you scroll back. They stop offscreen or when the tab is hidden. Pause and frame inspection stay under your control. Reduced motion keeps the artwork still.
Rules and source
Arrive, hold, leave
Arrive with a gentle fade or short translation. Hold long enough to read. Resolve cleanly; avoid decorative loops. The demonstration is a web example, not a new production timing token.
A still equivalent
Reduced motion keeps the same useful still state. Optional animation stops when the example leaves view or the browser tab is hidden.
Do
Animate the complete mark as one intact unit.
Don’t
Never morph, stretch or animate logo pieces independently.
Open editable Figma sourceSource pages 32