Sistema di design Figma per un servizio web: token e componenti

La nostra interfaccia è stata assemblata nel corso di tre anni da persone diverse, e puoi vedere ogni passaggio in essa. Il pulsante nella pagina di fatturazione è due pixel più alto del pulsante nelle impostazioni, i padding sono scelti a occhio, e ho contato sei grigi nei mockup che nessuno riesce a distinguere o spiegare. Ogni nuova schermata inizia con un argomento su come deve apparire un pulsante primario e finisce con un altro campo di input leggermente diverso.

Voglio chiudere questa questione una volta per tutte. Sto ordinando un sistema di design in Figma che diventi l'unica fonte di verità per il prodotto: token di colore e dimensione, una scala tipografica, una griglia e una libreria di componenti in cui ogni elemento porta tutti i suoi stati — predefinito, hover, premuto, disabilitato, errore e caricamento. I moduli e le tabelle meritano la massima attenzione, perché è lì che i nostri utenti lavorano effettivamente e dove l'incoerenza fa più male oggi.

I temi chiari e scuri devono essere costruiti dagli stessi token, quindi cambiare tema è uno scambio di valori e non un secondo set di schermate. Ogni componente ha bisogno di una breve pagina di documentazione: quando usarlo, quando non usarlo, quali varianti esistono, come si comporta su uno schermo stretto. Il test di accettazione è semplice: un sviluppatore apre la libreria e assembla una schermata senza farmi una sola domanda.

Cosa mi aspetto nel lavoro:
— token per colore, spaziatura, raggio e tipografia, temi chiari e scuri da un set condiviso;
— una libreria di componenti con tutti e sei gli stati su ogni elemento interattivo;
— moduli e tabelle in dettaglio: campi, validazione, ordinamento, paginazione, stati vuoti;
— regole di spaziatura e una griglia che permettano di assemblare una schermata senza improvvisazione;
— una pagina di documentazione per ogni componente, scritta per sviluppatori, non per un portfolio;
— modelli di schermate tipiche: elenco, scheda record, impostazioni, modulo a passi, stati vuoti e di errore;
— il contrasto di testo ed elementi dell'interfaccia è controllato rispetto a norme di accessibilità comunemente accettate, non a occhio;
— i font sono scelti con una licenza che copre l'uso web;
— la libreria viene consegnata con diritti sul file e non è legata all'account del contraente.

Due settimane è il termine su cui conto, e sono felice di suddividere il lavoro in fasi con una revisione dopo ciascuna.