Adobe XD e Visual Studio Code: creare un design system ready-to-code! — Vol 1
Come collegare il mondo dei designer e quello degli sviluppatori
Introduzione
Quanti di voi hanno sentito la necessità, durante lo sviluppo di un progetto, di avere qualche strumento magico per migliorare il flusso di lavoro tra ui designer e sviluppatore?
Probabilmente tutti e se qualcuno dice il contrario sta sicuramente mentendo!
Il gap forte -probabilmente per molti- sta nel fatto di non venirsi incontro nella progettazione e/o nell’ideazione del progetto, ma soffermarsi troppo sul puro design, per un designer, e troppo sulla pura programmazione, per un programmatore.
Al di là di tutti i tool magici, è senza dubbio importante venire a compromessi su entrambi i fronti, perchè il compromesso non è sinonimo di “rinuncia” ma opportunità per creare qualcosa di migliore su più fronti e di pensare fuori dagli schemi del proprio ambito di competenza.
Una potente convenzione collaborativa è il design system:
“Un Design System è un insieme di modelli interconnessi e pratiche condivise organizzate in modo coerente per aiutare nella progettazione di prodotti digitali e nello sviluppo di prodotti come app o siti web.”
Interconnessione e condivisione sono le ragioni per sviluppare quindi un design system.
I vantaggi:
- Build più veloci;
- Qualità del prodotto e dell’esperienza migliori;
- Scalabilità;
- Centralizzazione.
Starter Kit
Per creare quindi il nostro design system utilizzeremo:
- Forbici dalla punta arr… Ah no, non è un Art Attack!
- Adobe XD (per UI Designer): applicazione per la prototipazione di interfacce utente, di casa Adobe;
- Visual Studio Code (per Developer): editor di codice;
- Adobe XD — Visual Studio: plugin da installare su Visual Studio Code e che farà da ponte tra design e sviluppo.
Design view
Creare un prototipo
Per creare quindi un nostro design system in Adobe XD, dobbiamo definire quindi:
- Una palette colori;
- Gli stili della tipografia;
- I componenti.
Per definire la palette colori ho utilizzato il tool del design system di Google, Material Design, che trovate nella documentazione relativa. Metto qui il link della palette utilizzata:
Mentre per definire gli stili della tipografia, sono partita da uno dei Google Fonts più noti: Roboto. Qui il link ai Google Fonts:
Per quanto riguarda i componenti, ho creato un progetto con una sola tavola formato mobile con un prototipo semplice, con pochi componenti, in modo da avere più cognizione sulle cose che andremo ad importare in Visual Studio Code.
Una volta creata la palette (io l’ho rinominata con una nomenclatura leggibile poi per il programmatore), aggiunti gli stili di carattere e creati i componenti possiamo quindi pubblicare una libreria nella nostra Adobe Creative Cloud (CC)!
A cosa serve?
Ora vedremo!
Creare una libreria CC
In alto a sinistra, rimanendo nelle librerie in fase di Progettazione, c’è un’icona che sta per “Pubblica come libreria”.
Qui si aprirà una pagina di gestione delle librerie. Per pubblicare le risorse del nostro documento come una libreria, basta cliccare il tasto “Pubblica”.
Una volta pubblicata, le azioni possibili su quella libreria cambieranno e quindi troveremo “Condividi” e “Aggiorna”: è fondamentale condividere la libreria con gli sviluppatori che dovranno fruire del nostro design system e aggiornare la libreria in caso di modifiche o aggiunte delle risorse da mostrare.
Condividere il link della libreria
Pubblicata la libreria, abbiamo quindi bisogno del link relativo.
Perchè?
Perchè l’importazione in Visual Studio Code avviene grazie a quel link!
Dove lo trovo?
Basta andare nell’app desktop della Creative Cloud (o accedendo da web al proprio account Adobe), cliccare il tab “Il tuo lavoro” e da qui è possibile visualizzare tutte le librerie pubblicate e i documenti in cloud.
Nota: se non l’avete fatto prima, anche da qui è possibile condividere la libreria con il tasto in alto a destra di fianco al menù.
Qui, quindi, possiamo recuperare il nostro link per farlo inserire in Visual Studio Code dal nostro collega sviluppatore: sul menù in alto a destra possiamo visualizzare alcune azioni tra cui “Ottieni collegamento…”
Si aprirà una finestra, in cui configurare alcune impostazioni relative al link e, ovviamente, poterlo copiare! Il link avrà questa struttura, ovvero “shared-assets-adobe.com”.
Conclusione
Qui si ferma la fase che compete tecnicamente al design e inizia quella che compete lo sviluppo. Quindi lascio la parola al mio collega Marco Ferraioli che ci parlerà di come importare, visualizzare e utilizzare il design system creato in Adobe XD con Visual Studio Code!
Curiosità
Adobe XD permette di scaricare degli UI Kit. Tra questi ci sono quelli di Apple iOS, Material Design e Microsoft Windows da cui quindi, volendo fare una prova di utilizzo del plugin di Visual Studio Code, si può anche creare una libreria in cloud!
