Vai al contenuto
🛠️ToolsShed

Convertitore di Design Token

Converti i design token tra JSON, variabili CSS e formato SCSS.

Informazioni sullo strumento

I design token sono i blocchi fondamentali dei moderni design system—valori standardizzati per colori, spaziature, tipografia, ombre e altre proprietà visive che i team riutilizzano nei prodotti. Centralizzando queste decisioni in un unico formato, i team mantengono la coerenza visiva, riducono i bug e accelerano i flussi di lavoro di progettazione e sviluppo. Che tu stia lavorando su un singolo prodotto o gestendo più piattaforme, i design token eliminano la necessità di tracciare manualmente i colori o le misure in diverse parti di una base di codice.

Questo convertitore semplifica il passaggio tra i formati di design token più comuni: JSON (che memorizza i token come una semplice struttura chiave-valore), variabili CSS (che si rendono nativamente nei browser tramite selettori :root) e variabili SCSS (che richiedono un passaggio di build ma si integrano perfettamente con i preprocessori Sass). Basta incollare i tuoi token in qualsiasi formato e selezionare il tuo formato di destinazione—lo strumento rileva automaticamente il tuo input e genera un output pulito pronto per copiare e incollare nel tuo progetto.

I team che utilizzano design token generalmente iniziano con JSON come formato sorgente, quindi generano output specifici della piattaforma: CSS per le applicazioni web che necessitano di supporto nativo del browser, SCSS per i progetti costruiti con Sass e JSON per gli strumenti che consumono i token a livello programmatico. Questo strumento supporta la conversione bidirezionale, quindi puoi estrarre i token dal CSS o SCSS esistenti e riconvertirli in JSON ogni volta che hai bisogno di controllare o refactorizzare il tuo design system.

Domande Frequenti

Implementazione del Codice

# 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.