Data-Table-Ebenen manuell zu deinem Design hinzufügen

Um eine Data-Table-Ebene hinzuzufügen, klick in deinem Design auf eine beliebige Column-Ebene, wähle im Schnellmenü unten im Plugin die Option Data Table und klick dann auf Add, um die Ebenen in dein Design einzufügen.

Weitere Tabellenzeilen oder -spalten hinzufügen. Zusätzliche Zeilen oder Spalten fügst du schnell hinzu, indem du die anfangs erstellten Figma-Ebenen für Tabellenzeilen und/oder Tabellenzellen kopierst und einfügst.

Standardmäßig wird die Data Table auf Desktop und Mobilgeräten gleich dargestellt. Achte deshalb auf die Breite deiner Tabelle, wenn du mehr als ein paar Spalten hinzufügst.

Für kompakte Tabellen mit Symbolen und Text oder Zeilen im Stil einer Checkliste wählst du die übergeordnete Data Table-Ebene aus, klickst auf Settings, aktivierst Mobile Alignment und wählst Center. Damit wird die exportierte Tabelle selbst auf Mobilgeräten zentriert, während die Abstände zwischen Symbol und Text erhalten bleiben. Das ist zuverlässiger, als eine Zentrierung über verschiedene mobile Clients hinweg mit manuellem Innenabstand links und rechts anzunähern.

Bilder in Datentabellen auf Mobilgeräten vergrößern

Wähle ein Bild in deiner Data Table aus, öffne Settings und aktiviere 100% Width Image on Mobile. Bilder, die im Desktop-Design breiter als 150px sind, können sich auf Mobilgeräten auf die volle Breite ihrer Tabellenzelle ausdehnen – passend zur Mindestbreite, die für Bilder in Spalten gilt. Bilder mit einer Breite von 150px oder weniger behalten ihre Größe, damit kleine Symbole nicht gestreckt werden.

Die Breitenprüfung nutzt die dargestellte Breite der Bildebene, nicht die Breite einer verschachtelten Hauptkomponente. Ausdrücklich gesetzte mobile Breiten oder Höhen haben Vorrang. Damit das Bild eine gestapelte Zeile ausfüllt, stell außerdem die Data Table Row so ein, dass ihre Zellen auf Mobilgeräten gestapelt werden.

Eine Datentabelle aus einer Google-Sheets-URL oder aus CSV- bzw. Excel-Daten importieren

Hast du bereits Daten in Google Sheets oder in einer CSV- bzw. Excel-Datei, kannst du automatisch eine neue Data Table mit diesen Tabellendaten erstellen. Klick dazu in deinem Design auf eine beliebige Column-Ebene und wähle im Schnellmenü unten im Plugin die Option Spreadsheet.

Nachdem du die Option Spreadsheet gewählt hast, fügst du entweder eine öffentliche Google-Sheets-URL ein oder ziehst eine CSV- bzw. Excel-Datei ins Plugin. Klick dann auf Add, um die Ebenen in dein Design einzufügen.

Emailify braucht die Berechtigung, die Tabelle zu lesen. Wähle in Google Sheets Share und ändere Restricted in Anyone with the link, bevor du die URL kopierst.

Eine Data Table Row mit dynamischen Daten in einer Schleife wiederholen

Um Daten aus deiner E-Mail-Plattform zu durchlaufen, wähle eine Data Table Row aus und öffne Settings. Trag die Schleifensyntax in Opening Code Wrapper (zum Beispiel {% for product in collection.products %}) und Closing Code Wrapper (zum Beispiel {% endfor %}) ein. Emailify setzt die Tags im exportierten HTML um das <tr></tr>-Element dieser Zeile.

Sobald du die Wrapper-Tags zur Data Table Row-Ebene hinzugefügt hast, kannst du die Ebenen deiner Zeile nach Bedarf mit dynamischen Inhalten füllen.

Du kannst Einstellungen auf mehrere Ebenen anwenden, indem du Settings öffnest und dann in Figma mehrere Emailify-Ebenen desselben Typs auswählst. Jede Einstellung, die du änderst, wird auf alle ausgewählten Ebenen angewendet.