Video Tutorial: Style Figma layers from a spreadsheet with CSS style sync
This video walks through how to style Figma layers from a spreadsheet with CSS style sync using the CopyDoc plugin.
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:
for example, 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 (for example,
color: #CCCCCC;) - font-size (for example,
font-size: 40px;) - line-height (for example,
line-height: 48px;) - font-family (for example,
font-family: Arial;) - font-weight (for example,
font-weight: bold;) - font-style (for example,
font-style: italic;) - text-align (for example,
text-align: center;) - text-transform (for example,
text-transform: uppercase;) - vertical-align (for example,
vertical-align: middle;)
Applying text styles to all child layers. If you apply any Text Layer CSS styles (for example, font-size: 30px) to a layer that contains child layers (for example, Frame, Group, Component, Instance), this will automatically apply the style to every text layer inside of that matching layer.
Other Layers
These CSS properties can be applied to other Figma layers (images, rectangles, frames etc):
- width (for example,
width: 100px;) - height (for example,
height: 100px;) - opacity (for example,
opacity: 0.5;) - background-color (for example,
background-color: #CCCCCC;) - border (for example,
border: 1px solid #CCCCCC;) - border-radius (for example,
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 lets you 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)ortransform: scale(2, 1.5)→ increases the element’s size 1.5× overall or 2× horizontally / 1.5× vertically.
Multiple transform functions can be combined in sequence. Example: css transform: translateX(10px) rotate(45deg) scale(1.2); The order matters because each function applies to the result of the previous one.
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.
Difference from transform: - top and left define the element’s layout position. - transform: translate() shifts the element visually without affecting surrounding elements or layout flow.
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 want 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 (for example, #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 (for example, My Frame Layer (Row 3)) instead.