Style organization and naming conventions in Figma - Cell-by-Cell Formula Trace

Sample Data

This data represents a style naming convention for buttons in a design system, showing hierarchical organization and color values.

Cell	Value
A1	Button/Primary/Default
A2	Button/Primary/Hover
A3	Button/Secondary/Default
A4	Button/Secondary/Hover
B1	#0055FF
B2	#0041CC
B3	#AAAAAA
B4	#888888

Formula Trace

Concatenate('Button/', ButtonType, '/', State)

Step 1: ButtonType = 'Primary'

Step 2: State = 'Hover'

Step 3: Concatenate('Button/', 'Primary', '/', 'Hover')

Cell Reference Map

   A                  B
1  Button/Primary/Default  #0055FF
2  Button/Primary/Hover    #0041CC
3  Button/Secondary/Default #AAAAAA
4  Button/Secondary/Hover  #888888

References: ButtonType and State values used to build style names in column A.

The style names in column A are built from parts like ButtonType and State, which define the style's purpose and interaction state.

Result

   A                  B
1  Button/Primary/Default  #0055FF
2  Button/Primary/Hover    #0041CC  <-- Result of concatenation formula
3  Button/Secondary/Default #AAAAAA
4  Button/Secondary/Hover  #888888

The final style name 'Button/Primary/Hover' clearly shows the organization: component type, variant, and state.

Sheet Trace Quiz - 3 Questions

What does the 'Primary' part in 'Button/Primary/Hover' represent?

A The hover state

B The color code

C The button type or variant

D The font size

Key Result

Concatenate component type, variant, and state with slashes to create organized style names.