Was sind Design Tokens?
Design-Token sind die atomaren Design-Entscheidungen, die ein visuelles Design-System definieren - Farben, Abstand, Typografie, Randradien und mehr. Gespeichert als strukturiertes JSON dienen sie als eine einzige Quelle der Wahrheit zwischen Design-Tools (wie Figma) und Code. Dieser Konverter transformiert das Token JSON in gebrauchsfertige CSS-Variablen, SCSS-Variablen, Tailwind CSS-Konfiguration oder JavaScript-Exporte.
Wie man Design Token konvertiert
- 1Fügen Sie Ihre Design-Token JSON ein. Tokens sollten eine Value-Eigenschaft haben, wie ein verschachteltes Objekt, bei dem die Blattknoten einen Schlüssel enthalten, der als Wert mit dem Token-Wert bezeichnet wird.
- 2Wählen Sie Ihr Ausgabeformat: CSS, SCSS, Tailwind oder JS.
- 3Passen Sie für die CSS-Ausgabe das Präfix der Variablen an (Standard ist --).
- 4Kopieren Sie die erzeugte Ausgabe in Ihr Projekt.
Häufige Anwendungsfälle
Design-to-Code Handoff
Konvertieren Sie Figma-Token-Exporte direkt in CSS-Variablen zur Verwendung in Ihren Stylesheets.
Tailwind Theme Setup
Generieren Sie Tailwind CSS Theme-Konfiguration aus Ihren Design-System-Token.
Multi-Plattform-Token
Exportieren Sie Token in verschiedene Formate für Web (CSS/SCSS) und JavaScript-basierte Styling-Lösungen.
Häufig gestellte Fragen
Welches JSON-Format wird erwartet?
Das Tool erwartet ein verschachteltes JSON-Objekt, bei dem Blattknoten eine Werteigenschaft haben. Dies ist kompatibel mit Figma Tokens, Style Dictionary und den meisten Design-Token-Formaten.
Unterstützt dies Referenzen oder Aliase?
Derzeit arbeitet dieses Tool mit aufgelösten Werten. Token-Referenzen wie color.primary.500, die in curly-Zahnspangen eingewickelt sind, werden nicht automatisch aufgelöst.
Kann ich dies mit Tokens Studio für Figma verwenden?
Ja. Exportieren Sie Ihre Token als JSON aus Tokens Studio und fügen Sie sie hier ein. Die verschachtelte Struktur mit Werteigenschaften wird vollständig unterstützt.