Convertisseur de Design Tokens
Convertissez les design tokens entre JSON, variables CSS et formats SCSS.
À propos de cet outil
Les design tokens sont les éléments fondamentaux des systèmes de design modernes—des valeurs standardisées pour les couleurs, espacements, typographie, ombres et autres propriétés visuelles que les équipes réutilisent dans leurs produits. En centralisant ces décisions dans un seul format, les équipes maintiennent la cohérence visuelle, réduisent les erreurs et accélèrent les flux de travail de conception et développement. Que vous travailliez sur un seul produit ou gériez plusieurs plateformes, les design tokens éliminent le besoin de suivre manuellement les couleurs ou les mesures dans différentes parties d'une base de code.
Ce convertisseur facilite le passage entre les formats de design tokens les plus courants : JSON (qui stocke les tokens comme une structure simple clé-valeur), variables CSS (qui s'affichent nativement dans les navigateurs via des sélecteurs :root) et variables SCSS (qui nécessitent une étape de compilation mais s'intègrent parfaitement aux préprocesseurs Sass). Il suffit de coller vos tokens dans n'importe quel format et de sélectionner votre format cible—l'outil détecte automatiquement votre entrée et génère une sortie propre prête à copier et coller dans votre projet.
Les équipes utilisant des design tokens commencent généralement par JSON comme format source, puis génèrent des sorties spécifiques à chaque plateforme : CSS pour les applications web nécessitant une prise en charge native du navigateur, SCSS pour les projets construits avec Sass, et JSON pour les outils qui consomment les tokens de manière programmatique. Cet outil prend en charge la conversion bidirectionnelle, vous permettant d'extraire des tokens du CSS ou SCSS existant et de les reconvertir en JSON chaque fois que vous avez besoin d'auditer ou de refactoriser votre système de design.
Questions Fréquentes
Implémentation du Code
# 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.