---
url: "/fr/copydoc/sync/styles.md"
description: "En plus de mettre à jour le texte, **Sync Content** peut aussi appliquer automatiquement des styles CSS à vos calques Figma depuis le tableur."
---

# Mettre à jour les styles des calques Figma avec du CSS

> En plus de mettre à jour le texte, **Sync Content** peut aussi appliquer automatiquement des styles CSS à vos calques Figma depuis le tableur.

### Tutoriel vidéo : styliser des calques Figma depuis un tableur avec la synchronisation de styles CSS

Cette vidéo montre comment styliser des calques Figma depuis un tableur avec la synchronisation de styles CSS du plugin CopyDoc.
[Embedded media](https://www.youtube-nocookie.com/embed/l0Bhqx6X3Ic)

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

Par exemple, si vous avez dans Figma des calques de texte nommés **#SectionHeading**, vous pouvez modifier leur taille de police et leur couleur en ajoutant `font-size: 40px; color: #999999;` dans la ou les lignes situées sous la colonne **#SectionHeading** de votre tableur.

Lorsque vous synchronisez le tableur avec Figma, les styles de tous les calques Figma correspondants sont automatiquement mis à jour, à condition que la valeur CSS soit prise en charge et s’applique à ce type de calque.

## Propriétés CSS prises en charge pour styliser vos calques Figma {#supported-css-properties-that-you-can-use-to-style-your-figma-layers}

Certaines propriétés CSS sont disponibles selon le type de calque, et vous pouvez appliquer plusieurs propriétés à un calque en les plaçant dans la même cellule du tableur :

par exemple, `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;|

Voici les propriétés CSS actuellement prises en charge par la synchronisation de tableurs :

### Calques de texte {#text-layers}

Ces propriétés CSS peuvent s’appliquer à n’importe quel calque de texte Figma.

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

> **Tip:** **Appliquer des styles de texte à tous les calques enfants**. Si vous appliquez un style CSS de calque de texte (par exemple `font-size: 30px`) à un calque qui contient des calques enfants (par exemple Frame, Group, Component, Instance), le style est automatiquement appliqué à _chaque_ calque de texte situé dans ce calque.

### Autres calques {#other-layers}

Ces propriétés CSS peuvent s’appliquer aux autres calques Figma (images, rectangles, frames, etc.) :

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

### Propriétés de positionnement {#positioning-properties}

Ces propriétés CSS peuvent s’appliquer à n’importe quel calque Figma (texte, images, rectangles, frames, etc.).

### Transform {#transform}

La propriété CSS `transform` permet de modifier visuellement la position, la rotation et l’échelle d’un élément sans changer l’espace qu’il occupe réellement dans la mise en page. On l’utilise souvent dans Figma et les outils de design similaires pour reproduire des déplacements, des rotations et des redimensionnements qui se produisent *à l’intérieur* d’un frame, et non par rapport au flux du document.

Les fonctions de transformation courantes sont :

- **translate**
  Déplace un élément le long des axes X et Y.
  _Exemple :_ `transform: translate(10px, 20px)`
  → déplace l’élément de **10px vers la droite** et de **20px vers le bas**.

- **translateX**
  Déplace un élément horizontalement le long de l’axe X.
  _Exemple :_ `transform: translateX(10px)`
  → déplace l’élément de **10px vers la droite**.

- **translateY**
  Déplace un élément verticalement le long de l’axe Y.
  _Exemple :_ `transform: translateY(20px)`
  → déplace l’élément de **20px vers le bas**.

- **rotate**
  Fait pivoter un élément autour de son point d’origine.
  _Exemple :_ `transform: rotate(45deg)`
  → fait pivoter l’élément de **45 degrés dans le sens des aiguilles d’une montre**.

- **scale**
  Redimensionne un élément selon un facteur d’échelle sur les axes X et Y.
  _Exemple :_ `transform: scale(1.5)` ou `transform: scale(2, 1.5)`
  → agrandit l’élément **1,5× dans l’ensemble** ou **2× horizontalement / 1,5× verticalement**.

> **Note:** Vous pouvez combiner plusieurs fonctions de transformation à la suite.
> Exemple :
> ```css
> transform: translateX(10px) rotate(45deg) scale(1.2);
> ```
> L’ordre compte, car chaque fonction s’applique au résultat de la précédente.

### Position X/Y {#x-y-position}

Contrairement aux transformations, les valeurs **X** et **Y** de Figma correspondent à la *position absolue* de l’élément dans son frame parent ou son système de coordonnées. En CSS, ce positionnement est représenté par des propriétés comme :

- **top**
  Indique le décalage vertical par rapport au bord supérieur de l’élément conteneur.
  _Exemple :_ `top: 100px;`
  → place l’élément **100px sous le haut** de son conteneur.

- **left**
  Indique le décalage horizontal par rapport au bord gauche de l’élément conteneur.
  _Exemple :_ `left: 100px;`
  → place l’élément **à 100px de la gauche** de son conteneur.

> **Note:** **Différence avec transform :**
> - `top` et `left` définissent la **position de l’élément dans la mise en page**.
> - `transform: translate()` décale l’élément **visuellement**, sans affecter les éléments voisins ni le flux de la mise en page.

## Répéter automatiquement un calque Figma selon les lignes de votre tableur {#auto-repeat-a-single-figma-layer-with-your-spreadsheet-rows}

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

Avec les onglets de synchronisation **Content** ou **Styles**, vous pouvez répéter automatiquement un calque Figma en activant l’option **Auto Repeat** : le calque Figma sélectionné est copié et dupliqué autant de fois que votre tableur contient de lignes de données.

Vous pouvez ainsi transformer une carte, un article de catalogue ou une mise en page de campagne en un design rempli pour chaque ligne du tableur. Les calques de texte et d’image du design utilisent les colonnes correspondantes du tableur.

Si vous sélectionnez un composant principal, CopyDoc crée une instance pour chaque ligne. Si vous sélectionnez une instance existante, c’est cette instance qui est dupliquée ; si vous sélectionnez un frame, c’est le frame qui est dupliqué.

Si le calque Figma sélectionné se trouve déjà directement dans un autre calque Figma avec Auto Layout activé, il est automatiquement dupliqué dans ce calque parent ; sinon, CopyDoc crée un tout nouveau frame Auto Layout et y duplique vos nouveaux calques Figma.

### Noms dynamiques des calques parents répétés automatiquement {#dynamic-auto-repeating-parent-layer-names}

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

Pour nommer chaque calque Figma dupliqué à partir de votre tableur, faites correspondre le nom du calque modèle sélectionné à un en-tête de colonne. CopyDoc utilise la valeur de cette colonne dans chaque ligne comme nouveau nom de calque.

Un seul `#` en début de nom est facultatif : un calque nommé `#Title` peut correspondre à une colonne `Title`, et un calque nommé `Title` à une colonne `#Title`. Si les deux en-têtes existent, la correspondance exacte l’emporte, même si sa valeur est vide. Les majuscules et les espaces doivent tout de même correspondre.

Si aucun nom de calque ne correspond dans votre tableur, le plugin CopyDoc reprend le nom d’origine du calque Figma et y ajoute un numéro de ligne (par exemple, `My Frame Layer (Row 3)`).