Adobe XD e Visual Studio Code: creare un design system ready-to-code! — Vol 2
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 in contro nella progettazione e/o dell’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.
- NodeJS: JavaScript RunTime.
- React: una libreria JavaScript per creare interfacce utente.
- Material UI: React UI framework.
Dev view
Nel volume 1, Anna Grazia Longobardi ci ha illustrato come pubblicare una libreria da un prototipo creato in Adobe XD per creare un design system. A questo punto, lato sviluppo, partitemo dal link condiviso per importarlo in Visual Studio Code.
Installare il plugin
Per installare il plugin -che quindi importerà la libreria creata in Adobe XD- oltre al link sopra nello starter kit, c’è un metodo alternativo, ovvero cercarlo direttamente dalla sezione Extensions di Visual Studio Code.
L’intro e la documentazione del plugin spiega come utilizzare il plugin:
I design system sono il collegamento tra progettazione e sviluppo. Per costruire un sistema di successo, su misura e ampiamente adottato, sia i progettisti che gli sviluppatori devono sedersi al tavolo. La nuova estensione Adobe XD per Visual Studio Code consente agli sviluppatori di mappare visivamente le sorgenti di progettazione, create in XD e disponibili in Creative Cloud Libraries, al codice specifico della piattaforma utilizzando i token di progettazione. I team di DesignOps saranno in grado di creare design system package (DSP) condivisibili che contengono tutte le informazioni che gli sviluppatori devono utilizzare durante la codifica, inclusi frammenti di codice e documentazione.
Cosa sono i design system package (DSP)?
I DSP sono cartelle che contengono sottocartelle in cui trovare assets e file che contengono il design system.
Per approfondire, qui il link alla documentazione GitHub:
Quindi basta il link della libreria CC o devo avere un DSP per importare il mio design system?
Entrambi sono metodi validi: se hai già un DSP puoi caricarlo direttamente (lo vedremo successivamente) senza bisogno del link; se invece hai un link ad una libreria della CC di Adobe condivisa dal tuo collega designer, puoi utilizzare il link che a sua volta verrà “convertito” nella struttura di un DSP.
Una volta installato il plugin siamo pronti per utilizzarlo.
In basso a destra, nell‘interfaccia di VSC, c’è un’icona con scritto “XD”: questa aprirà il pannello del plugin pronto ad essere utilizzato.
Creare o caricare un DSP (Design System Package)
Dal pannello aperto è quindi possibile:
- caricare un DSP;
- creare un DSP (che richiederà il link alla libreria CC).
Nota: è possibile scaricare dei DSP sul sito del plugin tramite il collegamento “Publicly available packages”. Qui il link diretto:
Cliccando su “Load package” si atterrerà qui, dove selezionare una cartella:
Mentre cliccando su “Create package” si atterrerà qui:
Da qui dobbiamo dare un nome al package e selezionare una destinazione.
Cliccando su “Next”, dovremmo scegliere i linguaggi che vorremmo utilizzare di modo che l’estensione generi un codice specifico per quel linguaggio.
Arrivati qui dovremmo autenticarci con il nostro Adobe ID.
Anche se sono uno sviluppatore devo crearmi un Adobe ID?
Se si vuole collaborare al meglio, rimanendo aggiornati anche sulle librerie condivise, la risposta è sì.
Nota: creare un Adobe ID non costa nulla, non è quindi obbligatorio sottoscrivere un abbonamento Adobe!
Una volta autorizzato VSC ad accedere al nostro Adobe ID, possiamo inserire il link “shared-assets-adobe.com” condiviso.
Dal prototipo al codice
Una volta creato o caricato un DSP package, atterriamo sulla schermata introduttiva e di navigazione della nostra libreria importata da Adobe XD.
Troviamo quindi sulla sinistra:
- Introduction: è la pagina introduttiva del plugin;
- Principles: è una pagina che può essere editata per creare una documentazione sul nostro design system (utilizzando il linguaggio markdown);
- Design Tokens: i token sono i riferimenti di colore e grandezza da utilizzare sui componenti e sulla tipografia (che vediamo in seguito);
- Components: sono i componenti che andranno quindi a comporre la nostra interfaccia.
Prima di iniziare a sviluppare, dobbiamo configurare i nostri DSP Settings (voce in basso a sinistra).
In questa sezione possiamo configurare:
- il nome dei DSP;
- la versione;
- il nome dell’autore;
- i linguaggi utilizzati per sviluppare l’interfaccia;
- il prefix (prefisso) per gli snippet di codice (che vedremo dopo).
Editiamo i componenti
Per poter editare la nostra libreria, dobbiamo attivare la modalità Editing, cliccando sul tasto Start Editing subito sotto DSP Settings.
Vediamo come è composto un componente:
- Anteprima: rappresenta la preview o la visualizzazione del componente così come disegnato in Adobe XD;
- Tokens: rappresenta i riferimenti di colore e grandezze caricati in libreria da utilizzare sul componente;
- Documentazione: è una sezione in cui approfondire le informazioni relative a quel componente;
- Code Snippet: è la sezione in cui inserire il trigger e il codice relativi al componente.
Il Code Snippet merita qualche approfondimento. Questa sezione definisce, in base al linguaggio scelto, come verrà implementato il componente una volta richiamato dal trigger.
Di seguito l’esempio sul weBeetle_playlist_back creato:
Per il linguaggio JavaScript React abbiamo creato il seguente pezzo di codice:
<IconButton size='small' style={{ background: 'primary' }}>
<SkipPrevious />
</IconButton>Allo stesso componente possono essere aggiunti Code Snippet di altri linguaggi, anche contemporaneamente, selezionando quindi sulla select e scegliendo, ad esempio, CSS.
Nota: Attenzione! Ricordate sempre, una volta terminate le aggiunte o modifiche, di cliccare sulla spunta (v) di fianco al pezzo modificato e cliccare poi su Finish Editing in basso a sinistra per non perdere tutte le azione fatte!
Da qui abbiamo creato i nostri componenti.
Utilizziamo i token
Con il linguaggio scelto (JavaScript React), abbiamo creato il nostro theme.js con i token di colore presenti nella libreria Adobe XD condivisa: secondo le convenzioni del Material Design, abbiamo creato primary e secondary con i relativi main, light e dark e relativo colore della tipografia (contrastText). Il font Roboto non è stato necessario richiamarlo da token perchè è il font di Default della libreria Material UI.
Utilizzare i componenti
Definiti i token, definiti i componenti, andiamo adesso a costruire la nostra interfaccia. Importante qui l’utilizzo dei trigger per “richiamare” i pezzi di codice (Code Snippet) dei nostri componenti.
Abbiamo scritto il layout della nostra pagina, seguendo il mockup condiviso dal designer e “triggerato” i componenti della libreria grazie al plugin di Adobe XD.
Dal mio punto di vista di programmatore, è stato interessante testare e utilizzare il plugin ma ancora di più capire come sia importante una convenzione, un linguaggio comune e un punto di incontro tra me e Anna Grazia Longobardi, l’UI Designer. Allo stesso modo, ci siamo trovati entrambi di fronte a bivi e abbiamo optato per compromessi che ci porteranno ad riutilizzare questo utilissimo plugin con più esperienza e maturità e, ovviamente, meno incomprensioni!
