Progettare in modo intelligente significa progettare con ordine: quando gli elementi hanno lo stesso nome per tutti, il team lavora senza intoppi e le consegne avvengono senza intoppi. In Figma, questo si traduce nell'adozione di una nomenclatura chiara per livelli, componenti, stili, variabili e stati, in modo che chiunque possa capire a colpo d'occhio cosa sia ogni elemento. Stabilire regole di denominazione coerenti aumenta la velocità, evita confusione e mantiene la coerenza visiva. in qualsiasi progetto, da un semplice kit di interfaccia utente a un sistema di progettazione maturo.
In questa guida, imparerai come creare una tassonomia completa che copra ogni aspetto, dai tipi di elemento e le loro proprietà alla grammatica di denominazione, alla struttura e all'ordinamento. Imparerai anche come sfruttare l'intelligenza artificiale di Figma per rinominare i livelli in blocco e implementare le variabili come token riutilizzabili per la progettazione e la prototipazione avanzate. L'idea è quella di arrivare a un linguaggio comune e funzionante, che possa essere adattato senza problemi..
Le basi: perché la nomenclatura è importante in un sistema di progettazione
Prima di entrare nei dettagli, vale la pena stabilire il framework: un sistema di progettazione in Figma riunisce componenti, stili e regole che articolano l'interfaccia. Per mantenere coerenza ed efficienza è fondamentale definire nomi coerenti in tutto il sistema.In questo modo, la tua libreria non diventerà un ammasso confuso di pulsanti quasi identici ma chiamati con mille nomi diversi.
All'interno di tale sistema, le proprietà e i loro valori sono fondamentali: colore, tipografia, spaziatura, dimensioni, stati, modalità... Quanto più coerente sarà la denominazione di ogni proprietà e di ogni valore, tanto più facile sarà applicare e mantenere l'aspetto generale. in tutte le parti del prodotto.
Organizzazione pratica di componenti e stili
Quando si lavora con i componenti, l'utilizzo di nomi descrittivi e prevedibili consente di risparmiare tempo nella ricerca e nella comprensione delle istanze. Per i pulsanti, ad esempio, differenziare tipo e scopo (primario, secondario); e aggiungere lo stato (ad esempio, normale o in hovering) dove appropriato.
Per quanto riguarda le icone, è meglio evitare quelle generiche come "Icona 123". Scegli nomi riconoscibili come "posta", "carrello" o "reti" Dovrebbero spiegare di cosa si tratta senza aprire il livello. Questa chiarezza è apprezzabile quando si filtra nella libreria e quando si ispeziona dalla modalità Sviluppo.
Per gli stati dei componenti interattivi, assegna loro un nome che sia inequivocabilmente distinguibile: ad esempio, un pulsante principale inattivo e la sua versione al passaggio del mouse devono essere chiaramente differenziati. L'utilizzo di un suffisso o di un modificatore di stato risolve il problema (ad esempio, primary/primary-hover).
Se gestisci più di un sistema di progettazione in parallelo, contrassegnane la gerarchia. Distinguere tra un set "principale" e un set "secondario" impedisce di mescolare pezzi che non appartengono insieme.soprattutto nelle organizzazioni con più marchi o settori verticali.
Vantaggi dell'allineamento dei nomi tra progettazione e sviluppo
Se l'intero team utilizza lo stesso linguaggio, si riducono gli attriti: quando uno sviluppatore legge il nome del livello e questo corrisponde al token o alla classe nel codice, l'implementazione è più semplice. La nomenclatura è il collante che tiene insieme la collaborazione tra le discipline. e riduce i cicli di revisione.
Inoltre, quando arriva il momento di verificare o ridimensionare il sistema, identificare e raggruppare gli elementi risulta semplice se le regole di denominazione sono state applicate in modo coerente. La coerenza nominale si traduce in manutenibilità e risparmio sui costi con il passare del tempo.
Passaggi per creare il file del sistema di progettazione in Figma
Costruire un sistema solido non è questione di tempo, ma esiste un percorso chiaro che puoi seguire per non perderti lungo il cammino. Inizia con l'essenziale e documenta ogni decisione per renderla condivisibile.
- Inventario degli elementi chiave: definisci cosa intendi standardizzare (palette, font, scale di spaziatura, componenti critici come pulsanti, input, schede…). Un ambito chiaro impedisce la rielaborazione successiva.
- File dedicato al sistema: crea un file specifico che funge da fonte di verità. Separando la libreria dai progetti si garantisce un migliore controllo e controllo delle versioni delle modifiche..
- Componentizzare con criteri: struttura i componenti e le loro varianti seguendo la convenzione scelta. Il nome dovrebbe riflettere il tipo, lo scopo e lo stato quando tocca.
- Definisci stiliStili di testo, colori ed effetti con nomi coerenti, così da poterli trovare facilmente. Applica gli stessi schemi grammaticali e di unione delle parole..
- Documentare l'uso: aggiungi note su quando utilizzare ogni brano, limiti ed esempi. Una guida chiara semplifica la progettazione "alla stessa temperatura" per l'intera organizzazione.
Tassonomia: componenti, oggetti, proprietà e valori
Affinché un glossario funzioni, è necessario innanzitutto sapere di quali parti si sta parlando e come sono correlate tra loro. Questa tassonomia ti servirà da mappa per assicurarti di non lasciare nulla in sospeso..
Componenti: base e composti
In termini Figma, un componente è un blocco con una propria identità visiva all'interno del kit UI (come una scheda). Un componente di base è un pezzo progettato per essere inserito all'interno di altri. (Ad esempio, il pulsante numerico che esiste solo all'interno di un selettore di data). Alcune librerie li etichettano come asset, frammenti, parti, elementi o sottocomponenti: l'idea è la stessa.
Oggetti: contenitori ed elementi
Un oggetto è un pezzo all'interno di un componente. Esistono due gruppi principali: contenitori (scatole, sezioni) ed elementi (contenuti)Tra gli elementi troverete testo (etichetta, titolo, sottotitolo, didascalia), altri componenti (icone, illustrazioni, pulsanti, tabelle), vettori (cerchio, rettangolo, poligono) e media (immagine, gif, video).
Proprietà e valori
Le proprietà sono le parti variabili (dimensione, stato, colore, densità, ecc.). Ogni proprietà offre un insieme di possibili valoriAd esempio, la proprietà "stato" di un pulsante può essere normale, hover, premuto, disabilitato...
Esistono due famiglie di valori: varianti e valori booleani. Una variante supporta più di due opzioni (xs/s/m/l o info/warn/error), mentre un valore booleano rappresenta un tipico sì/no (Vero/Falso, On/Off, Mostra/Nascondi icona).
Struttura dei nomi: modificatori e loro posizione
Una volta che hai chiaro cosa vuoi nominare (componente, oggetto, proprietà o valore), devi decidere come evidenziarne le differenze. I modificatori aiutano a distinguere varianti, stati e contesti.
Tipi di modificatori
Esistono diversi modi per modificare visivamente un nome. È possibile utilizzare icone, simboli o parole chiave. per rafforzare la tua lettura:
- Icona: ad esempio, un simbolo posto davanti per indicare utilità o stato (solo se il computer lo supporta e lo comprende).
- Segni di punteggiatura: prefissi o separatori come ._Base o marcatori di sottolivello.
- Parole, acronimi e abbreviazioni: suffissi come Item-List, Cell-Header, ShowIcon, BC_…
L'importante è che la convenzione sia esplicita e documentata. Se si combinano tipi di modificatori, definire priorità e casi d'uso. per evitare mescolanze caotiche.
Posizione del modificatore
L'ordine deve essere coerente in tutto il sistema. Puoi posizionare il modificatore prima (Item-List) o dopo (List-Item)L'essenziale è non alternare i due modelli senza una strategia chiara.
Grammatica dei nomi: tipo, numero, iniziali e unioni
La standardizzazione della grammatica rende i nomi leggibili e prevedibili. Decidi una volta e applicalo sempreAltrimenti aumenteranno le eccezioni difficili da ricordare.
Tipo di termine
Scegli se il nome sarà un verbo, un aggettivo o un sostantivo e in quale forma sarà coniugato. Opzioni valide: participio (Collapsed), presente (Collapse), aggettivo (Collapsable), sostantivo (Collapsible) o combinazioni come "è comprimibile", "mostra comprimibile", "icona prima".
Singolare o plurale
Definisci se il nome deve essere singolare o plurale e mantieni lo schema. L'utilizzo coerente di Button/Buttons o Size/Sizes semplifica la ricerca e la letturaÈ anche possibile impostare un generico ("azioni") se raggruppa meglio più elementi.
Iniziali e stile visivo
Imposta la modalità di capitalizzazione: Maiuscolo + Maiuscolo (icona prima), minuscolo + minuscolo (icona prima), Maiuscolo + minuscolo (icona prima) o minuscolo + Maiuscolo (icona prima). La capitalizzazione è parte del sistema, non un dettaglio minore.
Abbinamenti di parole
Il modo in cui si combinano i termini definisce la leggibilità e l'adattamento al codice. Opzioni comuni: senza spazio (iconBefore), con spazio (icon before), punto (icon.Before), trattino (icon-before), trattino basso (icon_before)Evitate combinazioni che compromettono la lettura se non aggiungono valore.
Sono in fase di sviluppo stili predefiniti (Case Styles) che combinano iniziali e unioni: camelCase (senza spazi e ogni parola in maiuscolo tranne la prima), PascalCase (tutto in maiuscolo e senza spazi), kebab-case (trattino e lettere minuscole) e snake_case (trattino basso e lettere minuscole)Scegli quello più adatto al tuo stack e sii coerente.
Come ordinare: alfabeticamente, sequenzialmente e gerarchicamente
Oltre al nome, anche il modo in cui vengono ordinati gli elenchi lunghi è importante per trovare rapidamente gli elementi. Tre approcci funzionano bene nelle biblioteche:
- Alfabetico: a–zoz–a (ad esempio, in basso, a sinistra, a destra, in alto).
- Sequenziale: 0–10 o 10–0 (ad esempio, dimensioni o stati predefiniti/hover/attivi).
- Gerarchico: dal più al meno o viceversa (ad esempio, livelli di gravità primario, secondario o informazioni/avviso/errore).
Applicare gli stessi criteri di ordinamento a tutte le raccolte impedisce a ogni team di ordinare "a modo proprio". Definisci le tue preferenze e documenta esempi per casi ambigui.
Implementazione: audit e creazione del glossario
Una volta definite le regole, è il momento di metterle in pratica. Hai due percorsi che puoi anche combinare. per garantire l'atterraggio:
Controllo dei contenuti
Rivedi ciò che è già stato costruito: componenti dell'inventario, oggetti, proprietà e valori con i loro nomi attuali. L'obiettivo è raggiungere un consenso su un unico sistema tassonomico con progettazione e sviluppo e pianificare la migrazione senza interrompere i prototipi o i passaggi di consegne.
Creazione del glossario
Che tu stia partendo da zero o che tu abbia già eseguito l'audit, definisci la struttura, la grammatica e l'ordine per ogni tipo di elemento (componente, oggetto, proprietà e valore). Il glossario diventa il tuo “dizionario ufficiale” dei nomi e come risorsa per i nuovi membri.
Figma AI per rinominare contestualmente i livelli
Rinominare manualmente centinaia di livelli è noioso. In questo caso, l'intelligenza artificiale di Figma può farti risparmiare tempo utilizzando contenuto, posizione e relazioni tra livelli per suggerire nomi contestuali. Lo strumento analizza la selezione e applica nomi coerenti laddove rileva il modello predefinito..
Ci sono dei limiti deliberati: Figma AI rinomina solo i frame, i gruppi, i livelli di testo, i rettangoli (e quelli arrotondati) con riempimento immagine e alcune istanze che mantengono comunque il nome predefinito del componente principale (solo il contenitore, senza toccare i sottolivelli). Se un livello ha già un nome, è bloccato o nascosto oppure è una forma vettoriale individuale (ellisse, poligono, stella, mesh) senza immagine, non verrà rinominato..
È possibile iniziare a rinominare in diversi modi: dal menu contestuale con un clic destro, da Azioni nella barra degli strumenti o tramite azioni rapide digitando "Rinomina livelli". Se tutto è già stato nominato correttamente, verrà visualizzato il messaggio "Non è necessario rinominare i livelli", con l'opzione "Rinomina comunque" se si desidera forzare l'operazione..
Un dettaglio utile: se hai livelli identici senza nome in più frame di livello superiore, Figma AI rinominerà quelli corrispondenti. Ciò aiuta a preservare le animazioni intelligenti e le posizioni di scorrimento nei prototipi mantenendo la corrispondenza nominale.
Variabili in Figma: token riutilizzabili per la progettazione e la prototipazione
Le variabili memorizzano valori che è possibile riutilizzare nelle proprietà di progettazione e nelle azioni del prototipo e coesistono con altri strumenti di progettazione come Programmi di progettazione 3D per Mac. Sono il ponte naturale per implementare token di progettazione e costruire una logica interattiva senza duplicare i framework.
Alcuni utilizzi pratici: creare e applicare token (colori, caratteri, spazi), passare da una dimensione del dispositivo all'altra con regolazioni immediate della spaziatura in base alla scala, visualizzare in anteprima i testi in diverse lingue con un cambio di contesto o creare un carrello che calcola i totali degli ordini. Tutto questo senza moltiplicare inutili varianti.
Sono tre i settori principali in cui eccellono: progettazione e sistemi di progettazione, prototipazione avanzata e API. Padroneggiare questi tre aspetti ti consente di collegare design, interazione e automazione. in un flusso costante.
Variabili per la progettazione e i sistemi
Utilizzare variabili e modalità per rappresentare token e contesti alternativi (chiaro/scuro, marchi, regioni). Il colore e il numero sono la base per tavolozze, dimensioni e densità.e puoi associarli a raccolte e modalità per cambiarle a colpo d'occhio.
Le risorse tipiche in quest'area includono tutorial introduttivi, guide alle collezioni e alle modalità e confronti tra variabili e stili per aiutarti a decidere quando utilizzare ciascuno di essi. In sintesi: gli stili servono come preset visivi; le variabili incapsulano valori parametrizzabili con modalità.
Variabili per la prototipazione avanzata
Nei prototipi, le variabili memorizzano stati e proprietà che cambiano attraverso l'interazione. È possibile utilizzare le azioni per modificarne i valori e quindi alterarne l'aspetto, il contenuto o la visibilità senza duplicare i frame.
La combinazione di variabili con espressioni e condizioni apre le porte a stringhe dinamiche, operazioni matematiche e valutazioni booleane. Con più azioni e logica if/else, è possibile accumulare comportamenti complessi nello stesso trigger..
Anche le modalità variabili svolgono un ruolo nei prototipi: impostano i valori in base al contesto (ad esempio, tema) e li utilizzano nelle espressioni per cambiare l'aspetto in tempo reale. Il numero di schermate necessarie per scenari complessi è drasticamente ridotto.
Variabili e API (REST, plugin e widget)
Le variabili sono disponibili sia nell'API del plugin che nell'API REST. È possibile visualizzare, creare, aggiornare ed eliminare variabili, nonché collegarle ai componenti dei plugin.Ciò consente l'utilizzo di strumenti quali importatori/esportatori o convertitori di stili in variabili.
I widget accedono alle variabili tramite l'API dei plugin (lettura e creazione), con l'eccezione che non possono collegare direttamente le proprietà dei widget alle variabili. Per sincronizzarsi con il repository, sono disponibili esempi di azioni GitHub che collegano le variabili Figma alla tua base di codice., oltre ai file sandbox della community per una pratica senza rischi.
Buone pratiche di denominazione per livelli e componenti
Imposta un prefisso per il tipo (ad esempio, Btn, Card, Input) e un suffisso per lo stato (hover, focus, disabled) o la dimensione (sm, md, lg). L'ordine consigliato è solitamente Tipo/Scopo/Dimensione/Condizionee utilizzare separatori uniformi (kebab-case o PascalCase, a seconda di quello che si adatta al tuo stack).
Mantenere la coerenza tra livelli e istanze: il contenitore dell'istanza deve ereditare il modello del componente master. Evitare variazioni locali improvvisate perché interrompono la ricerca e la sostituzione.Quando è il momento di apportare modifiche, fallo nella versione master e pubblica una nuova versione.
Per le proprietà booleane, nominare la proprietà, non il valore: "Icona" con valori On/Off o Vero/Falso; evitare "conIcona/senzaIcona" se il sistema utilizza commutatori booleani. Ciò allinea il linguaggio alla logica del prototipo e del codice..
Se il progetto include più di un dominio (ad esempio, backoffice e cliente), aggiungere un ambito alla raccolta o al nome della cartella. La separazione in base al contesto riduce le collisioni semantiche e promuove il riutilizzo appropriato.
Errori comuni e come evitarli
Uno degli errori più comuni è non documentare la convention e lasciare che ognuno dia un nome alle cose "a modo suo". Senza guida, la biblioteca diventa frammentata e la velocità del team diminuisceFornire esempi chiari e casi limite per fugare ogni dubbio.
Un altro errore: mescolare stili di unione e capitalizzazione all'interno della stessa famiglia di componenti (kebab in alcuni, cammello in altri). Ciò complica i filtri, le query e la lettura del pannello dei livelli.Definisci uno stile predefinito e applica eccezioni limitate e giustificate.
Evita nomi senza senso ("Fotogramma 27 Copia 3", "Rettangolo 12"). Se Figma AI non può aiutarti perché i nomi sono già assegnati, rinominali manualmente o a livello di componente. e cogliere l'occasione per consolidare la convenzione scelta.
Non duplicare le varianti che sono già state risolte da una variabile o da un valore booleano nel componente. La regola d'oro: meno schermate, più parametrizzazioneOtterrai una libreria più leggera e gestibile.
Roadmap di adozione per i team
Inizia in piccolo con un set di componenti ad alto impatto (pulsanti, input, tipografia, palette). Condividi la convention, raccogli feedback e migliorala prima di estenderla ad altri.Da lì, migrare per moduli e versione.
Se vuoi accelerare la tua padronanza di queste pratiche, prendi in considerazione una formazione intensiva e orientata al prodotto. I programmi tenuti da professionisti attivi aiutano a mettere in pratica la teoria nei casi concreti. integrando già Figma nei processi di sviluppo.
La chiave di tutto quanto detto sopra è considerare la nomenclatura come parte integrante del progetto, non come un ripensamento. Grazie a un glossario chiaro, regole grammaticali e strutturali, al supporto dell'intelligenza artificiale di Figma e a variabili ben definite, il tuo sistema acquisisce velocità, coerenza e scalabilità.E il tuo team, tempo di qualità da dedicare ai problemi degli utenti e non alle liti sui nomi.
