Tiscali Design System
Design system scalabile in Figma con token, variabili e governance.
categoria
UX/UI
strumenti
Figma
anno
2025-2026
l'infrastruttura prima dell'estetica
Ho progettato e sviluppato da zero l'intero Design System per il nuovo portale Tiscali, basandolo su un'architettura rigorosa di Figma Variables. Non mi sono limitato a disegnare le interfacce per il rebranding post-fusione con Linkem, ma ho costruito il motore invisibile che le governa: una libreria logica, scalabile e concepita per allineare il design al linguaggio degli sviluppatori (Dev Handoff frictionless).
ripartire senza ripetere gli errori
Dopo la fusione aziendale e il conseguente rebranding, l'esigenza non era "rinfrescare" un portale storico e frammentato, ma ripartire da zero con una base solida.
La vera sfida non era estetica, ma strutturale. Costruire un nuovo sito di vendita portava con sé il rischio concreto di ricreare un'infrastruttura visiva debole, dove ogni nuova pagina avrebbe richiesto uno sviluppo isolato, generando nel tempo debito tecnico e incoerenze.
due livelli per dominare la complessità
Per gestire un progetto di questa scala, ho adottato un approccio ingegneristico al design, implementando le Figma Variables su due livelli distinti di astrazione per garantire la massima manutenibilità:
Collection "Foundations"
I primitive token, la *single source of truth* per i valori grezzi e assoluti del brand, come palette colori e spaziature.Collection "Tokens"
I semantic token ovvero gli alias funzionali (es. background-primary, border-secondary, content-brand) assegnando un contesto d'uso specifico ai valori grezzi.
atomic design e propagazione istantanea
Una volta stabilite queste solide fondamenta, ho costruito la libreria di componenti (dai bottoni alle complesse card delle offerte) seguendo la logica dell'Atomic Design.
La regola d'oro del sistema è una sola: ogni componente eredita le sue proprietà esclusivamente dai token semantici. Questo disaccoppiamento permette di modificare radicalmente l'aspetto dell'interfaccia globale semplicemente aggiornando i riferimenti dei token, senza dover mai modificare manualmente centinaia di componenti sparsi.
quello che si misura, migliora
Il portale non è ancora online al momento della pubblicazione di questo caso studio. Ma il Design System è operativo, adottato e misurabile.
I tempi di realizzazione di nuovi template sono scesi del 20/30% rispetto al workflow precedente.
Il team di sviluppo ha ridotto progressivamente il numero di richieste di chiarimento in fase di handoff, perché la documentazione risponde già alle domande più comuni e l'handoff tramite Figma risulta chiaro e fruibile.
Il numero di componenti in libreria ha superato i 120 elementi, tutti tracciati e versionati.
Il valore reale non è il risparmio di ore. È che adesso l'azienda può scalare le proprie interfacce senza ricominciare da zero ogni volta.
un sistema vivo ha bisogno di regole condivise
Costruire il Design System era la parte interessante. Mantenerlo coerente nel tempo, con un team di quattro persone che ci lavorava dentro, era la parte difficile.
Le modifiche e le aggiunte venivano discusse in meeting dedicati con il team di design prima di entrare in libreria. Nessun componente nuovo senza un confronto reale: serviva per evitare duplicazioni, allineare le aspettative e mantenere la logica del sistema coerente nel tempo.
Il dialogo con il team di sviluppo avveniva direttamente su Figma, tramite commenti sul file, e in sessioni di confronto di persona. La documentazione strutturata era già pienamente strutturata: versionamento, note di rilascio, linee guida per l'adozione, ma non è stata rilasciata formalmente prima della mia uscita dall'azienda.
È il capitolo che non ho fatto in tempo a chiudere ma che penso fosse determinante al fine dell'adozione dell'intero Design System.
vedi anche
