Animate
Variables
Variables are typed, reusable, named values stored on the document — think CSS custom properties, but for your animation.
Typed, named values
A variable holds one of five types — color, number, fontFamily, fontWeight, or string— all part of one discriminated union. That means a single variables manager handles renaming, deleting and editing every type the same way; there's no separate system per type to learn.
Bind any field
Any bindable field — a fill color, a font size number, a font family — can hold either a literal value, or a reference to a variable instead. Bind a field to a variable, and every layer bound to that same variable updates together the instant you change the variable's value once. It's the same model Figma variables use, applied across the whole document.
In practice: define a brand color once as a variable, bind it to every shape and text fill that should share it, then restyle everything by editing the one variable — no hunting down every layer that uses that color.
Variables are a different axis from keyframed values: a keyframe animates a property over time, a variable shares one value across many layers. fontFamily and fontWeight variables are especially useful for keeping text animation consistent across a document.