Share
Se non ne hai mai sentito parlare, Sympli è uno strumento progettato per semplificare il processo di prendere un'interfaccia progettata in Photoshop o Sketch e implementarla per il web o come applicazione iOS o Android funzionale. Il flusso di lavoro funziona in questo modo: in primo luogo, un designer crea un progetto per web, iOS o Android che possono contenere un numero qualsiasi di disegni. Questi progetti rappresentano i diversi schermi che dovrebbero essere disponibili nell'applicazione che stai sviluppando. Successivamente, lo sviluppatore può utilizzare questi disegni per creare facilmente un'interfaccia per un sito Web o una nuova app.
In questo articolo, ti mostrerò alcune delle molte funzionalità che Sympli offre agli sviluppatori per creare facilmente app per iOS o Android, basandosi sul lavoro svolto dai designer.
Se vuoi vedere cosa Sympli ha da offrire per i designer, dai un'occhiata a questo articolo di Kezz Bracey:
L'utilizzo di Sympli come sviluppatore inizia con il download e l'installazione di un plug-in per Android Studio o Xcode. L'installazione di questi plugin è molto semplice e le esercitazioni video mostrate nelle pagine di download collegate ti aiuteranno in caso di problemi.
Il plug-in Sympli per Android e Xcode fornisce l'accesso a specifiche di progettazione interattive (alcuni team usano il termine "documenti con linee rosse"). Apri un mockup e fai clic sugli elementi di design per ottenere tutte le informazioni necessarie per implementare il design nella tua app.
Come mostrato nello screenshot seguente, Sympli ti fornisce tutte le informazioni di cui potresti aver bisogno su una determinata vista in modo da poter implementare manualmente un disegno pixel-perfect nel codice o in Interface Builder o Layout Editor.
Nota che Sympli converte automaticamente i pixel in prototipi di design in punti, così come altri parametri come riempimenti, ombre e bordi in termini e unità specifici di Android o iOS.
Inoltre, nel caso in cui il mockup sia stato creato in Sketch, il plug-in Sympli mostrerà le regole di ridimensionamento applicate ai widget in Sketch, che aiuta gli sviluppatori a impostare i valori dei vincoli appropriati.
Una delle caratteristiche principali di Sympli per gli sviluppatori è la possibilità di trascinare e rilasciare le viste da un disegno in un file di storyboard Android XML o iOS. Sympli si prende cura di molti problemi durante la creazione di interfacce posizionando e dimensionando le viste esattamente come appaiono nel design originale. Oltre a questo, Sympli può anche configurare molti altri attributi come il colore di sfondo e caratteri personalizzati per le visualizzazioni di testo.
Per applicare lo stile alla vista esistente in Interface Builder in Xcode, premi il pulsante "Maiusc" che trascina e rilascia l'elemento di design in vista.
Per generare un codice di stile per le viste create a livello di codice, eseguire un trascinamento nel codice del controller con il pulsante destro del mouse premuto.
Da qui, tutto ciò che devi fare è modificare i vincoli delle tue visualizzazioni in modo che possano adattare il modo in cui ti aspetteresti su dispositivi con schermi di dimensioni diverse. Per iOS ciò significherebbe aggiungere vincoli di layout automatico e per Android significherebbe configurare le viste nel giusto tipo di layout per il tuo design.
Oltre alla generazione di codice di stile per viste standard, il plug-in di Sympli per Xcode aiuta gli sviluppatori a creare controlli personalizzati basati sui dati vettoriali dal modello di progettazione.
Seleziona una forma vettoriale sul mockup e premi il pulsante "Snippet" accanto al nome di un livello nel pannello dei dettagli. Questo farà apparire una finestra popup con il codice Swift che si disegna nello stesso modo in cui è stato progettato a livello di programmazione. C'è anche una comoda opzione per copiare un codice pronto per Playground Xcode per continuare a costruire una vista personalizzata con un'anteprima live del parco giochi subito.
Ciò è estremamente utile per tutte le applicazioni che richiedono un disegno manuale delle visualizzazioni sullo schermo.
Finché tutto è stato configurato e caricato correttamente dal progettista, Sympli può occuparsi dell'importazione di immagini e caratteri personalizzati utilizzati nella progettazione. All'importazione, Sympli richiede al progettista di assegnare un nome all'immagine o al carattere in base alle migliori pratiche della piattaforma. Ad esempio, se un'immagine ha chiamato Immagine 1 è stato caricato su un progetto Android, Sympli chiederà al designer di rinominarlo IMAGE_1. Ciò garantisce che non sia necessario sprecare tempo durante la ridenominazione dei file per poterli caricare facilmente. Inoltre, gli sviluppatori possono creare regole di rinomina in modo che vengano applicate ogni volta che il mockup viene aggiornato.
In entrambi i plugin Xcode e Android Studio, facendo clic sul pulsante mostrato di seguito quando si visualizzano le immagini o i caratteri in un disegno, verranno importati nel progetto.
Sympli è molto intelligente sull'importazione di risorse. Inserirà le immagini nei cataloghi delle risorse su iOS e nella cartella delle risorse del progetto su Android; creerà anche versioni scalate per diversi dispositivi automaticamente.
Nota: Sympli ha annunciato che presto aggiungerà un'opzione per i plug-in Android Studio e Xcode per esportare risorse vettoriali (PDF per iOS e VectorDrawable) da qualsiasi livello vettoriale nel modello.
Per impostazione predefinita, Sympli abilita la sincronizzazione automatica per la progettazione del progetto in entrambi i plug-in Xcode e Android Studio. Ciò significa che, anche se stai lavorando, se il progettista apporta alcune modifiche e le carica su Sympli, il nuovo design sarà immediatamente disponibile in Xcode e Android Studio.
Quando vengono apportate modifiche a un progetto, Sympli scaricherà automaticamente la versione più recente del progetto e informerà l'utente dell'aggiornamento. Questo assicura che non devi mai controllare manualmente che stai lavorando con i progetti più recenti ed elimina anche la necessità per il progettista di avvisarti quando hanno apportato modifiche.
Oltre a scaricare automaticamente le copie più recenti dei progetti per il tuo progetto, Sympli rende anche molto semplice la visualizzazione delle versioni precedenti di qualsiasi progetto. Sia nei plugin IDE che nell'app Web di Sympli, puoi facilmente andare a guardare le versioni precedenti di qualsiasi progetto.
Questo può essere particolarmente utile se non si è sicuri di quali modifiche sono state apportate nell'ultima versione di un progetto specifico. Nell'app Web di Sympli, è possibile sfogliare facilmente tra diverse versioni dello stesso design per vedere quali modifiche sono state apportate:
Infine, questo backlog delle versioni precedenti può essere anche molto utile se una revisione della tua app richiede un design più datato. Evitando il fastidio di provare a trovare un vecchio file nei tuoi download in un messaggio di posta elettronica, con Sympli puoi semplicemente selezionare una versione da un semplice elenco a discesa nel plugin IDE:
Sympli Webapp fornisce un browser di modifiche in cui è possibile confrontare visivamente le due versioni del mockup di progettazione e vedere le modifiche fianco a fianco. Questo rende le aggiunte, le eliminazioni e altri aggiornamenti immediatamente evidenti alla vista, aumentando di conseguenza la produttività dei team. Non solo, gli sviluppatori possono anche vedere le modifiche a livello di proprietà, ad esempio se un colore cambia leggermente o un bordo diventa 1px più spesso.
Per ogni mockup caricato su Sympli più di una volta, ci sarà un pulsante "Sfoglia modifiche" in una barra in alto che apre un browser di modifiche affiancate. Seleziona le versioni di mockup che desideri confrontare e fai clic sulle regioni evidenziate per visualizzare le modifiche effettive.
6. Riepilogo del progetto
Sia l'app Web Sympli che i plugin IDE possono mostrarti a Sommario per qualsiasi progetto. Questa schermata riassuntiva mostra tutti i colori e i caratteri utilizzati nell'intero progetto. Questo può essere molto utile se hai bisogno di ottenere i dettagli di un colore o di un font specifico e non sei del tutto sicuro di quale progetto utilizzi questa risorsa. Può anche essere usato come riferimento sempre disponibile quando sviluppi la tua app se è necessario utilizzare un colore o un carattere esatto in un punto in cui non è stato fornito un disegno.
Come puoi vedere, Sympli semplifica notevolmente lo sviluppo di un'app da progetti di interfacce creati da qualcun altro. Sympli si occupa di gran parte del lavoro manuale necessario per convertire i file PSD o Sketch in uno Storyboard per iOS o XML per Android. Questa volta risparmiata grazie a Sympli può essere utilizzata in modo più produttivo, ad esempio, puoi dedicare il tuo tempo a funzionalità effettive anziché copiare noiosamente codici e immagini a colori!
Se vuoi saperne di più su Sympli o ti piacerebbe provarlo tu stesso, allora vai al loro sito web e dai un'occhiata ai loro fantastici video tutorial su come installare e usare i plugin Xcode e Android Studio.
Come sempre, si prega di essere sicuri di lasciare i vostri commenti e feedback nei commenti qui sotto.
Accentsconagua