Share
Hvis du ikke har hørt om det før, er Sympli et verktøy utviklet for å forenkle prosessen med å ta et grensesnitt designet i Photoshop eller Sketch og implementere det for Internett eller som et funksjonelt iOS- eller Android-program. Arbeidsflyten virker slik: Først skaper en designer en prosjekt for web, iOS eller Android som kan inneholde et hvilket som helst antall design. Disse designene representerer de forskjellige skjermbildene som bør være tilgjengelige i programmet du utvikler. Deretter kan utvikleren bruke disse designene til å enkelt lage et grensesnitt for et nettsted eller en ny app.
I denne artikkelen vil jeg vise deg noen av de mange funksjonene som Sympli tilbyr for utviklere å enkelt lage apper for iOS eller Android, bygge på arbeidet som utføres av designere.
Hvis du vil se hva Sympli har å tilby for designere, sjekk ut denne artikkelen av Kezz Bracey:
Bruke Sympli som utvikler begynner med å laste ned og installere et plugin for enten Android Studio eller Xcode. Det er veldig enkelt å installere disse pluginene, og videoopplæringene som vises på de koblede nedlastingssidene, hjelper deg om du har problemer.
Sympli-plugin for Android og Xcode gir tilgang til interaktive designspesifikasjoner (noen lag bruker begrepet "røde linjedokumenter"). Åpne en mockup og klikk på designelementene for å få all nødvendig informasjon som kreves for å implementere designet i appen din.
Som vist i følgende skjermdump, gir Sympli deg all den informasjonen du muligens trenger om en bestemt visning, slik at du kan implementere en piksel-perfekt design manuelt i kode eller i Interface Builder eller Layout Editor.
Vær oppmerksom på at Sympli konverterer piksler automatisk i designmockups til poeng, samt andre parametere som fyll, skygger og grenser til Android eller iOS-spesifikke vilkår og enheter.
I tilfelle mockupen ble opprettet i Sketch, vil Sympli-plugin vise størrelsesreglene som brukes på widgets i Sketch, som hjelper utviklere til å sette riktige begrensningsverdier.
En av Symplis hovedtrekk for utviklere er muligheten til å bare dra og slippe visninger fra et design til en Android XML eller IOS Storyboard-fil. Sympli tar vare på mye trøbbel når du lager grensesnitt ved å plassere og justere visningene dine akkurat som de vises i det opprinnelige designet. I tillegg til dette kan Sympli også konfigurere mange andre attributter som bakgrunnsfarge og tilpassede skrifter for tekstvisninger.
For å bruke styling til eksisterende visning i Interface Builder i Xcode, trykk "Shift" -knappen enn dra og slipp designelementet til visning.
For å generere en stylingkode for visningene som er opprettet programmatisk, må du dra og slippe inn i kontrollerens kode med høyre museknapp trykkes.
Herfra er alt du trenger å gjøre for å endre begrensningene i dine synspunkter slik at de kan tilpasse hvordan du kan forvente på enheter med forskjellige skjermstørrelser. For iOS betyr dette at du legger til begrensninger for automatisk oppsett, og for Android betyr det at du konfigurerer visningene i den riktige typen layout for designen din.
I tillegg til generering av stylingskode for standardvisninger, hjelper Symplis plugin for Xcode utviklere å bygge tilpassede kontroller basert på vektordata fra designmockup.
Velg en vektorform på mockupen, og trykk "Utklipp" -knappen ved siden av et lags navn i detaljpanelet. Dette vil gi opp et popup-vindu med Swift-kode som trekker på samme måte som den ble utformet programmatisk. Det er også et praktisk valg for å kopiere en Xcode Playground-klar kode for å fortsette å bygge en tilpasset visning med et direkte forhåndsvisning av lekeplass med en gang.
Dette er ekstremt nyttig for alle applikasjoner som krever noen manuell tegning av visninger på skjermen.
Så lenge alt har blitt konfigurert og lastet opp riktig av designeren, kan Sympli ta vare på å importere bilder og tilpassede skrifter som brukes i designet. Ved import, beder Symli designeren om å navngi bildet eller skrifttypen i henhold til plattformens beste praksis. For eksempel, hvis et bilde kalles Bilde 1 blir lastet opp til et Android-prosjekt, vil Sympli be designeren om å endre navn på den IMAGE_1. Dette sikrer at du ikke trenger å kaste bort utviklingstid, og omdøpe filer slik at de lett kan lastes inn. I tillegg kan utviklere opprette omdøpsregler slik at de vil bli brukt hver gang mockupen er oppdatert.
I både Xcode- og Android Studio-pluginene, vil du klikke på knappen som vises nedenfor når du ser på bildene eller skrifter i et design, importere dem til prosjektet ditt.
Sympli er veldig intelligent om å importere eiendeler. Det vil sette bilder inn i aktivarkatalogene dine på iOS og i prosjektets ressursmappe på Android; Det vil til og med skape versjoner for ulike enheter automatisk.
Merk: Sympli har annonsert at de snart vil legge til et alternativ for både Android Studio og Xcode plugins for å eksportere vektoraktier (PDF for iOS og VectorDrawable) fra alle vektorlag i mockup.
Sympli aktiverer som standard automatisk synkronisering for prosjektets design i både pluginene for Xcode og Android Studio. Dette betyr at, selv om du arbeider, hvis designeren gjør noen endringer og laster dem opp til Sympli, vil det nye designet umiddelbart være tilgjengelig i Xcode og Android Studio.
Når endringer gjøres i et design, laster Sympli automatisk ned den nyeste versjonen av designet og informerer deg om oppdateringen. Dette sikrer at du aldri må manuelt sjekke at du arbeider med de nyeste designene og også eliminerer behovet for designeren å varsle deg når de har gjort endringer.
I tillegg til at du bare laster ned de nyeste kopiene av design for prosjektet ditt, gjør Sympli det også veldig enkelt å se tidligere versjoner av ethvert design. Både i IDE-pluginene og i Sympli's webapp kan du veldig enkelt gå og se på tidligere versjoner av ethvert design.
Dette kan være spesielt nyttig hvis du ikke er sikker på hvilke endringer som er gjort i den nyeste versjonen av en bestemt design. I Symplis nettapp kan du enkelt bla mellom forskjellige versjoner av samme design for å se hvilke endringer som er gjort:
Til slutt, denne tilbakemeldingen til tidligere versjoner kan også være veldig nyttig hvis en revisjon av appen krever at et eldre design skal brukes. For å unngå å prøve å finne en gammel fil i nedlastingene i en epost, kan du med Sympli bare velge en versjon fra en enkel rullegardinliste i IDE-plugin:
Sympli Webapp gir en endringsleser hvor du kan visuelt sammenligne to versjoner av designmockupen og se endringene side ved side. Dette gjør tillegg, slettinger og andre oppdateringer umiddelbart synlige for øyet, noe som øker lagets produktivitet som et resultat. Ikke bare det, utviklere kan også se endringene på et eiendomsnivå - for eksempel hvis en farge endres litt eller en kant blir 1px tykkere.
For noen mockup lastet opp til Sympli mer enn en gang, vil det være en "Bla gjennom endringer" -knappen i en topplinje som åpner en side om side endringsleser. Velg mockup-versjoner du vil sammenligne, og klikk på de uthevede områdene for å se de faktiske endringene.
6. Prosjektoppsummering
Både Sympli web app og IDE plugins kan vise deg en Sammendrag for ethvert prosjekt. Denne oppsummeringsskjermen viser alle fargene og skrifter som brukes i hele prosjektet. Dette kan være svært nyttig hvis du trenger å få detaljer om en bestemt farge eller skrift og er ikke helt sikker på hvilket design som ressursen brukes i. Den kan også brukes som en alltid tilgjengelig referanse når du utvikler appen din hvis du må bruke en eksakt farge eller skriftsted hvor et design ikke er gitt til deg.
Som du ser, gjør Sympli det mye lettere å utvikle en app fra grensesnittdesign laget av noen andre. Sympli tar vare på mye av det manuelle arbeidet med å konvertere PSD eller Sketch-filer til et Storyboard for iOS eller en XML for Android. Denne gangen lagret på grunn av at Sympli kan brukes mer produktivt, for eksempel kan du tilbringe tid på faktisk funksjonalitet, i stedet for å kjedelig kopiere fargekoder og bilder!
Hvis du vil vite mer om Sympli eller vil prøve det selv, så gå over til deres nettside og sjekk ut noen av deres flotte videoopplæringer om hvordan du installerer og bruker pluginene for Xcode og Android Studio..
Som alltid, vær så snill å legge igjen dine kommentarer og tilbakemeldinger i kommentarene nedenfor.
Accentsconagua