---
url: "/es/copydoc/sync/styles.md"
description: "Además de actualizar el texto de tus capas de Figma, la función **Sync Content** también puede aplicar estilos CSS a tus capas automáticamente de la misma forma."
---

# Usar CSS en tu hoja de cálculo para actualizar los estilos de las capas de Figma

> Además de actualizar el texto de tus capas de Figma, la función **Sync Content** también puede aplicar estilos CSS a tus capas automáticamente de la misma forma.

### Vídeo tutorial: dar estilo a capas de Figma desde una hoja de cálculo con la sincronización de estilos CSS

Este vídeo explica cómo dar estilo a capas de Figma desde una hoja de cálculo con la sincronización de estilos CSS del plugin CopyDoc.
[Embedded media](https://www.youtube-nocookie.com/embed/l0Bhqx6X3Ic)

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

Por ejemplo, si tienes capas de texto en Figma llamadas **#SectionHeading**, puedes cambiar el tamaño de fuente y el color de esas capas en Figma añadiendo `font-size: 40px; color: #999999;` a las filas que hay bajo la columna **#SectionHeading** de tu hoja de cálculo.

Al sincronizar la hoja de cálculo con Figma, los estilos de las capas de Figma que coincidan se actualizarán automáticamente, siempre que el valor CSS sea compatible y se aplique a ese tipo de capa.

## Propiedades CSS compatibles para dar estilo a tus capas de Figma {#supported-css-properties-that-you-can-use-to-style-your-figma-layers}

Cada tipo de capa admite determinadas propiedades CSS, y puedes aplicar varias propiedades a una capa poniéndolas en la misma celda de la hoja de cálculo:

por ejemplo, `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;|

Estas son las propiedades CSS que admite actualmente la sincronización de hojas de cálculo:

### Capas de texto {#text-layers}

Estas propiedades CSS se pueden aplicar a cualquier capa de texto de Figma.

- color (por ejemplo, `color: #CCCCCC;`)
- font-size (por ejemplo, `font-size: 40px;`)
- line-height (por ejemplo, `line-height: 48px;`)
- font-family (por ejemplo, `font-family: Arial;`)
- font-weight (por ejemplo, `font-weight: bold;`)
- font-style (por ejemplo, `font-style: italic;`)
- text-align (por ejemplo, `text-align: center;`)
- text-transform (por ejemplo, `text-transform: uppercase;`)
- vertical-align (por ejemplo, `vertical-align: middle;`)

> **Tip:** **Aplicar estilos de texto a todas las capas hijas**. Si aplicas estilos CSS de capas de texto (por ejemplo, `font-size: 30px`) a una capa que contiene capas hijas (por ejemplo, un frame, un grupo, un componente o una instancia), el estilo se aplicará automáticamente a _todas_ las capas de texto que haya dentro de esa capa.

### Otras capas {#other-layers}

Estas propiedades CSS se pueden aplicar a otras capas de Figma (imágenes, rectángulos, frames, etc.):

- width (por ejemplo, `width: 100px;`)
- height (por ejemplo, `height: 100px;`)
- opacity (por ejemplo, `opacity: 0.5;`)
- background-color (por ejemplo, `background-color: #CCCCCC;`)
- border (por ejemplo, `border: 1px solid #CCCCCC;`)
- border-radius (por ejemplo, `border-radius: 20px;`)

### Propiedades de posición {#positioning-properties}

Estas propiedades CSS se pueden aplicar a cualquier capa de Figma (incluidos textos, imágenes, rectángulos, frames, etc.).

### Transformación {#transform}

La propiedad `transform` de CSS te permite cambiar visualmente la posición, la rotación y la escala de un elemento sin afectar al espacio que ocupa en el diseño. Se suele usar en Figma y en herramientas de diseño similares para reproducir desplazamientos, rotaciones y cambios de tamaño que se producen *dentro* de un frame, no respecto al flujo del documento.

Estas son algunas funciones de transformación habituales:

- **translate**
  Desplaza un elemento en los ejes X e Y.
  _Ejemplo:_ `transform: translate(10px, 20px)`
  → desplaza el elemento **10px a la derecha** y **20px hacia abajo**.

- **translateX**
  Desplaza un elemento en horizontal, en el eje X.
  _Ejemplo:_ `transform: translateX(10px)`
  → desplaza el elemento **10px a la derecha**.

- **translateY**
  Desplaza un elemento en vertical, en el eje Y.
  _Ejemplo:_ `transform: translateY(20px)`
  → desplaza el elemento **20px hacia abajo**.

- **rotate**
  Gira un elemento alrededor de su punto de origen.
  _Ejemplo:_ `transform: rotate(45deg)`
  → gira el elemento **45 grados en el sentido de las agujas del reloj**.

- **scale**
  Cambia el tamaño de un elemento según un factor de escala en los ejes X e Y.
  _Ejemplo:_ `transform: scale(1.5)` o `transform: scale(2, 1.5)`
  → aumenta el tamaño del elemento **1,5× en total** o **2× en horizontal / 1,5× en vertical**.

> **Note:** Puedes combinar varias funciones de transformación seguidas.
> Ejemplo:
> ```css
> transform: translateX(10px) rotate(45deg) scale(1.2);
> ```
> El orden importa, porque cada función se aplica sobre el resultado de la anterior.

### Posición X/Y {#x-y-position}

A diferencia de las transformaciones, los valores **X** e **Y** de Figma corresponden a la *posición absoluta* del elemento dentro de su frame principal o sistema de coordenadas. En CSS, esta posición se representa con propiedades como:

- **top**
  Indica el desplazamiento vertical desde el borde superior del elemento contenedor.
  _Ejemplo:_ `top: 100px;`
  → coloca el elemento **100px por debajo del borde superior** de su contenedor.

- **left**
  Indica el desplazamiento horizontal desde el borde izquierdo del elemento contenedor.
  _Ejemplo:_ `left: 100px;`
  → coloca el elemento **a 100px del borde izquierdo** de su contenedor.

> **Note:** **Diferencia con transform:**
> - `top` y `left` definen la **posición en el diseño** del elemento.
> - `transform: translate()` desplaza el elemento **visualmente** sin afectar a los elementos de alrededor ni al flujo del diseño.

## Repetir automáticamente una capa de Figma con las filas de tu hoja de cálculo {#auto-repeat-a-single-figma-layer-with-your-spreadsheet-rows}

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

Con las pestañas de sincronización **Content** o **Styles**, puedes repetir automáticamente una capa de Figma activando el interruptor **Auto Repeat**. Este copia la capa de Figma seleccionada originalmente y la duplica tantas veces como filas tengan los datos de tu hoja de cálculo.

Úsalo para convertir una tarjeta, un artículo de catálogo o el diseño de una campaña en un diseño rellenado por cada fila de la hoja de cálculo. Las capas de texto y de imagen del diseño usan las columnas correspondientes de la hoja de cálculo.

Si seleccionas un componente principal, CopyDoc crea una instancia por cada fila. Si seleccionas una instancia existente, se duplica esa instancia; si seleccionas un frame, se duplica el frame.

Si la capa de Figma seleccionada ya está directamente dentro de otra capa de Figma con Auto Layout activado, la capa seleccionada se duplicará automáticamente dentro de esa capa principal. Si no, CopyDoc creará un nuevo frame con Auto Layout y duplicará ahí tus nuevas capas de Figma.

### Nombres dinámicos para las capas principales repetidas {#dynamic-auto-repeating-parent-layer-names}

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

Para dar nombre a cada capa de Figma duplicada desde tu hoja de cálculo, haz que el nombre de la capa de plantilla seleccionada coincida con un encabezado de columna. CopyDoc usa el valor de esa columna en cada fila como nuevo nombre de la capa.

Un único `#` inicial es opcional: una capa llamada `#Title` puede coincidir con una columna `Title`, y una capa llamada `Title` puede coincidir con una columna `#Title`. Si existen los dos encabezados, tiene prioridad la coincidencia exacta, incluso cuando su valor está vacío. Las mayúsculas y los espacios tienen que coincidir.

Si no hay ningún nombre de capa coincidente en tu hoja de cálculo, el plugin CopyDoc tomará el nombre original de la capa de Figma y le añadirá un número de fila (por ejemplo, `My Frame Layer (Row 3)`).