Share
Om du inte har hört talas om det tidigare, är Sympli ett verktyg för att förenkla processen att ta ett gränssnitt som är utformat i Photoshop eller Sketch och implementera det för webben eller som en funktionell iOS- eller Android-applikation. Arbetsflödet fungerar så här: För det första skapar en designer en projekt för webb, iOS eller Android som kan innehålla ett antal mönster. Dessa mönster representerar de olika skärmar som borde vara tillgängliga i den applikation som du utvecklar. Därefter kan utvecklaren använda dessa mönster för att enkelt skapa ett gränssnitt för en webbplats eller en ny app.
I den här artikeln kommer jag att visa dig några av de många funktioner som Sympli erbjuder för utvecklare att enkelt skapa apps för iOS eller Android, bygga på det arbete som utförs av designers.
Om du vill se vad Sympli har att erbjuda för designers, kolla in den här artikeln av Kezz Bracey:
Användning av Sympli som utvecklare börjar med att ladda ner och installera ett plugin för antingen Android Studio eller Xcode. Installera dessa plugins är väldigt enkelt, och videotillfällen som visas på de länkade nedladdningssidorna hjälper dig om du har några problem.
Sympli-plugin för Android och Xcode ger tillgång till interaktiva designspecifikationer (vissa lag använder termen "röda linjer"). Öppna en mockup och klicka på designelementen för att få all nödvändig information som krävs för att implementera designen i din app.
Som visas i följande skärmdump ger Sympli dig all information som du eventuellt behöver om en viss vy, så att du kan implementera en pixel-perfekt design manuellt i kod eller i gränssnittsbyggare eller layoutredigerare.
Observera att Sympli automatiskt konverterar pixlar i designmockups till poäng, liksom andra parametrar som fyllningar, skuggor och gränser till Android eller iOS-specifika termer och enheter.
Även om mockupen skapades i Sketch, kommer Sympli-plugin att visa de anpassningsregler som tillämpas för widgets i Sketch, vilket hjälper utvecklare att ställa in lämpliga begränsningsvärden.
En av Symplis huvudfunktioner för utvecklare är möjligheten att bara dra och släppa vyer från en design till en Android XML eller iOS Storyboard-fil. Sympli tar hand om en massa besvär när man skapar gränssnitt genom att placera och dimensionera dina synpunkter precis som de förekommer i den ursprungliga designen. Utöver detta kan Sympli också konfigurera många andra attribut som bakgrundsfärg och anpassade teckensnitt för textvyer.
För att tillämpa styling på den befintliga vyn i gränssnittsbyggare i Xcode, tryck på "Shift" -knappen än dra och släpp designelementet i vy.
För att skapa en stylingkod för de visningar som skapats programmatiskt, dra en släpp och släpp in i regulatorns kod med höger musknapp nedtryckt.
Härifrån är allt du behöver göra för att ändra begränsningarna i dina åsikter så att de kan anpassa hur du kan förvänta dig på enheter med olika skärmstorlekar. För iOS skulle det innebära att du lägger till autoutläggningsbegränsningar, och för Android skulle det innebära att du konfigurerar visningarna i rätt format för din design.
Förutom att generera stilkod för standardvyer hjälper Symplis plugin för Xcode utvecklare att skapa anpassade kontroller baserat på vektordata från designmockup.
Välj en vektorform på mockupen och tryck på knappen "Snippet" bredvid ett lager namn på detaljeringspanelen. Detta kommer att ge ett popup-fönster med Swift-kod som drar på samma sätt som den utformades programmässigt. Det finns också ett praktiskt alternativ att kopiera en Xcode Playground-ready-kod för att fortsätta bygga en anpassad vy med en direkt förhandsgranskning av lekplatsen direkt.
Detta är mycket användbart för alla applikationer som kräver en viss manuell ritning av bilder på skärmen.
Så länge allt har konfigurerats och laddat upp korrekt av konstruktören, kan Sympli ta hand om import av bilder och anpassade teckensnitt som används i designen. Vid import, uppmanar Sympli designern att namnge bilden eller teckensnittet enligt bästa praxis på plattformen. Till exempel, om en bild kallas Bild 1 laddas upp till ett Android-projekt, kommer Sympli att uppmana designern att byta namn på den IMAGE_1. Detta säkerställer att du inte behöver slösa bort utvecklingstiden genom att byta namn på filer så att de enkelt kan laddas. Dessutom kan utvecklare skapa omdöpningsregler så att de kommer att tillämpas varje gång mockup uppdateras.
I både Xcode och Android Studio-plugins kan du klicka på knappen som visas nedan när du tittar på bilderna eller tecknen i en design och importera dem till ditt projekt.
Sympli är mycket intelligent om att importera tillgångar. Det kommer att lägga bilder i dina tillgångskataloger på iOS och i projektets resursmapp på Android; det kommer även att skapa skalade versioner för olika enheter automatiskt.
Notera: Sympli har meddelat att de snart kommer att lägga till ett alternativ för både Android Studio och Xcode plugins för att exportera vektor tillgångar (PDF för iOS och VectorDrawable) från alla vektor lager i mockup.
Sympli möjliggör som standard automatisk synkronisering för projektets design i både pluggarna Xcode och Android Studio. Det betyder att, även när du arbetar, om designern gör några ändringar och laddar upp dem till Sympli, kommer den nya designen omedelbart att finnas tillgänglig i Xcode och Android Studio.
När ändringar görs i en design, hämtar Sympli automatiskt den senaste versionen av designen och meddelar dig om uppdateringen. Detta säkerställer att du aldrig behöver manuellt kontrollera att du arbetar med de senaste designerna och eliminerar också behovet av designern att meddela dig när de har gjort ändringar.
Förutom att bara ladda ner de senaste kopiorna av mönster för ditt projekt, gör Sympli det också väldigt enkelt att se tidigare versioner av vilken design som helst. Både i IDE-plugins och i Symplis webbapp kan du mycket enkelt gå och titta på tidigare versioner av vilken design som helst.
Detta kan vara särskilt användbart om du inte är säker på vilka ändringar som gjorts i den senaste versionen av en specifik design. I Symplis webbapp kan du enkelt bläddra mellan olika versioner av samma design för att se vilka ändringar som gjorts:
Slutligen kan denna eftersläpning av tidigare versioner också vara mycket användbar om en granskning av din app kräver en äldre design som ska användas. Undvik besväret med att försöka hitta en gammal fil i dina nedladdningar i ett mail, med Sympli kan du bara välja en version från en enkel rullgardinslista i IDE-plugin:
Sympli Webapp tillhandahåller en ändringsbläddrare där du kan visuellt jämföra alla två versioner av designmockupen och se ändringarna sida vid sida. Detta gör tillägg, raderingar och andra uppdateringar omedelbart uppenbara för ögat, vilket ökar lagens produktivitet som ett resultat. Inte bara det, utvecklare kan också se förändringarna på en fastighetsnivå, till exempel om en färg ändras något eller en kant blir 1px tjockare.
För varje mockup som laddas upp till Sympli mer än en gång, kommer det att finnas en "Bläddra ändringar" -knappen i en övre fält som öppnar en sidbytebytesläsare. Välj mockup-versioner som du vill jämföra och klicka på de markerade regionerna för att se de faktiska ändringarna.
6. Projekt Sammanfattning
Både Sympli web app och IDE plugins kan visa dig en Sammanfattning för något projekt. Den här sammanfattningsskärmen visar alla färger och teckensnitt som används i hela projektet. Detta kan vara mycket användbart om du behöver få information om en viss färg eller typsnitt och inte helt säker på vilken design som resursen används i. Den kan också användas som en alltid tillgänglig referens när du utvecklar din app om du måste använda en exakt färg eller teckensnitt någonstans där en design inte har lämnats till dig.
Som du kan se, gör Sympli det mycket lättare att utveckla en app från gränssnittsdesigner som skapats av någon annan. Sympli tar hand om mycket av det manuella arbetet med att konvertera PSD eller Sketch-filer till en Storyboard för iOS eller en XML för Android. Den här gången sparas på grund av att Sympli kan användas mer produktivt, till exempel, du kan tillbringa din tid på den faktiska funktionaliteten i stället för att kedja att kopiera färgkoder och bilder!
Om du vill veta mer om Sympli eller vill prova det själv, gå sedan vidare till deras hemsida och kolla in några av deras bra videohandledning om hur du installerar och använder Xcode och Android Studio-plugins.
Som alltid, var noga med att lämna dina kommentarer och feedback i kommentarerna nedan.
Accentsconagua