Share
Als u er nog nooit van gehoord hebt, is Sympli een hulpmiddel om het maken van een interface ontworpen in Photoshop of Sketch te vereenvoudigen en het voor het web of als een functionele iOS- of Android-applicatie te implementeren. De workflow werkt als volgt: ten eerste maakt een ontwerper een project voor web, iOS of Android die een willekeurig aantal kan bevatten ontwerpen. Deze ontwerpen vertegenwoordigen de verschillende schermen die beschikbaar zouden moeten zijn in de applicatie die u aan het ontwikkelen bent. Vervolgens kan de ontwikkelaar deze ontwerpen gebruiken om eenvoudig een interface voor een website of nieuwe app te maken.
In dit artikel laat ik je een aantal van de vele functies zien die Sympli biedt voor ontwikkelaars om gemakkelijk apps voor iOS of Android te maken, voortbouwend op het werk van ontwerpers.
Als je wilt zien wat Sympli te bieden heeft voor ontwerpers, bekijk dan dit artikel van Kezz Bracey:
Sympli als ontwikkelaar gebruiken begint met het downloaden en installeren van een plug-in voor Android Studio of Xcode. Het installeren van deze plug-ins is heel eenvoudig en de video-tutorials die op de gekoppelde downloadpagina's worden getoond, helpen u als u problemen ondervindt.
Sympli plug-in voor Android en Xcode biedt toegang tot interactieve ontwerpspecificaties (sommige teams gebruiken de term "rode-regels documenten"). Open een mockup en klik op de ontwerpelementen om alle benodigde informatie te krijgen die nodig is om het ontwerp in uw app te implementeren.
Zoals in de volgende schermafbeelding wordt getoond, biedt Sympli u alle informatie die u mogelijk nodig heeft over een bepaalde weergave, zodat u een pixel-perfect ontwerp handmatig in code of in Interface Builder of opmaakeditor kunt implementeren.
Sympli converteert pixels in ontwerpmodellen automatisch naar punten, evenals andere parameters, zoals vullingen, schaduwen en randen, naar Android- of iOS-specifieke voorwaarden en eenheden.
In het geval dat de mockup in Sketch is gemaakt, geeft de Sympli-plugin de resizingregels weer die worden toegepast op widgets in Sketch, zodat ontwikkelaars de juiste beperkingswaarden kunnen instellen.
Een van de belangrijkste functies van Sympli voor ontwikkelaars is de mogelijkheid om eenvoudig weergaven van een ontwerp naar een Android XML- of iOS Storyboard-bestand te slepen. Sympli zorgt voor veel gedoe bij het maken van interfaces door uw weergaven exact zo te plaatsen en te dimensioneren als ze in het oorspronkelijke ontwerp voorkomen. Daarnaast kan Sympli ook vele andere kenmerken configureren, zoals achtergrondkleur en aangepaste lettertypen voor tekstweergaven.
Als u styling wilt toepassen op de bestaande weergave in Interface Builder in Xcode, drukt u op de knop "Shift" om het ontwerpelement in het venster slepen en neerzetten.
Als u een stijlcode wilt genereren voor de weergaven die op programmatische wijze zijn gemaakt, sleept u de muisaanwijzer naar de code van uw controller met de rechtermuisknop ingedrukt.
Vanaf hier hoeft u alleen maar de beperkingen van uw weergaven aan te passen, zodat deze kunnen worden aangepast aan uw verwachtingen op apparaten met verschillende schermformaten. Voor iOS betekent dit het toevoegen van beperkingen voor de automatische lay-out en voor Android zou dit betekenen dat de weergaven in de juiste indeling voor uw ontwerp moeten worden geconfigureerd.
Naast het genereren van stijlcodes voor standaardweergaven, helpt Sympli's plug-in voor Xcode ontwikkelaars met het maken van aangepaste besturingselementen op basis van de vectorgegevens van ontwerpmodel.
Selecteer een vectorvorm in de mockup en druk op de knop "Snippet" naast de naam van een laag in het detailvenster. Dit opent een pop-upvenster met Swift-code dat op dezelfde manier tekent als het programmatisch was ontworpen. Er is ook een handige optie om een Xcode Playground-ready code te kopiëren om door te gaan met het bouwen van een aangepaste weergave met een live preview van de speelplaats meteen.
Dit is uitermate handig voor alle toepassingen die handmatig tekenen van weergaven op het scherm vereisen.
Zolang alles door de ontwerper correct is geconfigureerd en geüpload, kan Sympli zorgdragen voor het importeren van afbeeldingen en aangepaste lettertypen die in het ontwerp zijn gebruikt. Bij het importeren vraagt Sympli de ontwerper om de afbeelding of het lettertype een naam te geven volgens de praktische tips van het platform. Bijvoorbeeld als een afbeelding is gebeld Afbeelding 1 wordt geüpload naar een Android-project, Sympli vraagt de ontwerper om de naam ervan te wijzigen image_1. Dit zorgt ervoor dat u geen tijd hoeft te verspillen aan het hernoemen van bestanden, zodat ze gemakkelijk kunnen worden geladen. Daarnaast kunnen ontwikkelaars regels voor het hernoemen maken, zodat ze telkens worden toegepast als de mockup is bijgewerkt.
In zowel de Xcode- als Android Studio-plug-ins, zal het klikken op de onderstaande knop bij het bekijken van de afbeeldingen of lettertypen in een ontwerp deze in uw project importeren.
Sympli is erg intelligent over het importeren van assets. Het zal afbeeldingen in uw activacatalogi plaatsen op iOS en in de bronnenmap van uw project op Android; het maakt zelfs geschaalde versies voor verschillende apparaten automatisch.
Notitie: The Sympli heeft aangekondigd binnenkort een optie voor zowel de Android Studio- als Xcode-plug-ins toe te voegen om vectoractiva (PDF voor iOS en VectorDrawable) te exporteren vanuit elke vectorlaag in de mockup.
Sympli maakt standaard automatische synchronisatie mogelijk voor het ontwerp van uw project in zowel de Xcode- als de Android Studio-plug-ins. Dit betekent dat, zelfs als u werkt, als de ontwerper enkele wijzigingen aanbrengt en deze uploadt naar Sympli, het nieuwe ontwerp onmiddellijk beschikbaar zal zijn in Xcode en Android Studio.
Wanneer er wijzigingen in een ontwerp worden aangebracht, downloadt Sympli automatisch de nieuwste versie van het ontwerp en ontvangt u een melding van de update. Dit zorgt ervoor dat u nooit handmatig hoeft te controleren of u met de nieuwste ontwerpen werkt en dat het ook niet nodig is dat de ontwerper u op de hoogte stelt wanneer deze wijzigingen heeft aangebracht.
Naast het automatisch downloaden van de meest recente exemplaren van ontwerpen voor uw project, maakt Sympli het ook erg gemakkelijk om eerdere versies van elk ontwerp te bekijken. Zowel in de IDE-plug-ins als in de web-app van Sympli kun je heel gemakkelijk naar eerdere versies van elk ontwerp gaan.
Dit kan met name handig zijn als u niet zeker weet welke wijzigingen in de nieuwste versie van een specifiek ontwerp zijn aangebracht. In de web-app van Sympli kunt u eenvoudig tussen verschillende versies van hetzelfde ontwerp tikken om te zien welke wijzigingen zijn doorgevoerd:
Ten slotte kan deze achterstand van eerdere versies ook zeer nuttig zijn als voor een revisie van uw app een ouder ontwerp moet worden gebruikt. Vermijd het gedoe om in een e-mail een oud bestand in uw downloads te vinden, met Sympli kunt u eenvoudig een versie selecteren uit een eenvoudige vervolgkeuzelijst in de IDE-plug-in:
Sympli Webapp biedt een wijzigingsbrowser waarmee u twee willekeurige versies van de ontwerpmockup visueel kunt vergelijken en de wijzigingen naast elkaar kunt bekijken. Dit maakt toevoegingen, verwijderingen en andere updates onmiddellijk duidelijk voor het oog, waardoor de productiviteit van de teams hierdoor toeneemt. Niet alleen dat, ontwikkelaars kunnen de wijzigingen ook bekijken op propertyniveau, bijvoorbeeld als een kleur iets verandert of als een rand 1px dikker wordt.
Voor elke mockup die meerdere keren is geüpload naar Sympli, verschijnt er een knop 'Wijzigingen doorbladeren' in een bovenste balk waarmee een zij-aan-zij wijzigingsbrowser wordt geopend. Selecteer mockup-versies die u wilt vergelijken en klik op de gemarkeerde gebieden om de werkelijke wijzigingen te bekijken.
6. Samenvatting van het project
Zowel de Sympli-webapp als de IDE-plug-ins kunnen u een Samenvatting voor elk project. In dit overzichtsscherm ziet u alle kleuren en lettertypen die in het hele project zijn gebruikt. Dit kan erg handig zijn als u de details van een specifieke kleur of lettertype moet weten en niet helemaal zeker bent van het ontwerp waarin die bron wordt gebruikt. Het kan ook worden gebruikt als een altijd beschikbare referentie bij het ontwikkelen van uw app als u u moet een exacte kleur of lettertype gebruiken op een plaats waar u geen ontwerp heeft gekregen.
Zoals u kunt zien, maakt Sympli het veel gemakkelijker om een app te ontwikkelen op basis van interfaceontwerpen die door iemand anders zijn gemaakt. Sympli zorgt voor veel handmatig werk bij het converteren van PSD's of Sketch-bestanden naar een Storyboard voor iOS of een XML voor Android. Deze tijd die is bespaard omdat Sympli productiever kan worden gebruikt, kunt u bijvoorbeeld uw tijd aan daadwerkelijke functionaliteit besteden in plaats van het moeizaam kopiëren van kleurcodes en afbeeldingen!
Als u meer wilt weten over Sympli of het zelf wilt proberen, ga dan naar hun website en bekijk enkele van hun geweldige videozelfstudies over het installeren en gebruiken van de Xcode- en Android Studio-plug-ins.
Laat zoals altijd uw opmerkingen en feedback achter in de opmerkingen hieronder.
Accentsconagua