UX@INPS

Il nostro team, attraverso l’approccio user-first, pone al centro il concetto di valore per l’utente, e promuove un approccio al Design collaborativo, efficiente e data driven

🚀 Vision

Progettare servizi digitali che migliorano la qualità della vita del cittadino.

🎾 Mission

Fornire al cittadino tutte e solo le informazioni e i servizi di cui ha bisogno per la propria protezione sociale, tramite una presenza digitale semplice, accessibile e costantemente ottimizzata sulla base delle sue esigenze.

💎 Valori

1. PERSONE AL CENTRO
2. COLLABORAZIONE E DIVERSITÀ
3. VALORE DEL RIUTILIZZO
4. VALORE DELLA CONDIVISIONE
5. COERENZA E STANDARDIZZAZIONE
6. MISURAZIONE DELL'IMPATTO PER I CITTADINI
7. MIGLIORAMENTO CONTINUO
8. RICERCA DELLE EVIDENZE OGGETTIVE

Guarda il nostro Manifesto

🔗 https://www.inps.design/0ad3508ea/p/464f43-manifesto

---

Sirio Design System

👋 Ciao sono Sirio. Sono il linguaggio visivo e di interazione dell'Istituto! Progettare per il Cittadino con me da oggi è più semplice.

I miei obiettivi

• 👨‍💼👩🏻‍💼👩🏽‍🔧🧑🏼‍🏫 Semplificare e migliorare l’esperienza degli utenti
• 🚁 Comunicare il brand in modo univoco
• 🎢 Semplificare ed efficientare la realizzazione e l’evoluzione dei prodotti digitali
• 👨‍👨‍👦‍👦 Rafforzare la collaborazione interna e la standardizzazione dei flussi operativi

Segui le mie linee guida e progetta in modo sicuro

🔗 https://www.inps.design/0ad3508ea/p/63364c--ciao-italia

................................................................................................................................................................................

🟡 🟣 🔵 Sirio Design Token

I Design Token sono tutti i valori utili a costruire un sistema di progettazione. Definiti come gettoni poichè rispecchiano in maniera atomica tutti gli attributi estetici che costituiscono i componenti del Design system. Sono espressi in valori e fanno riferimento a: colori, tipografia, spaziature, animazioni e qualsiasi altro attributo di stile definito in fase di design.

Segui le mie linee guida e progetta in modo sicuro

🔗 https://www.inps.design/0ad3508ea/p/324df9--design-token

🟡 Design Token Globali

I token globali costituiscono tutti quei valori che sono “assoluti”, non dipendenti da nessun altro valore e da cui possono essere definiti token figli. Sono i valori primitivi e da questi vengono declinati i token alias. In genere si definiscono globali gli attributi primari come: colore, tipografia e valori delle animazioni.

Obiettivo token globali

• Definiamo i token globali per costituire le radici da cui verranno discenderanno i token alias e i token specifici di componente

Regole Name Convention token-globale

🟡 primary-000 { attributo } - { valore numerico in ordine crescente }

................................................................................................................................................................................

🟣 Design Token Alias

I token alias costituiscono tutti quei token che discendono dai token globali e che hanno una specifica responsabilità. Possono far riferimento ad uno specifico contesto o azione. Sono utili per comunicare lo scopo del token e quindi rendere chiaro il contesto di utilizzo.

Obiettivo Token Alias

• Definiamo i token alias per fornire informazioni relative al contesto di utilizzo di ciascun token, specifichiamo il loro scopo e cerchiamo di renderli “riutilizzabili” in più casi d’uso.

Regole Name Convention token-alias

🟣 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }

................................................................................................................................................................................

🔵 Design Token Specifico di componente

I token specifici del componente costituiscono i token che rappresentano proprietà associate ad un componente. Anche se hanno lo stesso valore di un token alias il loro scopo è differente: ossia raccontare e definire una specifica proprietà di un componente. Spesso sono declinati da un token alias ma non sempre questa regola deve/può essere applicata. Nel nostro caso eviteremo dove possibile di innestare i token oltre il secondo livello di innesto.

Obiettivo Token Specifico di componente

• Definiamo i token specifici di componente con l’obiettivo di fornire un’informazione relativa alle proprietà associate ad un elemento.

Regole Name Convention token-specifico-di-componente

🔵 interactive-accent-default { contesto } - { attributo } - { informazione aggiuntiva }

---

🛠 Strumenti per Developer

1. Scaricare o clonare il repo sul proprio computer

Puoi [scaricare questo pacchetto](🔗 https://github.com/INPS-it/sirio-design-token/tree/main/developer) o clonarlo tramite il terminale. Abbiamo trasformato i nostri token tramite la libreria [Amazon style dictionary](🔗 https://amzn.github.io/style-dictionary/#/).

👩‍🎨 Strumenti per Designer

1. Scaricare e installare il tool Figma (tool per la progettazione)

Puoi [scaricare il tool da qui](🔗 https://www.figma.com/downloads/).

2. Scaricare e installare il plugin Figma Token (plugin utile per la gestione dei Design Token)

Puoi [scaricare il plugin da qui](🔗 https://www.figma.com/community/plugin/843461159747178978)

---

FAQ

🚨 Noto un errore nella name-convention di un token

1. Contatta il team UX@INPS e segnala l'anomalia
2. Confrontati con i Designer per effettuare una verifica dei token che sono hanno loro nella libreria

🙆‍♀️ Credo sia utile creare un token per un scenario specifico

1. Contatta il team UX@INPS e segnala l'anomalia
2. Non procedere in autonomia, fai una richiesta al team e insieme valuteremo l'integrazione del token

😔 Non riesco ad utilizzare il plugin Figma Token

1. Puoi cercare risposte nella guida del plugin https://docs.tokens.studio/getting-started, o in alternativa siamo a tua disposizione. Contattaci!

🚧 Bug, problemi e richieste di funzionalità

Contatta il team UX@INPS e segnala l'anomalia