0
0
Figmabi_tool~10 mins

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

Choose your learning style9 modes available
Sample Data

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

CellValue
A1Button/Primary/Default
A2Button/Primary/Hover
A3Button/Secondary/Default
A4Button/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
Test your understanding
What does the 'Primary' part in 'Button/Primary/Hover' represent?
AThe hover state
BThe color code
CThe button type or variant
DThe font size
Key Result
Concatenate component type, variant, and state with slashes to create organized style names.