Using CSS in your spreadsheet to update Figma layer styles
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;)
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.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.
Was this page helpful?