Share
Låt oss ta en titt på Sympli; en samarbetsplattform för designers och utvecklare. Det fungerar med Xcode, Android Studio, Sketch och Photoshop. I den här handledningen kommer vi att täcka designers perspektiv, och i en uppföljningsstation ser vi hur Sympli fungerar från utvecklarens synvinkel.
När du har ett team som arbetar med en app-användargränssnitt, (om det gäller ett Android-, iOS- eller HTML5-projekt) blir övergångsfasen från design till kod ofta stenig, ineffektiv och ibland lite smärtsam.
När en Photoshop eller Sketch-baserad design har slutförts skickas den vanligtvis vidare till dev teamet. Därifrån lämnas dev-teamet för att extrahera bildtillgångar, mäta upp dimensioner och manuellt räkna ut färgerna, teckensnittsinställningarna och textinnehållet som behöver översättas till kod. Om ändringar görs i de ursprungliga designfilerna, är överföring av uppdaterade dokument via Dropbox (eller e-post) långsam, klumpig och svår att hålla reda på.
Alla dessa steg ger betydande tid åt utvecklingsprocessen, och dessutom måste kodgivare få tillgång till och lära sig designprogram som de annars inte skulle behöva. Det innebär att extra pengar spenderas på programvarulicenser och att man betalar för tiden manuell hantering av uppgifter som faller in i "ingenmans land" mellan design och kodning.
Det är här Sympli går in för att föreslå en lösning. Snarare än att ha utvecklare hanterar dessa "mellan" steg manuellt, syftar Sympli till att automatisera hela övergångsprocessen. När en formgivare har slutfört deras användargränssnitt exporterar de den till Sympli, som sedan hanterar automatiskt tillgångsberedning, mått på layoutdimension, färgpalettgenerering, utskrift av teckensnitt och mer.
Devs kan sedan glömma Photoshop eller Sketch ens existera, och istället se mönster via Sympli där allt de behöver för att få rakt in i kodningsverksamheten är tillgänglig för dem.
Designers behöver bara installera Sympli-plugin för Photoshop eller Sketch, vilka båda är tillgängliga som gratis nedladdningar:
https://sympli.io/downloads/webCoders har möjlighet att använda plugin för Android Studio, plugin för Xcode eller Sympli webbapp för HTML5 och CSS-baserade projekt. Dessa tre är alla gratis att använda för ett enda projekt, så om du skulle vilja följa med när vi går igenom den här handledningen huvudet till sympli.io och ta dig ett konto.
Den här artikeln är den första i en tvådelarserie. Vi börjar med att titta på designsidan av ekvationen och täcka hur du bäst kan konfigurera dina designdokument och exportera dem till Sympli. Vi ska också hålla fokus på webbinriktad kodning, se hur Sympli webapp fungerar. I handledningen efter detta kommer vi att gå in på Sympli med Android Studio och Xcode.
Låt oss börja i början: få Sympli plugin installerat i din föredragna designprogramvara.
Det första du behöver göra är att gå till nedladdningssidan och ta sedan in och installera Sympli-plugin för din föredragna designapp; antingen Sketch eller Photoshop.
Efter installationen kan du få tillgång till plugin under Sketch Plugins> Sympli> Exportera till Sympli. I Photoshop hittar du det under Fönster> Extensions> Sympli.
Observera att när du kör plugin första gången måste du logga in för att aktivera kommunikation med ditt Sympli-konto.
"Projekt" är kärnan i att arbeta med Sympli. Varje projekt kan innehålla ett antal "Designs" eller skärmar, och du kan ha flera källkod PSD- eller Sketch-filer som matar in i ett enda projekt om du väljer.
Projekt kan skapas för webb, iOS eller Android med 1 ×, 2 × och 3 × upplösningar som stöds för varje. Som tidigare nämnts kommer vi i denna handledning att fokusera på webben, och det kommer att finnas en annan handledning som snart kommer att fokusera på iOS och Android-projekt.
Du kan skapa ett nytt projekt online via gränssnittet Sympli "Projekt":
Alternativt kan du göra det från projekt fliken i Photoshop-plugin:
Eller i Sketch-plugin, genom att klicka på Skapa nytt projekt Välj sedan dina önskade alternativ:
Oavsett om du arbetar med Sketch eller Photoshop, är det bästa sättet att förbereda design för synkronisering med Sympli genom att använda skivor. Varje distinkt UI-mockup ska vara i sin egen tavla, till exempel:
Anledningen till detta är att efter att ha exporterats till Sympli (som vi kommer att täcka senare), kommer varje tavla att hämtas och bearbetas separat. Då kan du komma åt dem individuellt för att få tag i sina tillgångar och kodrelaterad information. Varje tavla kommer att vara synlig som en "Design" i Sympli webbgränssnitt, så här:
Sympli är byggt för att vara medveten om skaleringskrav för 1 ×, 2 × och 3 × upplösning. Det kommer att göra saker som att dividera layoutdimensioner med två eller tre i förekommande fall, så det är viktigt att du på förhand vet vilken skaleringsfaktor du behöver så att du får rätt resultat.
Om du till exempel designar ett 2 × upplösnings-gränssnitt för iPhone 6, som har en skärmstorlek på 375 px med 667 px, måste du se till att dina tavlor är dubbla så stor som 750 px vid 1134 px.
När du exporterar ett 2 × webbprojekt till Sympli kommer det att halvera alla dimensioner i din layout, inklusive de utdata i genererad CSS-kod (vi talar mer om CSS senare). Din 750px med 1134px-tavlor kommer att erkännas som 375px med 667px Sympli-mönster med 2 × upplösning, som bilden i nedre vänstra hörnet av skärmdumpen nedan.
Sympli kommer automatiskt att extrahera tillgångar till dig vid alla nödvändiga upplösningar, men du måste först tala om vilka delar av designen som ska konverteras till bilder. Processen att göra detta är lite annorlunda mellan Sketch och Photoshop.
I sketch väljer du skiktet eller gruppen för det element du vill exportera som en bild och klickar sedan på Gör exportbar + knappen längst ner i den högra kolumnen.
Första gången du klickar på knappen kommer den att förbereda en 1 × upplösningsbild för export, så du måste klicka på det ytterligare gånger för extra upplösningar som 2 ×, enligt nedan.
Om du jobbar med Photoshop, välj objektets skikt eller grupp och sedan på pluginpanelen i Sympli Tillgångar verktyg tab klick Markera som tillgång. Det lägger till prefixet "AST:" till skiktet och markerar det som en tillgång. Du kan också manuellt byta namn på lager för att lägga till detta prefix istället om du föredrar det.
När din UI-design är klar väljer du de tavlor du vill exportera. Om du inte redan har en projektinställning kan du göra det nu via Sympli plugin för din designprogramvara. Som en del av denna process får du möjlighet att synkronisera / exportera din design direkt.
Om du redan har en projektinställning, se till att du identifierar den rätta i Photoshop / Sketch-plugin och tryck sedan på motsvarande Synkronisera eller Synkronisera nu knapp.
Sympli kommer att spendera ett ögonblick att exportera bilder och ladda upp dina mönster. När ditt projekt har exporterats kan du se det från Symplis "Projekt" -sida. Härifrån kan du välja vilken design / tavla som helst och gå in i den via Web App för närmare inspektion.
När projektet har exporterats är det klart att avdelas till dev teamet. Samarbetare kan komma åt projektet via en länk som kan kopieras och skickas direkt från Sympli webapp eller från plugin i skiss eller Photoshop.
Under exportprocessen har Sympli utarbetat och laddat upp alla tillgångar du definierade i ditt källdesigndokument. Dessa tillgångar kan laddas ner på en gång via Ladda ner allt knappen i Sympli-appen, eller individuellt genom att trycka på ikonen för grå nedåtriktad pekarpil till höger om föremålet.
Varje tillgång kan laddas ner som en bitmapps (PNG) eller en vektor (SVG) -fil.
När hämtas som bitmappar kommer bilderna att laddas ned vid var och en av de resolutioner som anges under projektinställningen, t.ex. 1 ×, 2 ×, 3 ×.
När du har exporterat till Sympli kan du också använda "kartläggning" för att byta namn på tillgångar som finns i flygningen. Systemet "kartläggning" kommer att komma ihåg det gamla namnet på tillgången och associera den med den nya du har lagt till, så om källfilen återexporteras kommer tillgångarna att uppdateras korrekt men behåller deras nya namn.
Inne i webappen ser du en liten stapel längs vänster sida som ger dig några användbara verktyg.
Genom att expandera lagerverktyget får du en fullständig representation av lagren i ditt ursprungliga källdokument. Detta är särskilt användbart för att välja lager som kan vara dolda bakom andra lager och därmed svåra att välja med en mus.
Det andra verktyget är en uppsättning av två skärande linjaler vars crosshair du kan dra runt sidan för att mäta avståndet mellan gränssnittets gränser och linjans mittpunkt.
Det tredje verktyget ger möjlighet att lägga till kommentarer genom vilka du kan kommunicera med ditt lag. Aktivera kommentarverktyget, klicka på en position på designen, skriv sedan ditt meddelande och klicka på Skicka.
En av de funktioner som finns i Symplis webbapps skapas automatiskt CSS. Du kommer antagligen vilja skriva en egen responsiv layoutkod, eftersom Symplis CSS är perfekt perfekt och absolut placerad, men när du arbetar från Sketch designs finns det en stor kopia och klistra in CSS som genereras för saker som gradienter, bakgrunder, textinställningar, skuggor, gränser och så vidare.
Låt mig dela ett par snabba tips som kan vara till hjälp när du skapar användargränssnitt för att konverteras till CSS av Sympli.
Sympli gör det ganska lätt att få storleken på olika designelement samt avståndet runt dem. Klicka på ett element i designen, eller välj det via verktyget "Lager", så ser du linjaler som visas med dimensionutläsningar enligt nedan:
Du får elementets dimensioner såväl som dess avstånd från kanterna och de nära grannarna i layouten.
När du väljer något textelement, om du tittar på bildskärmen på höger sida av webbprogrammet ser du en utläsning som tillhandahåller teckensnittsfamiljen, teckensnittstorlek, justering och textfärg. Du får se kod med alla dessa objekt i den automatiskt genererade CSS-sektionen också.
Under läsningen är det också möjligt att klicka på knappen märkt Kopia att ta tag i innehållet i textobjektet, redo att klistras in i koden.
Om du markerar den tredje fliken till höger Aa Du kan se alla typsnittsfamiljer som används i den nuvarande designen.
Dessutom är alla teckensnitt som används i det övergripande projektet synliga i Sammanfattning avsnitt som vi kommer att prata om inom kort.
Färg extraheras automatiskt från dina dokument och kan nås i RGB eller Hexcode-form.
Du kan se färgerna som används i något element i din design genom att klicka på den för att välja och sedan se informationen i panelen till höger.
Du kan också se en komplett färgpalett som detekterats från din design genom att se till att ingenting är markerat och klicka sedan på den andra fliken på den högra panelen med droppikonet.
Liksom med teckensnitt kan alla färger över hela projektet nås från Sammanfattning område. Låt oss ta en titt på det nu.
För att nå projektet Sammanfattning skärmen gå till projektets översta sida och välj sedan Sammanfattning fliken, som ligger efter Designs flik. Här kan du se alla färger och teckensnitt som används under hela projektet.
Detta val av färger och teckensnitt kan sparas ut i det som Sympli kallar för "Brandbook". Brandbooks är jämförbara med stilguider, så att du kan hålla reda på färger och teckensnitt som är förknippade med vissa märken.
Om ändringar måste göras i källdokumenten kan man lägga till dem i motsvarande Sympli-projekt på i huvudsak samma sätt som den ursprungliga exporten. Välj den tavla som har ändrats och kör sedan exportprocessen som vi beskrev tidigare.
Om du tittar på en design via webben Sympli när en ändring har laddats upp upptäcker den ändringarna och uppmanar dig att öppna den uppdaterade versionen.
Sympli, sant mot sitt namn, verkar verkligen förenkla samarbetet "design to dev". För att få lite mer inblick i vad Sympli gör och varför det skapades, kolla in den här presentationen av grundaren, veteran mobilutvecklare Max Ignatyev:
Håll dig uppdaterad för nästa handledning, där vi kommer att täcka med att arbeta med Symplis plugins för Android Studio och Xcode.
Och om du vill försöka Sympli ut för dig själv, gå till sympli.io.
Accentsconagua