Come si possono implementare le icone come Design Token?

Sebbene ricevano meno attenzione quando si parla di design token, i token icona possono essere molto potenti.

Come qualsiasi altro tipo di gettone, i gettoni icona devono essere di livello 1 e livello 2, con il livello 3 facoltativo.

Ci sono almeno 2 vantaggi chiave che vale la pena menzionare quando si tratta di token icona:

1. Più rigoroso pensiero sul ruolo di ogni icona.
2. Set di icone più strutturato, scalabile e gestibile.

Immagina di scegliere queste icone per il prodotto che stiamo attualmente sviluppando.

Come li chiameresti?

Immagino che almeno alcuni di voi sceglierebbero la loro semantica/ruolo/funzione, quindi: Home, Preferiti/Mi piace, Cestino, Modifica e Notifiche.

Anche se questo non è affatto sbagliato, non è il modo simbolico di farlo.

Diamo quindi un'occhiata al primo e al secondo livello dei Design Token:

1. Token di riferimento

Scegli prima le tue armi, i mostri vengono dopo.

Qui è dove stabiliamo le nostre scelte, ad esempio:

• Scelgo questo rosso #ff0044 e lo chiamerò "color.chills".
• Scelgo Comic Sans e lo chiamerò "font.lovely".

• Scelgo questa casa e la chiamerò “icon.100”.

• Scelgo questa casa e la chiamerò “icon.house”.

Come puoi vedere ci sono due “scuole*” per denominare alcuni token di riferimento come colori o icone.

*In realtà non esistono scuole del genere, volevo solo dare un tocco più sofisticato ai due modi che uso spesso per nominare le icone di riferimento.

La scuola “ semantica” :

• Scelgo questa casa e la chiamerò “icon.house”.
• Scelgo questo cuore e lo chiamerò “icon.heart”.
• Scelgo questo cestino e lo chiamerò “icon.trash-can”.
• Scelgo questa matita e la chiamerò “icon.pencil”.
• Scelgo questa campana e la chiamerò “icon.bell”.

• Scelgo questa casa e la chiamerò “icon.100”.
• Scelgo questo cuore e lo chiamerò “icon.120”.
• Scelgo questo cestino e lo chiamerò “icon.155”.
• Scelgo questa matita e la chiamerò “icon.156”.
• Scelgo questa campana e la chiamerò “icon.172”.

Pro e contro

Se " agnostico " è troppo astratto per essere comunicato e memorizzato, " semantico " va contro l'agnosticismo radicale dei token di riferimento (alias token di base, primitivi, token globali).

I token di riferimento sono generalmente denominati "font-weight.100" o "space.400". Denominare colori e icone "color.blue" e "icon.house" non rientrerebbe nella tassonomia, vero?

Mentre "icon.100" mi consente di inserire qualsiasi icona all'interno, "icon.house" è 1000 volte più intuitivo con cui lavorare. Tuttavia, preferisco usare la prima opzione, l'” agnostico ”. Ecco perché:

Voglio che i miei token di riferimento siano scatole vuote. Qualunque cosa io metta dentro non dovrebbe modellare la scatola. Se riempio una di queste caselle con un'icona a forma di cuore oggi, voglio poterla cambiare in una stella domani senza alcun conflitto di nomi.

"Significato" inizierà al secondo livello di token, i "token di sistema".

2. Token di sistema

Qui è dove le cose si fanno più interessanti: le decisioni.

Per decisioni intendo:

• Decido di utilizzare " rt.icon.house " o " rt.icon.100 "(rt = token di riferimento) come icona per Home , quindi " st.icon.home " (st = token di sistema).
• Decido di usare “ rt.icon.heart ” o “ rt.icon.120 ” come icona per Favorite , quindi “ st.icon.favorite ”.
• Decido di utilizzare " rt.icon.trash-can " o " rt.icon.155 " come icona per Elimina , quindi " st.icon.delete ".
• Decido di usare " rt.icon.pencil " o " rt.icon.156 " come icona per Edit , quindi " st.icon.edit ".
• Decido di utilizzare " rt.icon.bell " o " rt.icon.182 " come icona per le notifiche , quindi " st.icon.notifications ".

È probabile che ciò che utilizzerai per informare gli sviluppatori o altri designer saranno i token di sistema, le decisioni: "Ehi John, per favore usa st.icon.close per il modale".

1. Una riflessione più rigorosa sul ruolo di ogni icona.

Ora, tornando ai miei due vantaggi principali, e dopo questo piccolo esercizio, puoi vedere che la scelta e l'assegnazione delle icone ha attraversato un processo straordinariamente preciso e meticoloso.

Non solo sceglierai con cura le icone che desideri includere nel tuo set, ma assegnerai loro anche un'unica funzione semantica, riducendo così la ridondanza e l'incoerenza e portando a scelte e decisioni più efficienti.

2. Set di icone più strutturato, scalabile e gestibile.

Per spiegare questo beneficio ricordiamo alcune situazioni ricorrenti:

Problema 1: non ti piace l'icona della croce e vuoi sostituirla con una più sottile.

Soluzione: apri il token di riferimento e sostituisci/regola la forma interna.

Risultato: tutti i token di sistema che puntano a quel token di riferimento verranno ora aggiornati, vale a dire:

• Elimina (per l'azione di eliminazione di un elemento)
• Rimuovi (per l'azione di rimozione di un elemento)
• Close (per l'azione di chiusura di un elemento).
• Errore (insieme a un messaggio di errore)

Soluzione: crei un nuovo token di riferimento " icon.trash ", quindi aggiorni il token di sistema " icon.delete " per indirizzare il nuovo "icon.trash" . Ciò manterrà intatti Rimuovi, Chiudi ed Errore .

Risultato 1: qualsiasi componente che utilizza " icon.delete " ora mostrerà un cestino.

Come puoi vedere, tutta questa potenziale flessibilità tornerà utile a un certo punto. D'altra parte, il costo del lavoro iniziale non è significativo.

Per ricapitolare...

Puoi modificare un rt.icon e influire su tutti i token di sistema e componenti che hanno come target quell'icona. Ad esempio cambio l'icona di un cuore in una stella.

È possibile modificare una st.icon e influire su tutti i token dei componenti destinati a quell'elemento semantico. EG Il “preferito” è ora rappresentato da una stella mentre il cuore è usato per “mi piace”.

È possibile modificare un ct.icon e influire solo su un componente molto specifico. Ad esempio , il componente della carta, in modalità oscura, utilizzerà una stella piena invece di quella delineata, utilizzata in modalità chiara, per "preferito".

Gettoni Figma

Il plug-in Figma Tokens ha recentemente iniziato a supportare "asset". Con esso, puoi facilmente archiviare il tuo logo, immagini e iconografia in un repository remoto e collegarti ad esso tramite il plug-in. Ciò ti consentirà di aggiungere un'immagine a una forma in Figma con un clic, assicurandoti che una guida allo stile di vita informi la sua posizione di archiviazione.

Tuttavia, secondo il team di Figma Tokens, potrebbe essere troppo presto per utilizzare la funzione poiché ci sono ancora lavori in corso:

“Attualmente la sorgente dell'immagine deve avere la propria convalida CORS (Cross-Origin Resource Sharing). Alcuni siti Web lo hanno già implementato (ad es. Unsplash), ma altrimenti puoi metterlo dietro un proxy CORS. Ulteriori informazioni su CORS sono disponibili qui . Aggiungeremo un proxy CORS in una versione futura." Ecco l'articolo completo.