Semplifica il passaggio dallo schizzo al codice di Visual Studio con Indigo.Design

(Questo è un articolo sponsorizzato.) Se ci pensi, i team software sono molto simili alle squadre sportive. Mentre ogni membro del team lavora per lo stesso obiettivo esatto, il ruolo che svolgono e le azioni che intraprendono sono molto diversi l'uno dall'altro.

Ecco perché è fondamentale avere un modo fluido per spostare la palla da un membro della squadra all'altro.

Sfortunatamente, il passaggio di consegne che avviene all'interno dei team software non è naturalmente così fluido come quello che si vede sul campo sportivo. E uno dei motivi principali di ciò sono i diversi sistemi e approcci utilizzati per creare i prodotti.

I progettisti creano interfacce utente perfette per i pixel in Sketch, solo per doverle tradurle in un linguaggio che gli sviluppatori possono usare quando creano app nell'IDE di Visual Studio Code. Senza un modo semplice per spostare i progetti di prodotto attraverso la pipeline, queste inefficienze portano a costose rielaborazioni e debug dopo che un'app è stata trasferita dal designer allo sviluppatore.

Inutile dire che una soluzione al problema del trasferimento di Sketch-to-IDE è arrivata da molto tempo. Non è che i team software non sappiano collaborare o comunicare bene tra loro. È solo che i loro sistemi e strategie disparati rendono il passaggio da un team all'altro goffo, dispendioso in termini di tempo e pieno di errori.

Oggi esamineremo il motivo per cui ciò accade e come la tua agenzia può risolvere il problema con due plug-in e una piattaforma cloud di prototipazione di Indigo.Design.

Dove va storto l'handoff designer-sviluppatore?

Innanzitutto, quello che dovremmo davvero chiederci è:

Perché il trasferimento designer-sviluppatore è un tale problema?

Nick Babich ha recentemente scritto di come i designer fanno di tutto per creare soluzioni digitali perfettamente misurate e realizzate in modo coerente. Ma i sistemi di progettazione non si traducono in modo fluido in sistemi di sviluppo.

Più il designer fa a un'interfaccia, più deve effettivamente comunicare con uno sviluppatore. Quindi, non è sufficiente consegnare un file di progettazione di Sketch e lasciare che lo sviluppatore funzioni con esso. I designer devono fornire specifiche di progettazione che spieghino come tutti i pezzi in movimento devono essere disposti, distanziati, stilizzati, colorati, coinvolti e così via.

È stato l'unico modo per garantire che un'app alla fine sia perfetta per i pixel. Anche in questo caso, richiede ancora molta implementazione da parte dello sviluppatore una volta che si trova all'interno del proprio IDE.

Come puoi immaginare, l'intero processo richiede molto tempo a un designer. Ma senza le specifiche di progettazione, gli sviluppatori finiscono per dover giocare a un gioco di indovinelli rischioso.

Non solo, gli sviluppatori in genere non hanno l'abitudine di codificare con HTML e CSS, che è un lavoro noioso e rappresenta solo l'interfaccia utente. C'è molto più codice dietro le quinte che fa funzionare un'app Web e non tutti gli sviluppatori sono esperti o interessati a imparare a scrivere il markup dell'interfaccia utente. Quando sono costretti in questa posizione, la curva di apprendimento ripida aggiunge più tempo ai progetti e le rielaborazioni e il debug che ne derivano mandano i costi fuori controllo.

Quindi, davvero, il passaggio di consegne tra designer e sviluppatori è diventato una questione di chi possiamo permetterci di perdere tempo?

“

È il designer che deve rifinire tutto in modo che lo sviluppatore sappia come trasformare il progetto in realtà?

O:

È lo sviluppatore che deve guardare un progetto, misurare manualmente tutto sullo schermo e sperare di ottenere tutte le specifiche giuste semplicemente guardandolo a occhio?

Nessuno vince in nessuno dei due scenari. E mangerai i tuoi margini di profitto nel processo.

Potrebbero esserci alcune agenzie che credono che costringere designer e sviluppatori a lavorare sulla stessa piattaforma sia la soluzione migliore. In questo modo, non è necessario eseguire tutta questa traduzione o interpretazione durante il passaggio da Sketch a Visual Studio Code. Ma ciò spesso si traduce in una creatività soffocata da parte del progettista o in una capacità ostacolata di creare soluzioni software efficaci da parte dello sviluppatore.

Allora, qual è la risposta?

Migliora l'handoff tra designer e sviluppatori con Indigo.Design

Non è che Indigo.Design sia la prima piattaforma a tentare di risolvere i problemi di trasferimento per i team di software. InVision e Zeplin hanno entrambi offerto le proprie soluzioni.

Ognuna di queste piattaforme ha reso le specifiche visive più accessibili per gli sviluppatori, migliorando di conseguenza l'efficienza dei team di designer-sviluppatori. Nello specifico:

• I designer non hanno più bisogno di contrassegnare l'interfaccia utente poiché le piattaforme gestiscono le linee rosse.
• Gli sviluppatori possono estrarre manualmente le specifiche di progettazione senza l'aiuto dei progettisti.

Detto questo, con piattaforme come InVision e Zeplin, gli sviluppatori devono ancora ispezionare ogni elemento e codificarlo manualmente in base alle specifiche estratte. Queste piattaforme inoltre devono ancora creare un ponte senza interruzioni tra Sketch e Visual Studio Code.

Quindi, se designer e sviluppatori vogliono lavorare insieme nel modo più efficiente possibile, Indigo.Design ha sviluppato una risposta al loro problema:

Passaggio 1: progettare in Sketch

C'è davvero solo una cosa in questa fase che deve cambiare per il designer. L'app, le pagine e il flusso continueranno a essere progettati come di consueto all'interno di Sketch, utilizzando i componenti di Indigo.Design UI Kit.

Tuttavia, non è più necessario compilare redline o specifiche per l'app. Indigo.Design si prende cura di te per te.

Per sfruttare questo, il tuo designer deve abbandonare qualsiasi sistema di prototipazione utilizzato in precedenza. Con questo nuovo sistema semplificato e privo di errori, il tuo designer può facilmente inserire i propri progetti nel cloud utilizzando il plug-in Indigo.Design.

È possibile accedervi dal Plugins menu > Indigo.Design > Publish Prototype :

Non è necessario che il progettista esporti i file e li carichi in un altro sistema per la revisione dei clienti o per gli sviluppatori con cui lavorare. Rimarranno esattamente dove sono per pubblicare il prototipo.

Ci vuole solo circa un minuto per completare il processo, anche. Al progettista viene quindi fornito un collegamento al cloud che può condividere con i clienti e altri per rivedere e commentare il prototipo.

Passaggio 2: lavora in Indigo.Design Cloud

Portare gli altri nel cloud è facile. Il collegamento fornito li porterà nel cloud dell'esperienza in cui è possibile rivedere il design:

È anche facile lasciare commenti sopra il design. Tutto ciò che gli utenti devono fare è aprire il pannello Commenti, rilasciare un segnaposto e allegare il proprio commento ad esso:

C'è di più in questo software di collaborazione, però. Il prototipo può anche essere modificato dal cloud.

Per accedervi, il progettista, lo sviluppatore e chiunque altro con accesso di gruppo individuerà il progetto dalla libreria dei prototipi:

Fare clic su "Modifica prototipo" per accedere all'editor Indigo.Design:

Una volta selezionata una schermata, il designer può aggiungere un hotspot per creare una nuova interazione nell'app.

Puoi anche utilizzare l'editor Indigo.Design per controllare le specifiche dell'interfaccia utente dell'app:

Passare il mouse sopra un elemento rivela le specifiche di spaziatura relativa. Cliccando su un elemento si rivelano molti più dettagli:

Lo sviluppatore può anche modificare o copiare il CSS scritto e prodotto in modo pulito anche da questo pannello. (Anche se non dovrebbero, come spiegherò nel passaggio successivo.)

Capisci cosa intendo per risparmiare tempo ai progettisti nella generazione delle specifiche? Semplicemente inserendo questo design nel cloud Indigo.Design, le specifiche vengono generate automaticamente.

Passaggio 3: compila in Visual Studio Code

Ora, supponiamo che il tuo design sia abbastanza buono per essere sviluppato. Lo spostamento di un prototipo Indigo.Design in Visual Studio Code è facile come lo è stato il passaggio da Sketch.

Recupera il collegamento cloud originale fornito dal plug-in Indigo.Design in Sketch. Se non ce l'hai più, va bene. Puoi recuperarlo dalla schermata delle librerie in Indigo.Design:

Tutto ciò che lo sviluppatore deve fare ora è installare l'estensione Indigo.Design Code Generator. Questo è ciò che consente a Visual Studio Code di comunicare direttamente con Indigo.Design per recuperare il prototipo.

Una volta configurata l'estensione, lo sviluppatore eseguirà le seguenti operazioni:

Apri la shell dell'app che è già stata sviluppata. Quindi, avvia il generatore di codice Indigo.Design. Qui è dove inserirai il collegamento cloud:

Questo rivelerà un pop-up con i design delle app che risiedono nel cloud e i singoli componenti che li compongono.

Lo sviluppatore ha la possibilità di generare codice per tutti i componenti dell'app o di andare componente per componente, controllando solo quelli di cui ha bisogno. Ciò è particolarmente utile se un'app è in corso e lo sviluppatore deve solo importare nuovi componenti in VSC.

Facendo clic su "Genera asset di codice", i componenti selezionati verranno aggiunti in Angular come HTML e CSS leggibili e semantici.

Lo sviluppatore ora ha meno di cui preoccuparsi in termini di ricostruzione degli stili o configurazione di altre specifiche. Invece, possono dedicare il loro tempo a creare funzionalità aziendali e perfezionare davvero il prodotto.

Una nota su questo processo

È importante sottolineare che questo flusso di lavoro di Sketch – cloud – Visual Studio Code non funziona solo con la prima iterazione di un progetto. Gli sviluppatori possono creare mentre i designer lavorano attraverso feedback con i clienti o studi di usabilità con gli utenti, qualcosa di cui Indigo.Design ha tenuto conto.

Quindi, supponiamo che il designer abbia spostato l'interfaccia utente di un modulo di accesso tramite Indigo.Design e lo sviluppatore abbia generato il codice per far muovere le cose.

Durante il lavoro sul modulo, lo sviluppatore ha implementato del codice di autenticazione nel file TypeScript.

Nel frattempo, però, il designer ha ricevuto un messaggio dal cliente in cui si informava che era necessario implementare un nuovo Universal Login con Google. Il che significa che l'UX deve cambiare.

Quando l'aggiornamento è pronto e il prototipo sincronizzato con Indigo.Design, il designer invia un messaggio allo sviluppatore per informarlo delle modifiche. Quindi, lo sviluppatore avvia ancora una volta il generatore di codice di Visual Studio. Tuttavia, durante la rigenerazione della schermata di accesso, selezionano "Non sovrascrivere" sul file TypeScript. In questo modo, possono preservare il codice che hanno scritto importando contemporaneamente il nuovo HTML e CSS.

Lo sviluppatore può quindi apportare le modifiche necessarie in base al design aggiornato.

Incartare

Indigo.Design ha creato in modo efficace un trasferimento efficiente e privo di bug per i progettisti che lavorano in Sketch e gli sviluppatori che lavorano in Visual Studio Code.

I progettisti non perdono tempo a progettare in una piattaforma e a creare prototipi in un'altra, a elaborare specifiche di progettazione o a gestire le esportazioni di file. Gli sviluppatori non perdono tempo cercando di ricreare l'intento di progettazione da un file statico.

Come ha affermato Jason Beres, Senior VP of Product Development di Indigo.Design:

Con la generazione del codice Indigo.Design, tutti questi bug vengono evitati al 100%. Non solo lo spirito del design viene mantenuto, ma vengono creati HTML e CSS perfetti per i pixel in modo che lo sviluppatore non si trovi nella sfortunata posizione di dover abbinare manualmente il design.

E risolvendo i nodi tecnici nei flussi di lavoro di designer-sviluppatori e nel trasferimento, la tua agenzia ridurrà notevolmente i costi di rilavorazione e debug. Aumenterai anche i profitti fornendo al tuo team software un modo più efficiente e veloce per ottenere app attraverso il processo e in condizioni perfette per i pixel.