Gregory Pearson . Design

44.95°N, 93.09°W

(UTC)

Gregory Pearson . Design

44.95°N, 93.09°W

(UTC)

Figma Motion: Tab Rail

Type

Experiments

Date

Build Notes

Four storyboard artboards of a page section, rebuilt as one autoplaying Figma Motion timeline. Notes from the build.



Why Figma Motion and not After Effects?

The counter is still a live instance of the library component. Type styles and color variables work the way they normally do. If the copy changes, someone edits the text layer and the timeline still runs. Nobody re-renders anything. To show it to someone, we stay in the same working file. They open it and scrub the timeline.

What Motion does well:

  • You can enter any cubic-bezier you want, per keyframe. It isn't a preset menu.

  • HOLD steps a value instead of interpolating it. I used it a lot.

  • Auto-layout properties animate — spacing, padding, gaps. I didn't need it here.

  • Iterating is fast once the layers are named.

… and not so well:

  • No triggers. No click, no scroll, no transitions between frames. You get a loop.

  • You can't animate text content, image fills, component variants or vector paths.

  • The timeline doesn't snap reliably and values drift slightly. It's a beta.



Things that tripped me up:


One timeline per top-level frame
The frame owns the timeline and can't be animated itself. Everything you keyframe lives inside it.


Transforms are relative, the rest aren't
TRANSLATION_Y adds to the layer's current position, neutral 0. SCALE multiplies, neutral 1. OPACITY, WIDTH, HEIGHT and CORNER_RADIUS replace the value. Place each layer where it should finish and animate the offset backwards.


First keyframe applies backwards to 0:00
A track starting at 1.5s is already correct before 1.5s. If its first keyframe isn't the resting value, the layer sits in the wrong place for half the timeline.


Duration defaults to 2 seconds
I forgot to change it twice.


More Experiments

More Experiments
Loading
Thermal Pixel
Loading
Thermal Pixel
Loading
Tokens, not stylesheets
Loading
Tokens, not stylesheets
Loading
Thermal Pixel
Loading
Tokens, not stylesheets

Gregory Pearson . Design

44.95° N, -93.09° W

(UTC)

Gregory Pearson . Design

44.95° N, -93.09° W

(UTC)