0
0
Figmabi_tool~10 mins

Smart animate in Figma - Cell-by-Cell Formula Trace

Choose your learning style9 modes available
Sample Data

This data represents the X and Y positions of an object in two frames and the duration of the smart animate transition between them.

CellValue
A1Frame 1 X
A2100
B1Frame 1 Y
B2200
C1Frame 2 X
C2300
D1Frame 2 Y
D2400
E1Animation Duration (ms)
E2500
Formula Trace
Smart Animate Position Change = (Frame 2 X - Frame 1 X, Frame 2 Y - Frame 1 Y) over Duration
Step 1: Frame 2 X - Frame 1 X = 300 - 100
Step 2: Frame 2 Y - Frame 1 Y = 400 - 200
Step 3: Duration = 500 ms
Step 4: Smart Animate moves object from (100, 200) to (300, 400) over 500 ms
Cell Reference Map
     A       B       C       D       E
1 | Frame 1 X | Frame 1 Y | Frame 2 X | Frame 2 Y | Duration
2 |  100    |  200    |  300    |  400    |  500

Arrows: Frame 1 X -> Frame 2 X, Frame 1 Y -> Frame 2 Y, Duration used for timing
References show starting and ending X and Y positions and the animation duration used for smart animate.
Result
Frame | X Position | Y Position
------------------------------
1     | 100        | 200
2     | 300        | 400

Animation: Object moves smoothly from (100,200) to (300,400) in 500 ms
The final result is a smooth movement of the object from the first frame's position to the second frame's position over half a second.
Sheet Trace Quiz - 3 Questions
Test your understanding
What is the horizontal distance the object moves during the smart animate?
A200 pixels
B100 pixels
C300 pixels
D400 pixels
Key Result
Smart animate calculates position difference between frames and interpolates movement over given duration.