Video-Tutorial: Merge-Tags in Figma-Textebenen aus einer Tabelle synchronisieren

Dieses Video zeigt, wie du mit dem Plugin CopyDoc Merge-Tags in Figma-Textebenen aus einer Tabelle synchronisierst.

Video-Tutorial: Inhalte mit erweiterten Merge-Tags in Tabellenzellen synchronisieren

Dieses Video zeigt, wie du mit dem Plugin CopyDoc Figma-Texte synchronisierst und Figma-Ebenen umbenennst – mit erweiterten Merge-Tags in Tabellenzellen.

Merge-Tag-Syntax

CopyDoc nutzt eine einfache Merge-Tag-Syntax: #{columnName}. Du kannst diese Merge-Tags an beliebiger Stelle in deine Textebenen einfügen. Sie werden dann durch Werte aus deiner Tabelle ersetzt.

Anwendungsbeispiel

Figma-Textebene:

Hello #{firstName} #{lastName},
Your order #{orderId} is ready for pickup!

Tabellenspalten:

firstName	lastName	orderId
John	Smith	12345
Sarah	Johnson	67890

Ergebnis nach der Synchronisierung:

• Hello John Smith, Your order 12345 is ready for pickup!
• Hello Sarah Johnson, Your order 67890 is ready for pickup!

Die wichtigsten Vorteile

• Formatierung bleibt erhalten: Textstile, Schriften und Farben bleiben unverändert
• Mehrere Merge-Tags: Nutze in einer Ebene so viele Merge-Tags, wie du brauchst
• Flexible Spaltennamen: Funktioniert mit verschiedenen Formaten für Spaltenüberschriften
• Intelligenter Fallback: Gibt es keine passende Spalte, bleibt der Merge-Tag-Text erhalten
• Verweise auf andere Zeilen: Hol Daten mit der Syntax .N aus bestimmten Zeilen
• Dynamische Ebenennamen: Benenne Frames und Ebenen mit Merge-Tags um

Flexible Spaltenüberschriften

CopyDoc ordnet Spaltenüberschriften intelligent zu. Alle diese Formate funktionieren:

• Standard: firstName passt zu #{firstName}
• Mit #-Präfix: #firstName passt zu #{firstName}
• Vollständiges Merge-Tag: #{firstName} passt zu #{firstName}

Erweiterte Funktionen

Zeilenindex überschreiben (Syntax .N)

Hol Daten mit der Syntax .N aus bestimmten Zeilen. Dabei ist N die Zeilennummer (beginnend bei 2, weil Zeile 1 die Überschriften enthält).

Beispiel:

Tabelle:

firstName	lastName
John	Smith
Sarah	Johnson
Mike	Williams

Figma-Textebene in Zeile 1:

Current: #{firstName} #{lastName} Next up: #{firstName.3} #{lastName.3}

Ergebnis:

Current: John Smith Next up: Sarah Johnson

Das ist praktisch, um:

• Verweise wie „als Nächstes“ oder „vorherige“ zu erstellen
• zugehörige Daten aus anderen Zeilen anzuzeigen
• Vergleichsansichten aufzubauen
• Referenzlisten zu erstellen

Ebenen mit Merge-Tags umbenennen

Merge-Tags funktionieren auch beim Umbenennen von Frames und Ebenen. Nutze sie in den Spaltenwerten deiner Tabelle, um Ebenennamen dynamisch zu erzeugen.

Beispiel:

Tabelle:

frameName	firstName	lastName
#{firstName} #{lastName}	John	Smith
#{firstName} #{lastName}	Sarah	Johnson

Ergebnis: Deine Frames werden umbenannt in:

• „John Smith“
• „Sarah Johnson“

Den Zeilenindex kannst du auch in Ebenennamen überschreiben:

• #{firstName.2} vs. #{firstName.3} erzeugt Frame-Namen zum Vergleichen
• Ideal für Vorher-nachher-Vergleiche oder „Option A vs. Option B“

Mehrere Ebenen auf einmal umbenennen

Für einfacheres Umbenennen: Hast du 6 Figma-Frames, die alle #My Frame heißen, kannst du diesen Namen als Spaltennamen in deiner Tabelle verwenden und die Frames auf einmal mit festen Werten oder Kombinationen aus Merge-Tags umbenennen.

Zellinhalte in der Tabelle zusammensetzen

Tabellenzellen können mit der Merge-Tag-Syntax auf andere Spalten verweisen. Das passiert, bevor der Wert auf Figma-Ebenen angewendet wird, sodass du berechnete Werte erstellen kannst.

Beispiel:

Tabelle:

firstName	lastName	fullName	greeting
John	Smith	#{firstName} #{lastName}	Hello, #{fullName}!
Sarah	Johnson	#{firstName} #{lastName}	Hello, #{fullName}!

So funktioniert es:

1. Die Spalte fullName wird zu „John Smith“ bzw. „Sarah Johnson“ aufgelöst
2. Die Spalte greeting nutzt dann diesen aufgelösten Wert und wird zu „Hello, John Smith!“ bzw. „Hello, Sarah Johnson!“
3. Dieser endgültige Wert wird auf deine Figma-Textebenen angewendet

Vorteile:

• Wiederverwendbare Formeln in deiner Tabelle erstellen
• Mehrere Spalten zu formatierten Zeichenfolgen kombinieren
• Komplexe Inhalte aus einfachen Datenbausteinen aufbauen
• Ähnliche Inhalte einheitlich halten

Erweitertes Beispiel mit Zeilenverweisen:

product	price	competitor	comparison
Widget A	$99	Widget B	#{product} (#{price}) vs #{product.3} (#{price.3})
Widget B	$149	Widget C	#{product} (#{price}) vs #{product.4} (#{price.4})
Widget C	$199	Widget A	#{product} (#{price}) vs #{product.2} (#{price.2})

So entsteht dynamischer Vergleichstext wie „Widget A ($99) vs Widget B ($149)“.

Typische Anwendungsfälle

• E-Mail-Vorlagen: Namen und Details der Empfänger personalisieren
• Visitenkarten: Viele Varianten mit unterschiedlichen Kontaktdaten erzeugen
• Marketingmaterial: Lokalisierte Versionen mit unterschiedlichen Inhalten erstellen
• Datenvisualisierungen: Beschriftungen und Titel dynamisch aktualisieren
• Produktkataloge: Produktnamen, Preise und Beschreibungen in einem Schritt aktualisieren
• Vergleichslayouts: Daten aus mehreren Zeilen nebeneinander zeigen
• Dynamische Ebenenorganisation: Frames automatisch nach ihrem Inhalt benennen

Tipps

• Setz Werte mit Kommas in deiner CSV-Datei in Anführungszeichen: "42,580"
• Teste zuerst mit ein paar Ebenen, bevor du die Werte auf dein ganzes Design anwendest
• Nutze aussagekräftige Spaltennamen, damit deine Tabelle leicht verständlich ist
• Zeilennummern beginnen bei 2 (Zeile 1 enthält die Überschriften), also verweist .2 auf die erste Datenzeile
• Zuerst werden die Tabellenzellen aufgelöst, danach die Merge-Tags in den Figma-Ebenen
• Kombiniere Merge-Tags kreativ, um komplexe dynamische Inhalte aufzubauen