Micro-interaction design in Figma - Cell-by-Cell Formula Trace

Sample Data

This table shows examples of micro-interactions in a user interface, listing the action, trigger, feedback, and loop or mode for each.

Cell	Value
A1	Action
B1	Trigger
C1	Feedback
D1	Loop/Mode
A2	Click Button
B2	User clicks
C2	Button changes color
D2	One-time
A3	Hover Menu
B3	Mouse hover
C3	Menu expands
D3	While hovering
A4	Form Submit
B4	User submits form
C4	Success message shows
D4	One-time
A5	Loading Spinner
B5	Page loading
C5	Spinner animates
D5	Until load ends

Formula Trace

Feedback = IF(Trigger = "User clicks", "Button changes color", IF(Trigger = "Mouse hover", "Menu expands", IF(Trigger = "User submits form", "Success message shows", IF(Trigger = "Page loading", "Spinner animates", "No feedback"))))

Step 1: Trigger = "User clicks"

Step 2: IF(Trigger = "User clicks", "Button changes color", ...)

Step 3: IF(Trigger = "Mouse hover", "Menu expands", ...)

Step 4: IF(Trigger = "User submits form", "Success message shows", ...)

Step 5: IF(Trigger = "Page loading", "Spinner animates", "No feedback")

Cell Reference Map

    A           B               C                   D
1 | Action    | Trigger       | Feedback          | Loop/Mode
2 | Click Button | User clicks  | Button changes color | One-time
3 | Hover Menu  | Mouse hover  | Menu expands       | While hovering
4 | Form Submit | User submits form | Success message shows | One-time
5 | Loading Spinner | Page loading | Spinner animates  | Until load ends

Arrows: Feedback depends on Trigger column values

The Feedback column values depend on the Trigger column values in the same row.

Result

    A           B               C                   D
1 | Action    | Trigger       | Feedback          | Loop/Mode
2 | Click Button | User clicks  | Button changes color | One-time
3 | Hover Menu  | Mouse hover  | Menu expands       | While hovering
4 | Form Submit | User submits form | Success message shows | One-time
5 | Loading Spinner | Page loading | Spinner animates  | Until load ends

The Feedback column shows the micro-interaction feedback based on the Trigger for each action.

Sheet Trace Quiz - 3 Questions

What feedback is shown when the trigger is 'User clicks'?

A Menu expands

B Success message shows

C Button changes color

D Spinner animates

Key Result

Nested IF statements check Trigger value to assign corresponding Feedback text.