---
url: "/de/copydoc/sync/styles.md"
description: "Neben dem Aktualisieren von Texten in deinen Figma-Ebenen kann die Funktion **Sync Content** auf dieselbe Weise auch automatisch CSS-Styles auf deine Ebenen anwenden."
---

# Figma-Ebenen-Styles mit CSS aus der Tabelle aktualisieren

> Neben dem Aktualisieren von Texten in deinen Figma-Ebenen kann die Funktion **Sync Content** auf dieselbe Weise auch automatisch CSS-Styles auf deine Ebenen anwenden.

### Video-Tutorial: Figma-Ebenen per CSS-Style-Sync aus einer Tabelle gestalten

Dieses Video zeigt, wie du mit dem Plugin CopyDoc Figma-Ebenen per CSS-Style-Sync aus einer Tabelle gestaltest.
[Embedded media](https://www.youtube-nocookie.com/embed/l0Bhqx6X3Ic)

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

Hast du in Figma zum Beispiel Textebenen namens **#SectionHeading**, kannst du ihre Schriftgröße und Farbe ändern, indem du `font-size: 40px; color: #999999;` in die Zeile(n) unter der Spalte **#SectionHeading** deiner Tabelle einträgst.

Sobald du die Tabelle mit Figma synchronisierst, werden die Styles aller passenden Figma-Ebenen automatisch aktualisiert – vorausgesetzt, der CSS-Wert wird unterstützt und gilt für diesen Ebenentyp.

## Unterstützte CSS-Eigenschaften zum Gestalten deiner Figma-Ebenen {#supported-css-properties-that-you-can-use-to-style-your-figma-layers}

Für verschiedene Ebenentypen stehen jeweils bestimmte CSS-Eigenschaften zur Verfügung. Mehrere Eigenschaften wendest du auf eine Ebene an, indem du sie in dieselbe Tabellenzelle schreibst:

zum Beispiel `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;|

Diese CSS-Eigenschaften unterstützt die Tabellen-Synchronisierung derzeit:

### Textebenen {#text-layers}

Diese CSS-Eigenschaften kannst du auf alle Textebenen in Figma anwenden.

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

> **Tip:** **Text-Styles auf alle untergeordneten Ebenen anwenden**. Wendest du CSS-Styles für Textebenen (zum Beispiel `font-size: 30px`) auf eine Ebene mit untergeordneten Ebenen an (zum Beispiel Frame, Gruppe, Komponente, Instanz), gilt der Style automatisch für _jede_ Textebene innerhalb dieser Ebene.

### Andere Ebenen {#other-layers}

Diese CSS-Eigenschaften kannst du auf andere Figma-Ebenen anwenden (Bilder, Rechtecke, Frames usw.):

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

### Eigenschaften für die Positionierung {#positioning-properties}

Diese CSS-Eigenschaften kannst du auf alle Figma-Ebenen anwenden (auch auf Text, Bilder, Rechtecke, Frames usw.).

### Transform {#transform}

Mit der CSS-Eigenschaft `transform` veränderst du Position, Drehung und Skalierung eines Elements visuell, ohne den Platz zu beeinflussen, den es tatsächlich im Layout einnimmt. In Figma und ähnlichen Designtools bildet man damit oft Verschiebungen, Drehungen und Größenänderungen nach, die *innerhalb* eines Frames stattfinden, nicht relativ zum Dokumentfluss.

Häufige Transform-Funktionen sind:

- **translate**
  Verschiebt ein Element entlang der X- und der Y-Achse.
  _Beispiel:_ `transform: translate(10px, 20px)`
  → verschiebt das Element **10px nach rechts** und **20px nach unten**.

- **translateX**
  Verschiebt ein Element horizontal entlang der X-Achse.
  _Beispiel:_ `transform: translateX(10px)`
  → verschiebt das Element **10px nach rechts**.

- **translateY**
  Verschiebt ein Element vertikal entlang der Y-Achse.
  _Beispiel:_ `transform: translateY(20px)`
  → verschiebt das Element **20px nach unten**.

- **rotate**
  Dreht ein Element um seinen Ursprungspunkt.
  _Beispiel:_ `transform: rotate(45deg)`
  → dreht das Element **um 45 Grad im Uhrzeigersinn**.

- **scale**
  Ändert die Größe eines Elements um einen Skalierungsfaktor auf der X- und Y-Achse.
  _Beispiel:_ `transform: scale(1.5)` oder `transform: scale(2, 1.5)`
  → vergrößert das Element **insgesamt um das 1,5-Fache** oder **horizontal um das 2-Fache / vertikal um das 1,5-Fache**.

> **Note:** Mehrere Transform-Funktionen lassen sich hintereinander kombinieren.
> Beispiel:
> ```css
> transform: translateX(10px) rotate(45deg) scale(1.2);
> ```
> Die Reihenfolge ist wichtig, weil jede Funktion auf das Ergebnis der vorherigen angewendet wird.

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

Anders als Transforms entsprechen die Werte **X** und **Y** in Figma der *absoluten Position* des Elements innerhalb seines übergeordneten Frames oder Koordinatensystems. In CSS wird diese Positionierung durch Eigenschaften wie diese abgebildet:

- **top**
  Legt den vertikalen Abstand zur Oberkante des umgebenden Elements fest.
  _Beispiel:_ `top: 100px;`
  → positioniert das Element **100px unterhalb der Oberkante** seines Containers.

- **left**
  Legt den horizontalen Abstand zur linken Kante des umgebenden Elements fest.
  _Beispiel:_ `left: 100px;`
  → positioniert das Element **100px von der linken Kante** seines Containers.

> **Note:** **Unterschied zu transform:**
> - `top` und `left` legen die **Layoutposition** des Elements fest.
> - `transform: translate()` verschiebt das Element **visuell**, ohne umgebende Elemente oder den Layoutfluss zu beeinflussen.

## Eine einzelne Figma-Ebene automatisch für deine Tabellenzeilen wiederholen {#auto-repeat-a-single-figma-layer-with-your-spreadsheet-rows}

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

Nutzt du die Sync-Tabs **Content** oder **Styles**, kannst du eine einzelne Figma-Ebene automatisch wiederholen, indem du den Schalter **Auto Repeat** aktivierst. CopyDoc kopiert dann die ursprünglich ausgewählte Figma-Ebene und dupliziert sie so oft, wie deine Tabellendaten Zeilen haben.

So machst du aus einer Karte, einem Katalogeintrag oder einem Kampagnenlayout ein gefülltes Design für jede Tabellenzeile. Text- und Bildebenen im Design übernehmen die Inhalte der passenden Tabellenspalten.

Wählst du eine Hauptkomponente aus, erstellt CopyDoc für jede Zeile eine Instanz. Wählst du eine bestehende Instanz aus, wird diese Instanz dupliziert; wählst du einen Frame aus, wird der Frame dupliziert.

Liegt deine ausgewählte Figma-Ebene bereits direkt in einer anderen Figma-Ebene mit aktiviertem Auto Layout, wird sie automatisch innerhalb dieser übergeordneten Ebene dupliziert. Andernfalls erstellt CopyDoc einen ganz neuen Auto-Layout-Frame und dupliziert deine neuen Figma-Ebenen stattdessen dort.

### Dynamische Namen für automatisch wiederholte übergeordnete Ebenen {#dynamic-auto-repeating-parent-layer-names}

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

Um jede duplizierte Figma-Ebene nach deiner Tabelle zu benennen, gib der ausgewählten Vorlagenebene denselben Namen wie einer Spaltenüberschrift. CopyDoc verwendet den Wert dieser Spalte aus jeder Zeile als neuen Ebenennamen.

Ein einzelnes führendes `#` ist optional: Eine Ebene namens `#Title` passt zu einer Spalte `Title`, und eine Ebene namens `Title` passt zu einer Spalte `#Title`. Gibt es beide Überschriften, hat die exakte Übereinstimmung Vorrang, auch wenn ihr Wert leer ist. Groß- und Kleinschreibung sowie Leerzeichen müssen trotzdem übereinstimmen.

Gibt es in deiner Tabelle keinen passenden Ebenennamen, nimmt das Plugin CopyDoc stattdessen den ursprünglichen Namen der Figma-Ebene und hängt eine Zeilennummer an (zum Beispiel `My Frame Layer (Row 3)`).