Free tools
Motif TokensFREE
Author named motion tokens, combine them into choreography sets, and apply them to prototype connections or motion keyframes.
What it does
Motif Tokens is where you name your motion. Instead of retyping the same 200ms ease-out on every interaction, you author a duration token and an easing token once, combine them into a reusable choreography set, and apply that set wherever it belongs: to a Figma prototype connection or, in Motion mode, straight to keyframes.
Token data auto-saves into the Figma document, so the whole system travels with the file and stays in sync across everyone who opens it.
Interactive lesson: Motif Tokens
A guided, click-through tour of Motif Tokens in the live plugin, locked to this tool. No Figma needed.
Quick start
The tool is organized into three tabs, and the workflow runs left to right through them.
- 1 · Create tokens
- In the Tokens tab, add duration and easing tokens across the three tiers: Functional, Expressive, Signature.
- 2 · Build sets
- In the Choreo tab, combine a duration token and an easing token with a trigger type and a transition into a reusable set.
- 3 · Apply
- In the Apply tab, select frames with prototype connections and assign a choreo set. Changes write straight to the Figma prototype noodles.
- 4 · Sync
- Edit a token or a set, then hit Sync to update every tagged connection at once. One edit propagates everywhere.
The three tabs
Each tab owns one stage of the system, so you can move between authoring and applying without losing your place.
- Tokens
- Author and manage duration and easing tokens. Durations are in milliseconds; easings are cubic-bezier curves or spring physics. Each token belongs to a tier.
- Choreo
- Build choreography sets that pair a duration token with an easing token and a Figma transition type: a reusable motion recipe per interaction context.
- Apply
- Connect choreo sets to prototype transitions, or switch to Motion mode to apply tokens directly as keyframes and stagger a selection of layers.
The motion tier model
Tokens organize into three intent-based tiers. Each tier has its own duration range and design intent. The model keeps a system consistent by reserving the big, expressive moments for the few places that earn them.
- Functional
- ~70–80% of components · 100–200ms. Utilitarian motion: button feedback, form validation, loading states, tooltips.
- Expressive
- ~15–25% · 200–400ms. Personality with restraint: navigation transitions, panel expansions, modal entrances.
- Signature
- ~5–10% · 400ms+. Reserved for key brand moments: onboarding completions, milestone celebrations. Use sparingly.
Options and formats
Duration presets run from 50ms through 2000ms in the common design steps. Easings cover the standard curves (ease in, ease out, ease in & out, linear), back curves, four spring presets (Gentle, Quick, Bouncy, Slow), and fully custom bezier or spring.
Transitions map to Figma's own set (Instant, Dissolve, Smart Animate, Move In/Out, Push, Slide In/Out), and triggers cover On Click, While Hovering, Mouse Enter/Leave, On Press, Mouse Up, On Drag, After Delay, and Key Down.
Saving & loading
Token data auto-saves into the Figma document. Use Import / Export in the Tokens toolbar for token-only JSON when you want to move just the vocabulary between files; a full save round-trips the whole system: tokens, choreo sets, and connections together.