Video-Tutorial: Komponentenvarianten in Figma über eine Tabelle synchronisieren
Dieses Video zeigt, wie du mit dem Plugin CopyDoc Komponentenvarianten in Figma über eine Tabelle synchronisierst.
Schritt 1: Varianten deiner Komponentenebene in Figma einrichten
Bevor du deine Tabelle synchronisierst, um Komponentenvarianten auszutauschen, richtest du dein Figma-Komponentenset mit Varianten als Figma-Ebene ein. Folge dazu den Schritten unten (wie im Video oben gezeigt).
- Erstelle eine neue Komponentenebene in Figma und benenne sie passend zu deiner Spaltenüberschrift (zum Beispiel #Tag).
- Klick mit der rechten Maustaste auf die Komponentenebene, zeig auf Main component und klick auf Add variant, um ein neues Figma-Komponentenset zu erstellen.
- Füg so viele neue Varianten wie nötig hinzu, indem du auf das +-Symbol unten am (ausgewählten) Komponentenset klickst, und pass den Style jeder neuen Variante an (zum Beispiel Hintergründe oder Farben).
- Sobald du deine Komponentenvarianten erstellt hast, kannst du die Namen der Eigenschaften und Varianten anpassen. Benenne die Standardnamen von Figma um, damit du sie leichter erkennst und in deiner Tabelle nutzen kannst (zum Beispiel „Property 1“ in „Genre“ und „Variant 1“ in „Synthwave“).
- Öffne in Figma das Panel Assets, zieh deine neue Figma-Komponente (zum Beispiel #Tag) in deine Figma-Datei und verschieb sie in die Figma-Frames, die du aus einer Tabelle synchronisieren möchtest.
- Folge der Anleitung in Schritt 2 unten, um die Variante deiner Komponente automatisch auszutauschen, indem du Zeilen aus einer Tabelle mit deinen Figma-Frames synchronisierst.
Schritt 2: Varianten durch Synchronisieren deiner Tabelle austauschen
Wie beim Synchronisieren normaler Texte fügst du zum Austauschen von Varianten aus einer Tabelle zuerst den Namen deiner Komponentenebene (zum Beispiel Tag) als neue Spaltenüberschrift in die erste Zeile deiner Tabelle ein.
Wenn du in der Seitenleiste doppelt auf deine Figma-Variantenebene klickst, siehst du Eigenschafts- und Variantennamen, verbunden durch ein Gleichheitszeichen = (zum Beispiel Genre=Synthwave). Kopiere diese Werte in die folgenden Zeilen derselben Spalte, wie im Beispiel unten (und im Video oben gezeigt).
| #Tag |
|---|
| Genre=Synthwave |
| Genre=Outrun |
| Genre=Vaporwave |
| Genre=Darksynth |
Sobald du die Tabelle mit Figma synchronisierst, wird bei allen passend benannten Komponentenebenen in Figma (zum Beispiel #Tag) automatisch die Variante ausgetauscht – entsprechend dem Wert, den du in den Zeilen deiner Tabelle angegeben hast.
Weitere Texte oder Bilder für andere Ebenen kannst du in derselben Tabelle trotzdem ganz normal synchronisieren, indem du dafür zusätzliche Spalten anlegst.