Using CSS in your spreadsheet to update Figma layer styles

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;)

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.