Interactive components in Figma - Cell-by-Cell Formula Trace

Sample Data

This table shows the states of a button interactive component in Figma with their colors and actions.

Cell	Value
A1	Button State
A2	Default
A3	Hover
A4	Pressed
B1	Color
B2	Blue
B3	Light Blue
B4	Dark Blue
C1	Action
C2	No Action
C3	Highlight
C4	Click Event

Formula Trace

IF(Button State = 'Hover', 'Light Blue', IF(Button State = 'Pressed', 'Dark Blue', 'Blue'))

Step 1: Button State = 'Hover'

Step 2: IF(TRUE, 'Light Blue', ...)

Step 3: IF(FALSE, 'Dark Blue', 'Blue')

Cell Reference Map

    A          B          C
1 |Button State|Color     |Action     |
2 |Default     |Blue      |No Action  |
3 |Hover       |Light Blue|Highlight  |
4 |Pressed     |Dark Blue |Click Event|

The formula references the 'Button State' column to decide the color output.

Result

    A          B          C
1 |Button State|Color     |Action     |
2 |Default     |Blue      |No Action  |
3 |Hover       |Light Blue|Highlight  |
4 |Pressed     |Dark Blue |Click Event|

The color changes based on the button state: Default shows Blue, Hover shows Light Blue, Pressed shows Dark Blue.

Sheet Trace Quiz - 3 Questions

What color does the button show when the state is 'Hover'?

A Dark Blue

B Blue

C Light Blue

D No Color

Key Result

IF(condition1, value1, IF(condition2, value2, default_value)) pattern for state-based color selection