Zeplin Sketch Plugin: il ponte del flusso di lavoro tra design e ingegneria

Zeplin è un potente strumento di collaborazione che colma il divario tra designer e sviluppatori creando uno spazio connesso per i team di prodotto.

Perché Zeplin?

Un pezzo cruciale di qualsiasi puzzle di sviluppo prodotto è il luogo in cui il design incontra lo sviluppo. Quando un progetto è pronto per passare alla fase di sviluppo ("handoff"), gli ingegneri hanno bisogno di un modo per capirlo e tradurlo in codice.

Zeplin facilita il trasferimento prendendo i progetti da Sketch, Adobe XD, Figma e Photoshop ed esportandoli in un formato che può generare facilmente frammenti di codice, guide di stile, specifiche e risorse.

Dì addio ai giorni del "redlining". Zeplin si concentra esclusivamente sul miglioramento della collaborazione tra designer di prodotto e team di sviluppo ed è utilizzato dai principali team di prodotto di Airbnb, Dropbox, Pinterest, Microsoft e molti altri.

Con Zeplin non è necessario scrivere manualmente dimensioni o margini, digitare la copia, esportare icone. È semplicemente fantastico e consente di risparmiare un sacco di tempo per concentrarsi sulle esplorazioni del design. – Alex Potrivaev, Product Designer @Intercom

In uno dei nostri articoli precedenti, il designer di Toptal Micah Bowers ha parlato dell'importanza di disporre di un sistema di linguaggio di progettazione standardizzato per comunicare in modo efficiente tra le varie funzioni dei team di prodotto che lavorano su prodotti digitali.

Con il controllo delle versioni delle risorse di progettazione, la creazione di librerie di componenti e la generazione di guide di stile di vita, un progetto portato in Zeplin può fungere da "unica fonte di verità" per i team di prodotto.

Fondamentalmente consideriamo Zeplin la nostra fonte di verità per la collaborazione con Engineering. Se non è in Zeplin, non è ufficiale. – Jason Stoff, designer senior, prodotti digitali @Starbucks

Limitazioni Zeplin

Sebbene Zeplin abbia molte funzioni utili, non è perfetto. Zeplin offre un piano gratuito, ma con quel piano è limitato a un progetto. Durante la progettazione sia per iOS che per Android, saranno necessari due progetti separati. A quel punto, sarebbe necessario un piano a pagamento.

Una volta compreso il flusso di lavoro con Zeplin e Sketch (o le altre app sopra menzionate), il flusso di lavoro diventa facile. Tuttavia, Zeplin ha una curva di apprendimento che richiede tempo e attenzione. Per vedere una panoramica generale e saperne di più su come usarlo, guarda il video dimostrativo Zeplin di seguito:

Lavorare con Sketch e Zeplin: passaggi e suggerimenti

1. Inizia con Zeplin.

• Crea un account Zeplin se non ne hai già uno. Puoi iscriverti gratuitamente: https://app.zeplin.io/register
• Scarica l'app desktop Zeplin per Mac o Windows.
• Scarica il plug-in Zeplin per Sketch.

2. Prepara il tuo file di schizzo.

• Ora che abbiamo Sketch e Zeplin pronti per l'uso, imposteremo il nostro file Sketch per un'esportazione senza interruzioni in Zeplin.
• In Sketch, organizza le risorse e i livelli utilizzando convenzioni di denominazione coerenti. Se collabori con altri designer, stabilisci le convenzioni che funzionano per tutti i membri del tuo team. A seconda del tipo di progetto (ad esempio, iOS, Android o Web), Zeplin regolerà automaticamente la convenzione di denominazione degli asset, rendendo l'esportazione degli stessi un processo in un'unica fase.
• Crea simboli per elementi e risorse comuni all'interno di Sketch. Ciò ti consentirà di configurare i componenti in Zeplin.
• Salva i colori nella tavolozza "Colori documento" e i caratteri come "Stili di testo" nel file di schizzo. Questi verranno visualizzati nella guida di stile generata da Zeplin.

3. Rendi le risorse esportabili in Sketch.

• Questo è un passo molto importante. Una volta che le tue risorse sono state raggruppate in simboli, apri la pagina Simboli nel tuo file Sketch.
• Fare clic su un gruppo all'interno di un simbolo, ad esempio "ic-menu" (l'icona della cartella)
• Con il gruppo evidenziato, individua l'azione "Rendi esportabile" nella parte in basso a destra del tuo "Impostazioni" in Sketch e fai clic su questa opzione. Un'icona di sezione dovrebbe ora apparire accanto al nome del tuo gruppo.
• Questo passaggio consentirà agli ingegneri di esportare le risorse direttamente da Zeplin.

4. Crea un nuovo progetto in Zeplin.

• Seleziona il tipo di progetto che stai realizzando. Nota che dovresti avere progetti separati per iOS e Android, anche se i design sono identici. Questo perché Zeplin genererà codice diverso in base al tipo di progetto.
• Seleziona la risoluzione del progetto che corrisponde alle tue tavole da disegno Sketch (ad esempio, 1x, 320px).

5. Esporta le tavole da disegno di Sketch su Zeplin.

• Da Sketch, evidenzia tutte le tavole da disegno che desideri esportare in Zeplin.
• Vai su Plugin > Zeplin > Esporta selezionati... o premi ⌃⌘E sulla tastiera.
• Successivamente, esporteremo i simboli da Sketch. Apri la pagina Simboli in Schizzo ed evidenzia tutte le tavole da disegno. Esporta in Zeplin.

6. Organizzare il progetto in Zeplin.

• Ora che le tue tavole da disegno Sketch sono in Zeplin, organizziamo la grafica in sezioni.
• Dalla visualizzazione Dashboard del tuo progetto, seleziona schermate simili da raggruppare in categorie. Una volta evidenziato, fai clic con il pulsante destro del mouse e seleziona "Nuova sezione dalla selezione". Ripeti l'operazione fino a quando il tuo file Zeplin non è organizzato correttamente.

7. Utilizzare i componenti in Zeplin.

Forse una delle funzionalità più utili di Zeplin è la capacità di organizzare le risorse in librerie di componenti. Questo è importante quando i progetti di un progetto vengono sviluppati per più piattaforme da diversi membri del team. L'unificazione del design è essenziale, come sottolinea la designer di Airbnb Karri Saarinen in Building a Visual Language:

Un sistema di progettazione unificato è essenziale per costruire meglio e più velocemente; migliore perché un'esperienza coesa è più facilmente comprensibile dai nostri utenti e più veloce perché ci offre un linguaggio comune con cui lavorare.

• Seleziona la scheda "Styleguide" in alto al centro di Zeplin (accanto a "Dashboard").
• Una volta nella scheda "Styleguide", seleziona la scheda secondaria, "Componenti". Qui vedrai tutti i tuoi simboli esportati da Sketch.
• Organizzali in sezioni come "Icone", "Immagini", "Elementi comuni", ecc. Puoi saperne di più sulla scheda Componenti della guida allo stile del tuo progetto in Zeplin qui.

8. Esporta le guide di stile da Zeplin.

• Dalla vista Dashboard del tuo progetto Zeplin, individua il pulsante "Condividi" nell'angolo in alto a destra dell'applicazione.
• Seleziona "Condividi", quindi trova "Scena" nella parte inferiore del menu. Seleziona "Abilita" e poi "Apri". Questo genererà una guida di stile dinamica per il tuo progetto. Condividi l'URL con il tuo team.

9. Annota i tuoi progetti in Zeplin.

• Aggiungere note ai progetti è facile con Zeplin. Dalla visualizzazione dettagliata di una schermata, seleziona l'icona Aggiungi nota e aggiungi la nota a un componente.
• Puoi aggiungere una nota tenendo premuto Cmd ( Ctrl per utenti Windows e Linux) e facendo clic in un punto qualsiasi dello schermo.
• Puoi anche menzionare altri compagni di squadra con "@" e riceveranno una notifica.

10. Collaborare, condividere e utilizzare il controllo della versione.

• Ora che il tuo file Zeplin è pronto per essere condiviso con il tuo team, invita gli utenti tramite il loro indirizzo e-mail o invia loro l'URL del progetto.
• Continua ad aggiornare il tuo file Zeplin esportando le tavole da disegno da Sketch.
• Zeplin controllerà automaticamente la versione dei tuoi file e potrai continuare a collaborare con i membri del team utilizzando questa dinamica "fonte di verità".

Conclusione

La creazione di un flusso di lavoro dinamico, organizzato e collaborativo tra i team di progettazione e sviluppo è essenziale per creare ottimi prodotti digitali. Avere un ponte del flusso di lavoro come Zeplin consente ai progettisti di annotare le schermate e semplifica la fase di trasferimento, spesso temuta, con specifiche complete e precise.

La flessibilità di aggiornare le risorse in modo dinamico da un'origine centrale, come un simbolo in Sketch esportato in un componente in Zeplin, crea un'enorme flessibilità. Gli ingegneri possono quindi esportare facilmente le risorse in codice nativo, risparmiando tempo e noia.

Mentre un'esperienza utente ponderata e design esteticamente belli sono la radice di un prodotto di successo, il processo per portare quel design nelle mani degli utenti è fondamentale.

I progettisti che desiderano essere efficienti e fare affidamento su un'unica "fonte di verità" dovrebbero prendere in considerazione il flusso di lavoro di Sketch to Zeplin descritto sopra. La potenza alla base della solida relazione software tra questi due strumenti di progettazione aiuterà i progettisti e i team di sviluppo a raggiungere il traguardo con maggiore facilità e soddisfazione.

• • •

Ulteriori letture sul blog di Toptal Design:

• Adobe XD vs. Sketch: quale strumento UX è giusto per te?
• Come creare un framework di progettazione efficace (include un framework per l'interfaccia utente di Sketch gratuito)
• Cose che potresti non sapere sulla tipografia in Sketch
• Familiarizzare con lo sviluppo di plug-in di Sketch
• Creazione di illustrazioni strabilianti con Sketch e Looper in pochissimo tempo