Tiscali Design System

Design system scalabile in Figma con token, variabili e governance.

Computer con nello schermo delle schermate di Figma che visualizzano una serie di token e variabili.
Computer con nello schermo delle schermate di Figma che visualizzano una serie di token e variabili.
Computer con nello schermo delle schermate di Figma che visualizzano una serie di token e variabili.

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à:

  1. Collection "Foundations"
    I primitive token, la *single source of truth* per i valori grezzi e assoluti del brand, come palette colori e spaziature.

  2. 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.

un motore invisibile e scalabile

Il risultato del progetto è un portale dalla veste grafica rinnovata, fresca e d'impatto, progettato per rispondere a complesse esigenze commerciali. Attualmente non è ancora online e per questo non è possibile mostrare il risultato.

Ma il vero valore tecnico risiede in quello che non si vede a occhio nudo: un Design System vivo, rigoroso e documentato. Una solida infrastruttura pronta all'uso, concepita per permettere all'azienda di scalare le proprie interfacce in modo coerente ed efficiente per gli anni a venire, indipendentemente dalle future implementazioni.

lavoriamo insieme

se pensi che il mio approccio possa fare la differenza nella tua azienda, sentiamoci!

lavoriamo insieme

se pensi che il mio approccio possa fare la differenza nella tua azienda, sentiamoci!