Along with updating text content in your Figma layers, the Sync Spreadsheet Content feature also supports automatically applying CSS styles to your layers in the same way.

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;)
Applying text styles to all child layers. If you apply any Text Layer CSS styles (eg. font-size: 30px) to a layer that contains child layers (eg. Frame, Group, Component, Instance), this will automatically apply the style to every text layer inside of that matching layer.