---
url: "/pt/copydoc/sync/styles.md"
description: "Além de atualizar o texto das camadas do Figma, o recurso **Sync Content** também aplica estilos CSS às suas camadas automaticamente."
---

# Usar CSS na planilha para estilizar camadas do Figma

> Além de atualizar o texto das camadas do Figma, o recurso **Sync Content** também aplica estilos CSS às suas camadas automaticamente.

### Vídeo tutorial: estilize camadas do Figma a partir de uma planilha com a sincronização de estilos CSS

Este vídeo mostra como estilizar camadas do Figma a partir de uma planilha com a sincronização de estilos CSS usando o plugin CopyDoc.
[Embedded media](https://www.youtube-nocookie.com/embed/l0Bhqx6X3Ic)

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

Por exemplo, se você tem camadas de texto no Figma com o nome **#SectionHeading**, pode mudar o tamanho da fonte e a cor dessas camadas no Figma adicionando `font-size: 40px; color: #999999;` às linhas abaixo da coluna **#SectionHeading** da sua planilha.

Quando você sincronizar a planilha com o Figma, os estilos de todas as camadas correspondentes serão atualizados automaticamente, desde que o valor CSS seja compatível e se aplique a esse tipo de camada.

## Propriedades CSS compatíveis para estilizar suas camadas do Figma {#supported-css-properties-that-you-can-use-to-style-your-figma-layers}

Algumas propriedades CSS estão disponíveis para cada tipo de camada, e você pode aplicar várias propriedades a uma camada colocando-as na mesma célula da planilha:

por exemplo, `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 são as propriedades CSS compatíveis no momento com o recurso de sincronização de planilhas:

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

Estas propriedades CSS podem ser aplicadas a qualquer camada de texto do Figma.

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

> **Tip:** **Aplicar estilos de texto a todas as camadas filhas**. Se você aplicar algum estilo CSS de camada de texto (por exemplo, `font-size: 30px`) a uma camada que contém camadas filhas (por exemplo, Frame, Group, Component, Instance), o estilo será aplicado automaticamente a _todas_ as camadas de texto dentro dessa camada correspondente.

### Outras camadas {#other-layers}

Estas propriedades CSS podem ser aplicadas a outras camadas do Figma (imagens, retângulos, frames etc.):

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

### Propriedades de posicionamento {#positioning-properties}

Estas propriedades CSS podem ser aplicadas a qualquer camada do Figma (inclusive textos, imagens, retângulos, frames etc.).

### Transform {#transform}

A propriedade `transform` do CSS permite manipular visualmente a posição, a rotação e a escala de um elemento sem afetar o espaço que ele ocupa no layout. Ela costuma ser usada no Figma e em ferramentas de design parecidas para reproduzir movimentos, rotações e redimensionamentos que acontecem *dentro* de um frame, e não em relação ao fluxo do documento.

Funções de transformação comuns:

- **translate**
  Move um elemento nos eixos X e Y.
  _Exemplo:_ `transform: translate(10px, 20px)`
  → move o elemento **10px para a direita** e **20px para baixo**.

- **translateX**
  Move um elemento horizontalmente no eixo X.
  _Exemplo:_ `transform: translateX(10px)`
  → move o elemento **10px para a direita**.

- **translateY**
  Move um elemento verticalmente no eixo Y.
  _Exemplo:_ `transform: translateY(20px)`
  → move o elemento **20px para baixo**.

- **rotate**
  Gira um elemento em torno do seu ponto de origem.
  _Exemplo:_ `transform: rotate(45deg)`
  → gira o elemento **45 graus no sentido horário**.

- **scale**
  Redimensiona um elemento por um fator de escala nos eixos X e Y.
  _Exemplo:_ `transform: scale(1.5)` ou `transform: scale(2, 1.5)`
  → aumenta o tamanho do elemento **1.5× no total** ou **2× na horizontal / 1.5× na vertical**.

> **Note:** Várias funções de transformação podem ser combinadas em sequência.
> Exemplo:
> ```css
> transform: translateX(10px) rotate(45deg) scale(1.2);
> ```
> A ordem importa, porque cada função se aplica ao resultado da anterior.

### Posição X/Y {#x-y-position}

Ao contrário das transformações, os valores **X** e **Y** do Figma correspondem à *posição absoluta* do elemento dentro do frame pai ou do sistema de coordenadas. No CSS, esse posicionamento é representado por propriedades como:

- **top**
  Define o deslocamento vertical a partir da borda superior do elemento que o contém.
  _Exemplo:_ `top: 100px;`
  → posiciona o elemento **100px abaixo do topo** do contêiner.

- **left**
  Define o deslocamento horizontal a partir da borda esquerda do elemento que o contém.
  _Exemplo:_ `left: 100px;`
  → posiciona o elemento **100px a partir da esquerda** do contêiner.

> **Note:** **Diferença em relação ao transform:**
> - `top` e `left` definem a **posição no layout** do elemento.
> - `transform: translate()` desloca o elemento **visualmente**, sem afetar os elementos ao redor nem o fluxo do layout.

## Repetir automaticamente uma camada do Figma com as linhas da planilha {#auto-repeat-a-single-figma-layer-with-your-spreadsheet-rows}

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

Nas abas de sincronização **Content** ou **Styles**, você pode repetir automaticamente uma única camada do Figma ativando a opção **Auto Repeat**. Ela copia a camada original selecionada no Figma e a duplica tantas vezes quanto o número de linhas de dados da sua planilha.

Use isso para transformar um card, um item de catálogo ou um layout de campanha em um design preenchido para cada linha da planilha. As camadas de texto e de imagem dentro do design usam as colunas correspondentes da planilha.

Se você selecionar um componente principal, o CopyDoc cria uma instância para cada linha. Ao selecionar uma instância existente, essa instância é duplicada; ao selecionar um frame, o frame é duplicado.

Se a camada selecionada já estiver diretamente dentro de outra camada do Figma com Auto Layout ativado, ela será duplicada automaticamente dentro dessa camada pai. Caso contrário, o CopyDoc criará um novo frame com Auto Layout e duplicará as novas camadas do Figma nele.

### Nomes dinâmicos para as camadas pai repetidas automaticamente {#dynamic-auto-repeating-parent-layer-names}

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

Para dar a cada camada duplicada do Figma um nome vindo da planilha, faça o nome da camada de template selecionada corresponder ao cabeçalho de uma coluna. O CopyDoc usa o valor dessa coluna em cada linha como o novo nome da camada.

Um único `#` no início é opcional: uma camada chamada `#Title` pode corresponder a uma coluna `Title`, e uma camada chamada `Title` pode corresponder a uma coluna `#Title`. Se os dois cabeçalhos existirem, a correspondência exata tem prioridade, mesmo quando o valor dela estiver em branco. As letras maiúsculas e minúsculas e os espaços ainda precisam corresponder.

Se não houver nenhum nome de camada correspondente na planilha, o plugin CopyDoc usa o nome original da camada do Figma e acrescenta um número de linha a ele (por exemplo, `My Frame Layer (Row 3)`).