Design-Token-Konverter
Design-Tokens zwischen JSON, CSS-Variablen und SCSS-Formaten konvertieren.
Über dieses Tool
Design-Tokens sind die Bausteine moderner Design-Systeme—standardisierte Werte für Farben, Abstände, Typografie, Schatten und andere visuelle Eigenschaften, die Teams produkte übergreifend wiederverwenden. Indem Sie diese Entscheidungen in einem einzigen Format zentral speichern, gewährleisten Teams visuelle Konsistenz, reduzieren Fehler und beschleunigen sowohl Design- als auch Entwicklungs-Workflows. Egal ob Sie an einem einzelnen Produkt arbeiten oder mehrere Plattformen verwalten, Design-Tokens eliminieren die Notwendigkeit, Farben oder Messungen manuell in verschiedenen Teilen einer Codebasis zu verfolgen.
Dieser Konverter ermöglicht ein einfaches Wechseln zwischen den gängigsten Design-Token-Formaten: JSON (das Tokens als einfache Schlüssel-Wert-Struktur speichert), CSS-Variablen (die in Browsern über :root-Selektoren nativ gerendert werden) und SCSS-Variablen (die einen Build-Schritt benötigen, sich aber nahtlos in Sass-Präprozessoren integrieren). Fügen Sie einfach Ihre Tokens in beliebigem Format ein und wählen Sie Ihr Zielformat—das Tool erkennt automatisch Ihre Eingabe und generiert eine saubere Ausgabe, die Sie sofort kopieren und in Ihr Projekt einfügen können.
Teams, die Design-Tokens verwenden, beginnen normalerweise mit JSON als Quellformat und generieren dann plattformspezifische Ausgaben: CSS für Webanwendungen, die nativen Browser-Support benötigen, SCSS für mit Sass erstellte Projekte, und JSON für Tools, die Tokens programmatisch konsumieren. Dieses Tool unterstützt bidirektionale Konvertierung, sodass Sie Tokens aus vorhandenem CSS oder SCSS extrahieren und sie jederzeit zurück zu JSON konvertieren können, wenn Sie Ihr Design-System überprüfen oder refaktorieren müssen.
Häufig gestellte Fragen
Code-Implementierung
# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
lines = [f" --{k}: {v};" for k, v in tokens.items()]
return ":root {\n" + "\n".join(lines) + "\n}"
# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
return "\n".join(f"${k}: {v};" for k, v in tokens.items())
tokens = {
"color-primary": "#6366f1",
"spacing-4": "16px",
"border-radius": "8px"
}
print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.