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.
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
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
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;)
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
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
Diese CSS-Eigenschaften kannst du auf alle Figma-Ebenen anwenden (auch auf Text, Bilder, Rechtecke, Frames usw.).
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)odertransform: 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.
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
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.
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
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)).