---
url: "/copydoc/sync/styles.md"
description: "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."
---

# 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.

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

This video tutorial is a complete step-by-step guide showing you how to style Figma layers from a spreadsheet with CSS style sync using the CopyDoc plugin.
[Embedded media](https://www.youtube.com/embed/l0Bhqx6X3Ic)

[Video](/assets/videos/copydoc/sync/spreadsheet-styles-sync.mp4)

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

> **Tip:** **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.

### 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**.

> **Note:** Multiple transform functions can be combined in sequence.
> Example:
> ```css
> transform: translateX(10px) rotate(45deg) scale(1.2);
> ```
> The order matters — each function applies relative 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.

> **Note:** **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

[Video](/assets/videos/copydoc/sync/auto-repeat-sync.mp4)

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

[Video](/assets/videos/copydoc/sync/auto-renaming-frames.mp4)

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.