Video Tutorial: Style Figma layers from a spreadsheet with CSS style sync

For example, if you have text layers in Figma named #SectionHeading, you can change the font size and color of those layers in Figma by adding font-size: 40px; color: #999999; to your row(s) underneath the #SectionHeading column in your spreadsheet.

When you sync the spreadsheet with Figma, any matching Figma layers will automatically have their styles updated, provided that the CSS value is supported and applies to that layer type.

Supported CSS properties that you can use to style your Figma layers

Certain CSS properties are available for different layer types, and you can apply multiple properties to a layer by putting them in the same spreadsheet cell:

eg. color: #000000; font-size: 24px; font-weight: bold;

#HeroBlock	#Menu	#CardFrame	#StaffName
background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px;	opacity: 0.3; background-color: #CCD4FF;	font-size: 10px;	font-size: 22px; color: #818AF9; font-weight: bold;
background-color: #818AF9; color: #FFF; font-size: 16px; border-radius: 20px;	opacity: 0.3; background-color: #CCD4FF;	font-size: 10px;	font-size: 22px; color: #818AF9; font-weight: bold;

Below are the CSS properties that are currently supported in the spreadsheet sync feature:

Text Layers

These CSS properties can be applied to any Figma text layers.

• color (eg. color: #CCCCCC;)
• font-size (eg. font-size: 40px;)
• line-height (eg. line-height: 48px;)
• font-family (eg. font-family: Arial;)
• font-weight (eg. font-weight: bold;)
• font-style (eg. font-style: italic;)
• text-align (eg. text-align: center;)
• text-transform (eg. text-transform: uppercase;)
• vertical-align (eg. vertical-align: middle;)

Other Layers

These CSS properties can be applied to other Figma layers (images, rectangles, frames etc):

• width (eg. width: 100px;)
• height (eg. height: 100px;)
• opacity (eg. opacity: 0.5;)
• background-color (eg. background-color: #CCCCCC;)
• border (eg. border: 1px solid #CCCCCC;)
• border-radius (eg. border-radius: 20px;)

Positioning Properties

These CSS properties can be applied to any Figma layers (including text, images, rectangles, frames etc).

Transform

The transform property in CSS allows you to visually manipulate an element’s position, rotation, and scale without affecting its actual layout space. This is often used in Figma and similar design tools to reproduce movements, rotations, and resizes that happen within a frame, not relative to the document flow.

Common transform functions include:

• translate
  Moves an element along both the X and Y axes.
  Example: transform: translate(10px, 20px)
  → moves the element 10px right and 20px down.

• translateX
  Moves an element horizontally along the X-axis.
  Example: transform: translateX(10px)
  → moves the element 10px to the right.

• translateY
  Moves an element vertically along the Y-axis.
  Example: transform: translateY(20px)
  → moves the element 20px down.

• rotate
  Rotates an element around its origin point.
  Example: transform: rotate(45deg)
  → rotates the element 45 degrees clockwise.

• scale
  Resizes an element by a scaling factor on the X and Y axes.
  Example: transform: scale(1.5) or transform: scale(2, 1.5)
  → increases the element’s size 1.5× overall or 2× horizontally / 1.5× vertically.

X/Y Position

In contrast to transforms, the X and Y values in Figma correspond to the element’s absolute position within its parent frame or coordinate system. In CSS, this positioning is represented by properties such as:

• top
  Specifies the vertical offset from the top edge of the containing element.
  Example: top: 100px;
  → positions the element 100px below the top of its container.

• left
  Specifies the horizontal offset from the left edge of the containing element.
  Example: left: 100px;
  → positions the element 100px from the left of its container.

Auto repeat a single Figma layer with your spreadsheet rows

When using the Content or Styles sync tab options, you can automatically repeat a single Figma layer by enabling the Auto Repeat toggle, which will automatically copy the original selected Figma layer and duplicate it as many times as the number of rows that your spreadsheet data contains.

If your selected Figma layer is already directly inside of another Figma layer with Auto Layout enabled, the selected layer will automatically be duplicated inside of that parent layer, otherwise, CopyDoc will create a brand new Auto Layout frame and duplicate your new Figma layers there instead.

Dynamic auto-repeating parent layer names

If you'd like to dynamically name the new auto-repeating Figma layer from your spreadsheet data, too, you can do this by ensuring the Figma layer name that you're repeating (eg. #Title) matches a column in the spreadsheet that you're syncing; this will automatically use the value from each row under the #Title column in your spreadsheet as the layer name for each duplicated Figma layer.

If there's no matching layer name in your spreadsheet, the CopyDoc plugin will take the original Figma layer name and append a row number to it (eg. My Frame Layer (Row 3)) instead.