Share
La oss ta en titt på Sympli; en samarbeidspartner for designere og utviklere. Den fungerer med Xcode, Android Studio, Sketch og Photoshop. I denne opplæringen vil vi dekke designers perspektiv, og i en oppfølgingspost ser vi hvordan Sympli fungerer fra en utviklerens synspunkt.
Når du har et lag som arbeider på en app-brukergrensesnitt, (om det er et Android-, iOS- eller HTML5-prosjekt), blir overgangsfasen fra design til kode ofte steinete, ineffektive, og noen ganger litt smertefull.
Når en Photoshop- eller Sketch-basert design er ferdig, blir den vanligvis videresendt, slik som til dev teamet. Derfra er dev-teamet igjen for å trekke ut bildeaktier, måle opp dimensjoner og manuelt finne ut farger, skriftinnstillinger og tekstinnhold som må oversettes til kode. Hvis endringer gjøres i de opprinnelige designfilene, er overføring av oppdaterte dokumenter via Dropbox (eller e-post) langsom, klumpete og vanskelig å holde styr på.
Alle disse trinnene legger betydelig tid i utviklingsprosessen, og i tillegg krever kodere å få tilgang til og lære designprogrammer de ellers ikke har behov for. Dette betyr ekstra penger brukt på programvarelisenser, og ved å betale for tiden manuell håndtering av oppgaver som faller inn i "ingen manns land" mellom design og koding.
Det er her Sympli går inn for å foreslå en løsning. I stedet for at utviklere håndterer disse "mellom" trinnene manuelt, har Symli som mål å automatisere hele overgangsprosessen. Når en designer har fullført brukergrensesnittet, eksporterer de den til Sympli, som automatisk håndterer aktivforberedelse, dimensjonering av dimensjonering av dimensjoner, fargepalettgenerering, utskrift av skrifttype og mer.
Devs kan da glemme Photoshop eller Sketch selv, og i stedet se design via Sympli hvor alt de trenger for å komme rett inn i kodenes virksomhet er tilgjengelig for dem.
Designere trenger bare installere Sympli-pluginet for Photoshop eller Sketch, som begge er tilgjengelige som gratis nedlastinger:
https://sympli.io/downloads/webCoders har muligheten til å bruke plugin for Android Studio, plugin for Xcode eller Sympli's webapp for HTML5 og CSS-baserte prosjekter. Disse tre er alle gratis å bruke for et enkelt prosjekt, så hvis du vil følge med ettersom vi går gjennom denne opplæringen, går du til sympli.io og tar deg en konto.
Denne artikkelen er den første i en todelt serie. Vi starter med å se på designsiden av ligningen, og dekker hvor godt du kan sette opp designdokumenter og eksportere dem til Sympli. Vi vil også holde fokus på weborientert koding, se på hvordan Sympli webapp fungerer. I opplæringen etter dette, vil vi gå inn i å bruke Sympli med Android Studio og Xcode.
La oss starte i begynnelsen: Få Sympli-pluginet installert i din foretrukne designprogramvare.
Det første du må gjøre er å gå til nedlastingssiden, og ta og installer Sympli-pluginet for den foretrukne designappen din. enten Sketch eller Photoshop.
Etter installasjon, i Sketch kan du få tilgang til plugin-modulen under Plugins> Sympli> Eksporter til Sympli. I Photoshop finner du det under Vindu> Utvidelser> Sympli.
Vær oppmerksom på at når du kjører plugin første gang, må du logge på for å aktivere kommunikasjon med Sympli-kontoen din.
"Prosjekter" er kjernen i å jobbe med Sympli. Hvert prosjekt kan inneholde en rekke "Design" eller skjermbilder, og du kan ha flere kilde PSD- eller Sketch-filer som fôrer til et enkelt prosjekt hvis du velger.
Prosjekter kan opprettes for web, iOS eller Android med 1 ×, 2 × og 3 × oppløsninger som støttes for hver. Som nevnt tidligere, vil vi i denne opplæringen fokusere på web, og det vil bli en annen opplæringsprogram som kommer snart for å fokusere på iOS og Android-prosjekter.
Du kan opprette et nytt prosjekt online via Sympli "Prosjekter" -grensesnittet:
Alternativt kan du gjøre det fra prosjekter fanen i Photoshop-plugin:
Eller i Sketch-pluginet, ved å klikke Opprett nytt prosjekt og deretter velge dine foretrukne alternativer:
Enten du jobber med Sketch eller Photoshop, er den beste måten å forberede design på for å synkronisere med Sympli, ved hjelp av kunstbrett. Hver enkelt UI-mockup skal være i sin egen tavle, for eksempel:
Årsaken til dette er at etter å ha eksportert til Sympli, (som vi vil dekke senere), blir hver tavle plukket opp og behandlet separat. Du vil da kunne få tilgang til dem individuelt for å ta tak i sine eiendeler og kode relatert informasjon. Hver tavla vil bli synlig som et "Design" i Symli webgrensesnitt, slik som:
Sympli er bygget for å være oppmerksom på skaleringskrav for 1 ×, 2 × og 3 × oppløsning. Det vil gjøre ting som å dele layoutdimensjoner med to eller tre hvor det er hensiktsmessig, så det er viktig å vite på forhånd hvilken skaleringsfaktor du trenger for å få de riktige resultatene.
Hvis du for eksempel designer en 2 × oppløsning-brukergrensesnitt til iPhone 6, som har en skjermstørrelse på 375 px ved 667 px, må du sørge for at tavleplaten din er to ganger så stor som 750 px ved 1134 px.
Når du eksporterer et 2 × webprosjekt til Sympli, vil det halvere alle dimensjonene i oppsettet ditt, inkludert de utdataene i generert CSS-kode (vi snakker mer om CSS senere). Din 750px ved 1134px-tavler blir anerkjent som 375px med 667px Sympli-design med 2 × oppløsning, som vist nederst i venstre hjørne av skjermbildet under.
Sympli vil automatisk trekke ut eiendeler for deg ved alle nødvendige oppløsninger, men du må først fortelle hvilke deler av designet som skal konverteres til bilder. Prosessen for å gjøre dette er litt forskjellig mellom Sketch og Photoshop.
I skisse, velg lag eller gruppe for elementet du vil ha eksportert som et bilde, og klikk deretter på Gjør eksportable + knappen nederst i den høyre kolonnen.
Første gang du klikker på knappen, vil den forberede et 1 × oppløsningsbilde for eksport, så du må klikke det flere ganger for ekstra oppløsninger som 2 ×, som vist under.
Hvis du jobber med Photoshop, velger du elementets lag eller gruppe, og deretter i Sympli-pluginpanelet Assetverktøy kategorien klikk Marker som aktiv. Det vil legge til prefikset "AST:" til laget, og dermed markere det som en ressurs. Du kan også manuelt endre navn på lag for å legge til dette prefikset i stedet hvis du foretrekker det.
Når brukergrensesnittet ditt er klart, velger du artikkelen (e) du ønsker å eksportere. Hvis du ikke allerede har et prosjektoppsett, kan du gjøre det nå via Sympli plugin for designprogramvaren. Som en del av denne prosessen får du muligheten til å synkronisere / eksportere designet ditt med en gang.
Hvis du allerede har et prosjektoppsett, må du passe på at du identifiserer riktig i Photoshop / Sketch-pluginet, og trykk deretter på det tilsvarende Sync eller Synkroniser nå knapp.
Sympli vil bruke et øyeblikk til å eksportere bilder og laste opp designene dine. Når prosjektet ditt er eksportert, kan du se det fra Symplis «Prosjekter» -side. Herfra kan du velge hvilken som helst design / tavla og gå inn i den via Web App for nærmere inspeksjon.
Når prosjektet er blitt eksportert, er det klart å bli avlevert til dev teamet. Samarbeidspartnere kan få tilgang til prosjektet via en lenke som kan kopieres og sendes direkte fra Sympli webapp, eller fra plugin i Sketch eller Photoshop.
Under eksportprosessen vil Sympli ha utarbeidet og lastet opp alle eiendelene du definerte i kildeutformingsdokumentet. Disse eiendelene kan lastes ned på en gang via Last ned alt knappen i Sympli-appen, eller individuelt ved å trykke på ikonet med grått nedover pekepilen til høyre for elementet.
Hver ressurs kan lastes ned som en bitmap (PNG) eller en vektor (SVG) fil.
Når du laster ned som bitmaps, lastes ned bildene ved hver av de oppløsningene som er angitt under prosjektoppsettet, f.eks. 1 ×, 2 ×, 3 ×.
Når du har eksportert til Sympli, kan du også bruke "kartlegging" for å gi nytt navn til eiendeler på fly. "Kartleggingssystemet" vil huske det gamle navnet på aktiva og knytte det til det nye du har lagt til, så hvis kildefilen er re-eksporterte eiendeler, vil oppdateringen bli korrekt, men behold de nye navnene.
I web-appen ser du en liten bar som kjører ned til venstre, som gir deg noen nyttige verktøy.
Ved å utvide lagverktøyet får du en fullstendig representasjon av lagene i ditt opprinnelige kilde dokument. Dette er spesielt nyttig for å velge lag som kan være skjult bak andre lag og dermed vanskelig å velge med mus.
Det andre verktøyet er et sett med to kryssende linjaler hvis krysshår du kan dra rundt på siden for å måle avstanden mellom brukergrensesnittets kant og linjens midtpunkt.
Det tredje verktøyet gir muligheten til å legge til kommentarer som du kan kommunisere med teamet ditt. Aktiver kommentarverktøyet, klikk på en posisjon på designet, skriv inn meldingen din og klikk Sende.
En av funksjonene som er tilgjengelige i Symplis nettapp, genereres automatisk CSS. Du vil sannsynligvis ønske å skrive din egen responsive layoutkode, gitt at Symplis CSS er piksel perfekt og helt posisjonert, men når du arbeider fra Sketch designs, er det noen gode kopier og lim inn CSS generert for ting som gradienter, bakgrunner, tekstinnstillinger, skygger, grenser og så videre.
Tillat meg å dele et par raske tips som kan være nyttige når du oppretter grensesnittelementer som skal konverteres til CSS av Sympli.
Sympli gjør det ganske enkelt å få størrelsen på forskjellige designelementer, så vel som avstanden rundt dem. Klikk på et element i designet, eller velg det via verktøyet "Lag", og du vil se linjaler vises med dimensjonsavlesninger som vist nedenfor:
Du får dimensjonene til elementet selv, så vel som avstanden fra kantene og nær naboene i oppsettet.
Når du velger et tekstelement, ser du på displayet på høyre side av webappen en lesing som gir skriftfamilien, skriftstørrelsen, justeringen og tekstfargen. Du vil se kode med alle disse elementene i den automatisk genererte CSS-delen også.
Under lesingen er det også mulig å klikke på knappen som er merket Kopiere å ta tak i innholdet i tekstelementet, klar til å bli klistret inn i kode.
Hvis du velger den tredje kategorien til høyre merket Aa Du kan se alle fontfamiliene som brukes i dagens design.
I tillegg er alle skriftene som brukes i det samlede prosjektet synlige i Sammendrag avsnitt som vi snakker om snart.
Farge blir automatisk hentet fra dokumentene dine og kan nås i RGB eller Hexcode-skjema.
Du kan se fargene som brukes i et hvilket som helst element av designet ved å klikke på det for å velge og se informasjonen i panelet til høyre.
Du kan også se en komplett fargepalett oppdaget av designet ved å sørge for at ingenting er valgt, og deretter klikke på den andre kategorien i høyre panel med dråpeikonet.
Som med skrifter kan alle fargene over hele prosjektet nås fra Sammendrag område. La oss ta en titt på det nå.
Å nå prosjektet Sammendrag skjermen gå til toppen av siden av prosjektet, velg deretter Sammendrag fanen, plassert etter design fane. Her kan du se alle fargene og skrifter som brukes i hele prosjektet.
Dette valget av farger og skrifter kan lagres ut i det som refereres til av Sympli som en "Brandbok". Brandbøker er sammenlignbare med stilguider, slik at du kan holde oversikt over farger og skrifter knyttet til bestemte merker.
Hvis endringer må gjøres i kildedokumenter, kan det legges til i det tilsvarende Sympli-prosjektet på i hovedsak samme måte som den første eksporten. Velg artikkelen som er endret, og kjør deretter eksportprosessen som vi beskrev tidligere.
Hvis du ser på et design via Sympli webapp når en endring er lastet opp, vil den oppdage endringene og be deg om å åpne den oppdaterte versjonen.
Sympli, sant til navnet, synes faktisk å forenkle samarbeidsprosessen "design to dev". For å få litt mer innblikk i hva Sympli gjør, og hvorfor det ble opprettet, sjekk ut denne presentasjonen av grunnleggeren, veteranen mobilutvikler Max Ignatyev:
Hold deg oppdatert for neste opplæring, hvor vi skal dekke med å arbeide med Sympli plugins for Android Studio og Xcode.
Og hvis du vil prøve Sympli ut for deg selv, gå til sympli.io.
Accentsconagua