Tabelle passend zu deinen Figma-Ebenen strukturieren

Mit Sync Content synchronisierst du wiederholbare Texte und Bilder aus mehreren Zeilen einer Tabelle (.xlsx/.csv oder öffentliches Google Sheet) mit deinen Figma-Ebenen.

Figma-Ebenen aus einer Tabelle automatisch wiederholen und synchronisieren

Dieses Video zeigt, wie du mit dem Plugin CopyDoc Figma-Ebenen aus einer Tabelle automatisch wiederholst und synchronisierst.

Das ist besonders praktisch für Designs mit sich wiederholenden Rastern oder Listen, die du automatisch mit echten Inhalten füllen möchtest.

Mit dieser Funktion kannst du außerdem Ebenen umbenennen oder CSS-Styles aus deiner Tabelle anwenden.

Beispielstruktur einer Tabelle für die Synchronisierung mit Figma-Ebenen ​

Ob du XLSX, CSV oder Google Sheets nutzt: Die Struktur ist immer dieselbe. Die allererste Zeile (die „Kopfzeile“) deiner Tabelle muss die Namen der Figma-Ebenen enthalten, mit denen die Zeilen darunter synchronisiert werden sollen.

Die Namen kannst du frei wählen, am einfachsten ist aber ein kurzes, aussagekräftiges Hashtag-Format wie #Title oder #Description. In Figma benennst du deine Textebenen dann ebenfalls #Title oder #Description. So werden sie einander zugeordnet, wenn du die Tabelle später im Plugin synchronisierst.

#Title#Genre#Age Rating#Total Reviews
No Time To DieAction13123 Reviews
DuneSci-Fi Action14124 Reviews
Black WidowAction18125 Reviews
Suicide SquadAction18125 Reviews

Eine einzelne Figma-Ebene automatisch für deine Tabellenzeilen wiederholen ​

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 ​

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

Unterstützte Markdown-Formatierung für Texte ​

Du kannst deinen Tabelleninhalten optional einfache Markdown-Formatierung (fett, kursiv) und Links hinzufügen. Sie wird automatisch angewendet, wenn der Textbaustein mit deiner Figma-Textebene synchronisiert wird.

Deine Figma-Textebene kann mit normalem Text beginnen; du musst kein fettes oder kursives Muster vorformatieren. Nutze eine Schriftfamilie, für die in Figma der passende Schnitt fett, kursiv oder fett kursiv verfügbar ist. Die Tabellenvorschau nutzt Browserschriften, ihr Aussehen allein bestätigt also nicht, dass deine Figma-Schrift diese Schnitte hat.

  • Fetten Text kennzeichnest du mit doppelten Sternchen **Snippet text to bold** oder doppelten Unterstrichen __Snippet text to bold__
  • Kursiven Text kennzeichnest du mit einfachen Sternchen *Italic Snippet Text* oder einfachen Unterstrichen _Italic Snippet Text_
  • Fett kursiven Text kennzeichnest du mit dreifachen Sternchen ***Bold Italic Snippet Text*** oder dreifachen Unterstrichen ___Bold Italic Snippet Text___
  • Hyperlinks fügst du mit der Markdown-Syntax This is [my link here](https://example.com) in a text snippet ein (den Linktext kannst du ebenfalls formatieren, indem du die Syntax für fett/kursiv innerhalb der [] des Links verwendest).