Share
Diamo un'occhiata a Sympli; una piattaforma di collaborazione per designer e sviluppatori. Funziona con Xcode, Android Studio, Sketch e Photoshop: in questo tutorial copriremo la prospettiva del designer, quindi in un post successivo vedremo come Sympli funziona dal punto di vista di uno sviluppatore.
Quando si ha un team che lavora sull'interfaccia utente di un'applicazione, (sia per un progetto Android, iOS o HTML5), la fase di transizione dalla progettazione al codice diventa spesso rocciosa, inefficiente e talvolta un po 'dolorosa.
Una volta che il design di Photoshop o Sketch è terminato, di solito viene inoltrato, così com'è, al team di sviluppo. Da lì viene lasciato il team di sviluppo per estrarre risorse immagine, misurare le dimensioni e calcolare manualmente i colori, le impostazioni dei caratteri e il contenuto del testo che deve essere tradotto in codice. Se vengono apportate modifiche ai file di progettazione originali, il trasferimento di documenti aggiornati tramite Dropbox (o e-mail) è lento, goffo e difficile da tenere traccia di.
Tutti questi passaggi aggiungono tempo significativo al processo di sviluppo e, in aggiunta, richiedono ai programmatori di accedere e apprendere applicazioni di progettazione di cui altrimenti non avrebbero bisogno. Ciò significa denaro extra speso per licenze software e per il tempo dedicato alla gestione manuale delle attività che rientrano nella "terra di nessuno" tra progettazione e codifica.
È qui che Sympli interviene per proporre una soluzione. Piuttosto che gli sviluppatori gestiscono manualmente questi passaggi intermedi, Sympli mira ad automatizzare l'intero processo di transizione. Una volta che un designer ha completato la propria interfaccia utente, la esportano in Sympli, che quindi gestisce automaticamente la preparazione degli asset, la misurazione della dimensione del layout, la generazione della tavolozza dei colori, l'estrazione delle impostazioni dei caratteri e altro.
Gli sviluppatori possono quindi dimenticarsi che Photoshop o Sketch esistano, e invece visualizzare i disegni tramite Sympli, dove tutto ciò di cui hanno bisogno per entrare direttamente nel business della codifica è disponibile per loro.
I progettisti devono solo installare il plug-in Sympli per Photoshop o Sketch, entrambi disponibili come download gratuiti:
https://sympli.io/downloads/webI coder hanno la possibilità di utilizzare il plug-in per Android Studio, il plug-in per Xcode o l'app Web di Sympli per progetti basati su HTML5 e CSS. Questi tre sono tutti liberi di essere utilizzati per un singolo progetto, quindi se ti piacerebbe seguirlo mentre camminiamo attraverso questo tutorial testa a sympli.io e prenditi un account.
Questo articolo è il primo di una serie in due parti. Inizieremo osservando il lato di progettazione dell'equazione, coprendo il modo migliore per impostare i documenti di progettazione ed esportarli in Sympli. Continueremo a concentrarci sulla codifica web oriented, osservando come funziona l'app web Sympli. Nel tutorial successivo a questo, utilizzeremo Sympli con Android Studio e Xcode.
Iniziamo dall'inizio: installare il plug-in Sympli nel tuo software di progettazione preferito.
La prima cosa che devi fare è andare alla pagina dei download, quindi prendere e installare il plug-in Sympli per la tua app di design preferita; o Sketch o Photoshop.
Dopo l'installazione, in Sketch è possibile accedere al plug-in sotto Plugin> Sympli> Esporta in Sympli. In Photoshop lo troverai sotto Finestra> Estensioni> Sympli.
Tieni presente che quando esegui il plug-in la prima volta devi eseguire l'accesso per abilitare la comunicazione con il tuo account Sympli.
I "progetti" sono il nucleo del lavoro con Sympli. Ogni progetto può contenere un numero di "Disegni" o schermate e puoi avere più file PSD o Schizzo di origine che si alimentano in un singolo progetto, se lo desideri.
È possibile creare progetti per Web, iOS o Android con risoluzioni 1 ×, 2 × e 3 × supportate per ciascuna. Come accennato in precedenza, in questo tutorial ci concentreremo sul web, e presto ci sarà un altro tutorial per concentrarsi sui progetti iOS e Android.
È possibile creare un nuovo progetto online tramite l'interfaccia "Progetti" di Sympli:
In alternativa, puoi farlo dal progetti scheda nel plugin di Photoshop:
O nel plugin Sketch, facendo clic Crea un nuovo progetto quindi scegli le tue opzioni preferite:
Sia che tu stia lavorando con Sketch o Photoshop, il modo migliore per preparare i progetti per la sincronizzazione con Sympli è attraverso l'uso di tavole da disegno. Ogni mockup UI distinto dovrebbe essere nella sua tavola da disegno, ad esempio:
Il motivo è che dopo aver esportato in Sympli, (che tratteremo in seguito), ciascuna tavola da disegno verrà prelevata ed elaborata separatamente. Sarai quindi in grado di accedervi individualmente per acquisire le loro risorse e le informazioni relative al codice. Ogni tavola da disegno sarà visibile come un "Design" nell'interfaccia web Sympli, in questo modo:
Sympli è progettato per essere a conoscenza dei requisiti di ridimensionamento per la risoluzione 1 ×, 2 × e 3 ×. Farà cose come dividere le dimensioni del layout di due o tre, se del caso, quindi è importante sapere in anticipo quale fattore di scala è necessario in modo da ottenere i risultati giusti.
Ad esempio, se stai progettando un'interfaccia utente a risoluzione 2 × per l'iPhone 6, che ha una dimensione di visualizzazione di 375 px per 667 px, devi assicurarti che le tue tavole da disegno abbiano una dimensione doppia di 750 px per 1134 pixel..
Quando esporti un progetto web 2 × in Sympli, dimezzerà tutte le dimensioni del tuo layout, incluso quelle generate nel codice CSS generato, (parleremo più a proposito dei CSS in seguito). Le tavole da disegno 750px per 1134px saranno riconosciute come 375px per 667px disegni Sympli con risoluzione 2 ×, come mostrato nell'angolo in basso a sinistra dello screenshot qui sotto.
Sympli estrarrà automaticamente le risorse per te a tutte le risoluzioni richieste, ma dovrai prima comunicarle quali parti del design devono essere convertite in immagini. Il processo per eseguire questa operazione è leggermente diverso tra Sketch e Photoshop.
In Schizzo, selezionare il livello o il gruppo per l'elemento che si desidera esportare come immagine, quindi fare clic su Esportabile + pulsante nella parte inferiore della colonna di destra.
La prima volta che fai clic sul pulsante, verrà preparata un'immagine di risoluzione 1 × per l'esportazione, quindi dovrai fare clic più volte per risoluzioni extra come 2 ×, come mostrato di seguito.
Se stai lavorando con Photoshop, seleziona il livello o il gruppo dell'oggetto, quindi nel pannello del plugin Sympli Utilità delle risorse Fare clic sulla scheda Contrassegna come bene. Aggiungerà il prefisso "AST:" al livello, quindi contrassegnandolo come una risorsa. Puoi anche rinominare manualmente i livelli per aggiungere questo prefisso, se preferisci.
Quando la tua progettazione dell'interfaccia utente è pronta, seleziona le tavole da disegno che desideri esportare. Se non hai già una configurazione di progetto, puoi farlo ora tramite il plugin Sympli per il tuo software di progettazione. Come parte di questo processo ti verrà data la possibilità di sincronizzare / esportare il tuo progetto subito.
Se hai già una configurazione di progetto, assicurati di identificare quella corretta nel plug-in Photoshop / Sketch, quindi premi la corrispondente Sync o Sincronizza ora pulsante.
Sympli passerà un momento ad esportare immagini e caricare i tuoi progetti. Una volta che il tuo progetto è stato esportato, puoi visualizzarlo dalla pagina "Progetti" di Sympli. Da qui è possibile selezionare qualsiasi disegno / tavola da disegno e passare attraverso l'app Web per un'ispezione più ravvicinata.
Una volta che il progetto è stato esportato, è pronto per essere consegnato al team di sviluppo. I collaboratori possono accedere al progetto tramite un collegamento che può essere copiato e inviato tramite e-mail direttamente dall'app web Sympli o dal plug-in in Sketch o Photoshop.
Durante il processo di esportazione Sympli avrà preparato e caricato tutte le risorse definite nel documento di progettazione sorgente. Queste risorse possono essere scaricate tutte contemporaneamente tramite Scarica tutto pulsante nell'app Sympli o singolarmente premendo l'icona della freccia rivolta verso il basso grigia a destra dell'elemento.
Ogni risorsa può essere scaricata come file bitmap (PNG) o vettoriale (SVG).
Se scaricati come bitmap, le immagini verranno scaricate in ciascuna delle risoluzioni specificate durante l'impostazione del progetto, ad es. 1 ×, 2 ×, 3 ×.
Una volta esportato in Sympli puoi anche usare "mappatura" per rinominare le risorse al volo. Il sistema di "mappatura" ricorderà il vecchio nome della risorsa e lo assocerà a quello nuovo che hai aggiunto, quindi se il file sorgente viene riesportato, le risorse verranno aggiornate correttamente ma manterranno il loro nuovo nome.
All'interno dell'app Web vedrai una piccola barra che scorre sul lato sinistro che ti fornisce alcuni strumenti utili.
Espandendo lo strumento livelli avrai una rappresentazione completa dei livelli nel documento sorgente originale. Ciò è particolarmente utile per selezionare i livelli che potrebbero essere oscurati dietro altri livelli e quindi difficili da selezionare con un mouse.
Il secondo strumento è un insieme di due righelli intersecanti il cui mirino è possibile trascinare intorno alla pagina per misurare la distanza tra i bordi dell'interfaccia utente e il punto centrale dei righelli.
Il terzo strumento offre la possibilità di aggiungere commenti attraverso i quali è possibile comunicare con il proprio team. Attiva lo strumento commenti, fai clic su una posizione sul disegno, quindi digita il messaggio e fai clic Inviare.
Una delle funzionalità disponibili nell'app Web di Sympli viene generata automaticamente CSS. Probabilmente vorrai scrivere il tuo codice di layout reattivo dato che i CSS di Sympli sono pixel perfetti e posizionati in modo assoluto, ma quando si lavora da progetti di Sketch ci sono alcuni ottimi CSS copia e incolla generati per cose come gradienti, sfondi, impostazioni di testo, ombre, bordi e così via.
Consentitemi di condividere un paio di suggerimenti rapidi che possono essere utili durante la creazione di elementi dell'interfaccia utente da convertire in CSS da Sympli.
Sympli rende abbastanza facile ottenere la dimensione di diversi elementi di design e la spaziatura che li circonda. Fai clic su un elemento nel disegno o selezionalo tramite lo strumento "Livelli" e vedrai i righelli apparire con le letture delle dimensioni come mostrato di seguito:
Otterrai le dimensioni dell'elemento stesso così come la sua distanza dai bordi e vicino ai vicini nel layout.
Quando selezioni un elemento di testo, se guardi il display sul lato destro dell'app Web, visualizzerai una lettura che fornisce la famiglia di caratteri, la dimensione del carattere, l'allineamento e il colore del testo. Vedrai anche il codice con tutti questi elementi nella sezione CSS generata automaticamente.
Sotto la lettura, è anche possibile fare clic sul pulsante con l'etichetta copia per afferrare il contenuto dell'elemento di testo, pronto per essere incollato nel codice.
Se si seleziona la terza scheda sulla destra etichettata Aa puoi vedere tutte le famiglie di caratteri usate nel progetto corrente.
Inoltre tutti i font utilizzati nel progetto generale sono visibili in Sommario sezione, di cui parleremo a breve.
I colori vengono estratti automaticamente dai tuoi documenti e sono accessibili in formato RGB o Hexcode.
È possibile visualizzare i colori utilizzati in qualsiasi elemento del disegno facendo clic su di esso per selezionare, quindi visualizzare le informazioni nel riquadro a destra.
Puoi anche vedere una palette di colori completa rilevata dal tuo progetto assicurandoti che nulla sia selezionato, quindi facendo clic sulla seconda scheda sul pannello di destra con l'icona a forma di goccia.
Come con i caratteri, è possibile accedere a tutti i colori dell'intero progetto Sommario la zona. Diamo un'occhiata a questo ora.
Per raggiungere il progetto Sommario schermo andare alla pagina di livello superiore del progetto, quindi selezionare il Sommario scheda, situata dopo il disegni scheda. Qui puoi vedere tutti i colori e i caratteri usati durante l'intero progetto.
Questa selezione di colori e caratteri può essere salvata in ciò che viene chiamato da Sympli come "Brandbook". I brandbook sono paragonabili alle guide di stile, consentendo di tenere traccia dei colori e dei caratteri associati a marche particolari.
Se è necessario apportare modifiche ai documenti di origine, è possibile aggiungerli al progetto Sympli corrispondente essenzialmente allo stesso modo dell'esportazione iniziale. Seleziona la tavola da disegno che è stata modificata, quindi esegui il processo di esportazione descritto in precedenza.
Se si sta visualizzando un design tramite l'app Web Sympli quando viene caricata una modifica, verrà rilevata la modifica e verrà richiesto di aprire la versione aggiornata.
Sympli, fedele al suo nome, sembra davvero semplificare il processo di collaborazione "design to dev". Per avere maggiori informazioni su ciò che Sympli fa e sul perché è stato creato, dai un'occhiata al suo fondatore, il veterano sviluppatore mobile Max Ignatyev:
Restate sintonizzati per il prossimo tutorial, in cui parleremo del funzionamento con i plug-in di Sympli per Android Studio e Xcode.
E se ti piacerebbe provare Sympli per conto tuo, vai su sympli.io.
Accentsconagua