tiscali design system
architettare e implementare un design system centralizzato in figma basato sui token.
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.
predisporre un dev handoff frictionless
Uno degli obiettivi principali dell'intero ecosistema era trasformare radicalmente il processo di handoff.
Ho strutturato il sistema in modo che parlasse nativamente la stessa lingua degli sviluppatori: la gerarchia dei token in Figma è stata progettata per specchiare esattamente le variabili CSS/Sass nel codice. L'intento architettonico era eliminare le ambiguità e predisporre un terreno di lavoro dove il QA visivo e le incomprensioni tra design e front-end potessero essere abbattute drasticamente.
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.
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.
