CSS properties export in Figma - Cell-by-Cell Formula Trace

Sample Data

This data represents CSS properties and their values exported from a Figma design for a UI element.

Cell	Value
A1	Property
B1	Value
A2	color
B2	#FF5733
A3	font-size
B3	16px
A4	margin
B4	10px 20px
A5	border-radius
B5	5px

Formula Trace

CONCATENATE(A2, ": ", B2, "; ", A3, ": ", B3, "; ", A4, ": ", B4, "; ", A5, ": ", B5, ";")

Step 1: CONCATENATE("color", ": ", "#FF5733", "; ", "font-size", ": ", "16px", "; ", "margin", ": ", "10px 20px", "; ", "border-radius", ": ", "5px", ";")

Cell Reference Map

   A          B
1 Property   Value
2 color      #FF5733
3 font-size  16px
4 margin     10px 20px
5 border-radius 5px

Arrows: A2->formula, B2->formula, A3->formula, B3->formula, A4->formula, B4->formula, A5->formula, B5->formula

The formula uses the CSS property names from column A and their corresponding values from column B in rows 2 to 5.

Result

   A          B
1 Property   Value
2 color      #FF5733
3 font-size  16px
4 margin     10px 20px
5 border-radius 5px

6 CSS Export: color: #FF5733; font-size: 16px; margin: 10px 20px; border-radius: 5px;

The final result is a single CSS style string combining all properties and values, ready to be used in a stylesheet.

Sheet Trace Quiz - 3 Questions

What does the formula CONCATENATE produce in this example?

A A single CSS style string combining all properties and values

B A list of property names only

C A list of values only

D An error because of missing commas

Key Result

CONCATENATE joins multiple cell values with separators to create a single CSS style string.