Supernova's design tokens streamline your workflow, but managing them effectively is key. This article unveils the most efficient method for handling your design tokens in Supernova, maximizing consistency and minimizing errors. Learn how to organize, update, and leverage your tokens for seamless design and development collaboration, saving you valuable time and effort. Let's unlock the full potential of Supernova's token system!
Istruzioni Passo dopo Passo
-
Importazione del Sistema di Progettazione
- Importare il sistema di progettazione in Supernova (con colori, tipografie, componenti e risorse).
Importazione del Sistema di Progettazione -
Accesso alla Scheda Token
- Accedere alla scheda 'Token' in Supernova. Questa scheda permette di gestire, descrivere e creare i token del sistema di progettazione.
Accesso alla Scheda Token -
Creazione e Gestione dei Token
- Creare nuovi token in Supernova, distinguendo tra quelli importati da Figma (che non possono essere modificati direttamente in Supernova) e quelli creati e gestiti direttamente in Supernova.
Creazione e Gestione dei Token -
Definizione delle Categorie di Token
- Colori, Tipografie (con Font), Gradienti, Ombre, Sfocature, Bordi, Raggi, Misure, Stringhe (per la localizzazione) e 'Altro' (per tipi di dati personalizzati).
Definizione delle Categorie di Token -
Creazione di un Nuovo Token (Esempio: Bordo)
- 'Bordo di Errore'). Definire nome, descrizione e valori (colore, larghezza, tipo di bordo). Utilizzare riferimenti ad altri token esistenti (es. colore 'errore' già definito) per creare dipendenze e mantenere la coerenza.
- Utilizzare la funzione di collegamento per selezionare i valori dei token esistenti (colori, misure, ecc.) da utilizzare nel nuovo token.
Creazione di un Nuovo Token (Esempio: Bordo) -
Creazione di un Token Misura e Organizzazione in Gruppi
- Organizzare i token in gruppi per una migliore gestione e ordine.
- Creare un token 'Misura' (es. 'Spessore') per definire costanti di progettazione riutilizzabili. Organizzare questo token in un gruppo dedicato (es. 'Costanti' o 'Bordi').
Creazione di un Token Misura e Organizzazione in Gruppi -
Collegamento dei Token per Dipendenze Dinamiche
- Collegare il token 'Misura' (es. 'Spessore') ad altri token (es. 'Bordo di Successo') per creare dipendenze dinamiche. Modificando il valore della misura, tutti i token collegati si aggiornano automaticamente.
Collegamento dei Token per Dipendenze Dinamiche
Tips
- Utilizzare i riferimenti tra i token per creare un sistema di progettazione coerente e automatizzato. Le modifiche a un token si propagano automaticamente agli altri token collegati.
- Organizzare i token in gruppi e sottogruppi per una migliore gestione e chiarezza.
- Approfittare delle proprietà personalizzate per estendere la funzionalità dei token e aggiungere informazioni specifiche.
Common Mistakes to Avoid
1. Mancanza di organizzazione dei token
Motivo: Un sistema di gestione dei token disordinato rende difficile trovare e utilizzare i token, rallentando il workflow e aumentando il rischio di incoerenze nel design.
Soluzione: Crea una struttura chiara e coerente per i tuoi token, ad esempio utilizzando cartelle e sottocartelle logiche all'interno di Supernova.
2. Aggiornamenti inconsistenti dei token
Motivo: Modificare un token in un solo punto e non aggiornarlo in tutti i progetti o file che lo utilizzano porta a incoerenze visive e difficoltà di manutenzione del design system.
Soluzione: Utilizza le funzionalità di Supernova per aggiornare automaticamente tutti i riferimenti a un token dopo averlo modificato.
FAQs
Come importo i miei token di design esistenti in Supernova?
Supernova supporta l'importazione da diversi formati, come JSON o CSV. Assicurati che i tuoi token siano strutturati correttamente secondo le specifiche di Supernova. La documentazione ufficiale offre guide dettagliate per l'importazione senza problemi.
Cosa succede se aggiorno un token in Supernova? Si riflette automaticamente nei miei progetti?
Sì, Supernova permette aggiornamenti in tempo reale. Una volta modificato un token, le modifiche si propagano automaticamente a tutti i progetti che lo utilizzano, assicurando coerenza e semplificando il processo di aggiornamento del design.