La schermata di benvenuto della webapp di Zeplin
La scorsa settimana ci siamo concentrati sulle figure in gioco nello sviluppo di un progetto - designer, developer e project manager - e su come tool come Sketch e Zeplin possono migliorare e velocizzare lo sviluppo di un prodotto digital (trovate l'articolo a questo link). Oggi entriamo nel vivo parlandovi di Zeplin.
Cos’è Zeplin?
Zeplin è proprio questo, uno
strumento di collaborazione per designer e sviluppatori front-end che andiamo a vedere nel dettaglio.
Primi passi e features principali
Appena effettuato l’accesso al sito di Zeplin si è subito accolti da una grafica cartoon style molto stimolante e piacevole. Un breve video introduce le funzionalità di base necessarie per iniziare, sia per developer che per designer.
Per poter utilizzare Zeplin i designer devono scaricare un software (disponibile sia per Windows che per Mac) che installerà un client per creare e gestire i progetti e un plugin nei rispettivi software di editing (Sketch o Photoshop). Una volta avviato il tool, il plugin si installa automaticamente, quindi caricare i disegni sarà poi solo a un paio di click di distanza. In Photoshop e Sketch,
è possibile esportare un intero disegno o singoli oggetti (selezionando l’artboard che si vuole esportare e premendo Cmd + E).
Una volta esportate, le tavole potranno essere visualizzate nella dashboard del progetto e sarà possibile ispezionarle singolarmente. Se le tavole sono state create nell’ottica della generazione di una style guide (con creazione di colori personalizzati e selezione di font) o comunque per il passaggio di consegne allo sviluppo, e il designer ha proceduto a rendere esportabili gli elementi assets, la creazione della styleguide sarà per lo più automatica. Zeplin riconosce automaticamente gli stili provenienti da Sketch e li importa nella styleguide del progetto. In caso non ci fossero delle voci di definizione per alcuni elementi è sempre possibile crearli dal livello di navigazione interno del tool e integrarli alla guida di stile che si sta creando.
Una volta che i design sono stati caricati, il proprietario del progetto può invitare dei collaboratori, tramite mail o link. Nell’ottica invece di voler ricevere feedback sulla propria styleguide o sui
design è possibile utilizzare il comando di
Share nella sezione “Scene”. Una finestra di dialogo mostrerà una breve spiegazione della funzionalità e fornirà anche un esempio di cosa verrà prodotto.
Interfaccia utente
Solitamente le app di produttività sono molto scarne e prive di personalità. Zeplin si distingue invece per la sua
interfaccia pulita e semplice, cercando di rendere un processo noioso come quello del coordinamento dei feedback come qualcosa di coinvolgente e interessante.
Ogni volta che i design vengono caricati sono trasformati in specifiche e linee guida, per la piattaforma scelta in fase di creazione progetto.
Non è possibile operare con il design per modificarlo,
Zeplin è perlopiù un’app di visualizzazione e ispezione, che dà la possibilità di esportare gli assets e integra caratteristiche di collaborazione per team di lavoro.
I developers possono selezionare un layer e reperire tutte le informazioni di cui hanno bisogno come dimensioni, font, colori e molto altro. Le misure vengono mostrate sempre tenendo conto della piattaforma di destinazione. Per poterli esportare, gli asset devono essere resi esportabili in fase di design in Sketch; fatto questo, Zeplin ci permetterà comodamente di esportarli in tutte le dimensioni necessarie e anche tutti insieme anziché singolarmente.
I colori e i font utilizzati nel progetto vengono mostrati nella tab “
Styleguide”, è possibile rinominarli ed esportarli, semplificando lo sviluppo.
Gli sviluppatori possono vedere, copiare o scaricare il CSS per i progetti Web, le risorse XML per i progetti Android e le estensioni UIFont e UILabel per iOS, sia per le variabili cromatiche che per gli stili di testo, sempre comodamente nella sezione "
Styleguide".
Parola d’ordine Collaborazione (e nessun costo di licenza a carico degli sviluppatori)
Essendo disponibile come app standalone così come webapp
è possibile accedere a Zeplin praticamente da ovunque. Ogni screen in Zeplin ha un link univoco reperibile nel panel di destra e di conseguenza qualsiasi componente del team può visualizzare il progetto attraverso la web app, il che elimina una qualsiasi limitazione per gli utenti Linux. Non stiamo quindi dicendo agli sviluppatori di scaricarsi il programma e pagarne la licenza ma ci possono tranquillamente lavorare da web.
In ultimo, il
tool di annotazioni e commenti permette di commentare specifiche parti del dell’artboard in questione ed utilizzare il risultato di tali discussioni come una componente importante della roadmap di evoluzione del progetto. In questo modo è più facile chiarire le parti più complicate rendendo disponibile a tutti le note lasciate dagli altri componenti del team.
Quindi, come può migliorare il workflow?
Per concludere abbiamo riassunto tutti i benefit che comporta l’inserimento di Zeplin nel workflow di sviluppo.
Per i designer:
- Generazione automatica di style guide, assets e specifiche
- Supporto per Photoshop e Sketch
- Upload e Sync di nuove versioni del design, ad ogni aggiornamento del documento originale la style guide viene aggiornata di conseguenza
- Generazione degli assets nelle dimensioni richieste dalla piattaforma selezionata
- Tool di discussione coi developers tramite note localizzate
- Integrazione con Slack per notifica istantanea al team di sviluppo sugli aggiornamenti delle risorse e loro disponibilità
Per i developer
- Ispezione semplificata delle specifiche nell’unità di misura necessaria per la piattaforma di destinazione. Nessuna necessità di possedere o conoscere software di progettazione grafica
- Strumenti indispensabili come livelli, righelli, e commenti
- Abbassamento dei task ripetitivi, generazione degli snippet di codice necessario per il naming dei colori
- Esportazione degli assets Android, iOS e Web direttamente da App o WebApp, senza perdersi tra cartelle e sottocartelle
- Diversi livelli di accesso
- Ricezione delle notifiche per gli aggiornamenti delle risorse eliminando la necessità richiesta manuale
Plus: Estensioni
Grazie alle estensioni Zeplin è in grado di esportare e generare codice in vari linguaggi web e nativi in modo da adattarsi ai Workflow più disparati. Inoltre è disponibile la documentazione necessaria per scrivere ulteriori e renderle disponibili alla già vasta schiera di utenti.
Costo di utilizzo
Il prezzo del servizio è basato sul numero di progetti che si utilizzano in contemporanea. Un solo progetto è Free e può essere utilizzato senza limitazioni anche per prendere familiarità con il prodotto. Nessun plan ha invece delle limitazioni sul numero di componenti del team che possono accedervi.
Come utenti Sketch dobbiamo ammettere che l’utilizzo di un tool del genere richiede e obbliga a una precisione molto alta, sia per quanto riguarda l’utilizzo di simboli e produzione degli assets che l’impostazione delle palette di colori e del set di fonts.
Ora disponiamo di strumenti per tradurre facilmente e accuratamente la visione di un'app nelle misure necessarie per codificarla. Questo approccio interattivo alle specifiche consente ai team di dedicare più tempo a ciò che è importante: creare design belli e funzionali e offrire agli utenti la migliore esperienza possibile.