Ob du XLSX, CSV oder Google Sheets nutzt: Die Struktur ist immer dieselbe. Die allererste Zeile (die „Kopfzeile“) deiner Tabelle wird zur ersten Kopfzeile der Tabelle in Figma (als „Komponenten“-Zeile), und alle Zeilen darunter werden zu Instanzen dieser ersten Kopfzeile.
Für eine Vorschau deiner Tabelleninhalte fügst du deine öffentliche Google-Sheets-URL in das Eingabefeld Your Public Google Sheet URL ein. Ist die URL gültig, öffentlich und korrekt strukturiert, wird nach dem Einfügen automatisch eine Vorschau der enthaltenen Spaltenüberschriften geladen.
Sobald die Vorschau geladen ist, klick auf Generate Table from Rows. Damit werden die Inhalte deiner Tabelle als Tabelle auf deiner aktuellen Figma-Seite importiert.
Beispielstruktur einer Tabelle für den Tabellenimport
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 Die | Action | 13 | 123 Reviews |
| Dune | Sci-Fi Action | 14 | 124 Reviews |
| Black Widow | Action | 18 | 125 Reviews |
| Suicide Squad | Action | 18 | 125 Reviews |
Unterstützte Markdown-Formatierung für Tabellentexte
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 snippetein (den Linktext kannst du ebenfalls formatieren, indem du die Syntax für fett/kursiv innerhalb der[]des Links verwendest).