Tiscali Design System
Design system scalabile in Figma con token, variabili e governance.
categoria
Design System
strumenti
Figma
anno
2025-2026
l'infrastruttura prima dell'estetica
Ho progettato e costruito 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.
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.
cosa copre il sistema
Il portale non è ancora online al momento della pubblicazione di questo caso studio. Il Design System però non è rimasto nel file: con questa libreria sono state costruite varie pagine come la home page e le sezioni/pagine interne, l'intera base di MyTiscali e il flusso di attivazione SIM, e ci lavorava dentro un team di quattro persone.
La libreria ha superato i 120 componenti, più le icone su cinque varianti.
Ogni modifica veniva annotata nella documentazione con i cambiamenti principali. Un registro semplice, perché il sistema era in costruzione, ma tenuto fin dall'inizio.
Non ho una misura di quanto abbia fatto risparmiare, perché il rilascio non è arrivato mentre ero lì. Quello che posso dire è cosa copre.
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 era già completa: 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.
