Share
Laten we eens kijken naar Sympli; een samenwerkingsplatform voor ontwerpers en ontwikkelaars. Het werkt met Xcode, Android Studio, Sketch en Photoshop. In deze tutorial behandelen we het perspectief van de ontwerper. In een vervolgpost zien we hoe Sympli werkt vanuit het oogpunt van een ontwikkelaar.
Wanneer u een team aan een app-gebruikersinterface hebt (of het nu om een Android-, iOS- of HTML5-project gaat), wordt de overgangsfase van ontwerp naar code vaak rotsachtig, inefficiënt en soms een beetje pijnlijk..
Zodra een Photoshop- of Sketch-gebaseerd ontwerp is voltooid, wordt het meestal doorgestuurd naar het dev-team. Van daaruit blijft het dev-team over om beeldmateriaal te extraheren, dimensies te meten en handmatig de kleuren, lettertype-instellingen en tekstinhoud te achterhalen die in code moet worden vertaald. Als er wijzigingen in de originele ontwerpbestanden worden aangebracht, is het overbrengen van bijgewerkte documenten via Dropbox (of e-mail) traag, onhandig en moeilijk bij te houden.
Al deze stappen voegen veel tijd toe aan het ontwikkelingsproces en bovendien hebben codeerders toegang nodig tot ontwerp-apps die ze anders niet nodig zouden hebben. Dit betekent extra geld besteed aan softwarelicenties en aan het betalen voor de tijd besteed aan het handmatig afhandelen van taken die vallen in het "niemandsland" tussen ontwerpen en coderen.
Hier komt Sympli tussen om een oplossing voor te stellen. In plaats van ontwikkelaars deze tussenliggende stappen handmatig te laten afhandelen, wil Sympli het hele overgangsproces automatiseren. Zodra een ontwerper de gebruikersinterface heeft voltooid, exporteren ze deze naar Sympli, die vervolgens automatisch zorgt voor de voorbereiding van het item, het meten van de lay-outdimensie, het genereren van kleurenpalet, extractie van lettertype-instellingen en meer.
Ontwikkelaars kunnen dan vergeten dat Photoshop of Sketch bestaan, en in plaats daarvan ontwerpen bekijken via Sympli, waar alles wat ze nodig hebben om direct in de codeeractiviteiten te komen beschikbaar is.
Ontwerpers hoeven alleen de Sympli-plug-in te installeren voor Photoshop of Sketch, die beide beschikbaar zijn als gratis downloads:
https://sympli.io/downloads/webCoders hebben de optie om de plug-in te gebruiken voor Android Studio, de plug-in voor Xcode of de web-app van Sympli voor op HTML5 en CSS gebaseerde projecten. Deze drie zijn allemaal gratis te gebruiken voor een enkel project, dus als je wilt volgen terwijl we deze tutorial doorlopen, ga dan naar sympli.io en pak een account.
Dit artikel is het eerste in een tweedelige serie. We gaan eerst kijken naar de ontwerpkant van de vergelijking, die behandelt hoe u uw ontwerpdocumenten het beste kunt instellen en deze naar Sympli kunt exporteren. We zullen ons ook blijven concentreren op webgeoriënteerde codering, en bekijken hoe de Sympli-webapp werkt. In de tutorial die volgt op deze, zullen we Sympli gaan gebruiken met Android Studio en Xcode.
Laten we bij het allereerste begin beginnen: de Sympli-plug-in installeren in uw favoriete ontwerpsoftware.
Het eerste wat u moet doen, is naar de downloadpagina gaan en vervolgens de Sympli-plug-in voor uw gewenste ontwerp-app pakken en installeren; Sketch of Photoshop.
Na de installatie hebt u in Sketch toegang tot de plug-in onder Plug-ins> Sympli> Exporteren naar Sympli. In Photoshop vind je het onder Venster> Extensies> Sympli.
Houd er rekening mee dat wanneer u de plug-in de eerste keer uitvoert, u moet inloggen om communicatie met uw Sympli-account mogelijk te maken.
"Projecten" vormen de kern van het werken met Sympli. Elk project kan een aantal "ontwerpen" of schermen bevatten en u kunt meerdere bron-PSD- of Sketch-bestanden invoegen in één project als u kiest.
Projecten kunnen worden gemaakt voor Web, iOS of Android met elk 1 ×, 2 × en 3 × resoluties. Zoals eerder vermeld, zullen we ons in deze tutorial concentreren op internet, en er zal binnenkort een nieuwe tutorial verschijnen om te focussen op iOS- en Android-projecten.
U kunt een nieuw project online creëren via de Sympli "Projecten" -interface:
Als alternatief kunt u dit doen vanuit de projecten tabblad in Photoshop-plug-in:
Of klik in de Sketch-plug-in door op te klikken Maak een nieuw project vervolgens kiest u de gewenste opties:
Of u nu met Sketch of Photoshop werkt, de beste manier om ontwerpen voor te bereiden voor synchronisatie met Sympli is door gebruik te maken van tekengebieden. Elke afzonderlijke UI-mockup moet zich in zijn eigen tekengebied bevinden, bijvoorbeeld:
De reden hiervoor is dat na het exporteren naar Sympli (wat we later zullen bespreken) elk tekengebied apart wordt opgehaald en verwerkt. U kunt ze vervolgens afzonderlijk gebruiken om hun bedrijfsmiddelen en code-gerelateerde informatie te bemachtigen. Elk tekengebied zal zichtbaar zijn als een "ontwerp" in de Sympli-webinterface, zoals:
Sympli is ontwikkeld om op de hoogte te zijn van de schaalvereisten voor 1 ×, 2 × en 3 × resolutie. Het zal dingen doen zoals lay-outdimensies verdelen door twee of drie waar nodig, dus het is belangrijk om vooraf te weten welke schaalfactor u nodig hebt, zodat u de juiste resultaten krijgt.
Als u bijvoorbeeld een gebruikersinterface met een vergroting van 2 × ontwerpt voor de iPhone 6, die een schermgrootte van 375px bij 667px heeft, moet u ervoor zorgen dat uw tekengebieden elk twee keer zo groot zijn op 750px bij 1134px.
Wanneer u een 2 × -webproject naar Sympli exporteert, halveert het alle dimensies in uw lay-out, inclusief de uitvoer in gegenereerde CSS-code (we zullen later meer over CSS praten). Uw 750px bij 1134px-tekengebieden worden herkend als 375px bij 667px Sympli-ontwerpen met een resolutie van 2 ×, zoals afgebeeld in de linkerbenedenhoek van de onderstaande schermafbeelding.
Sympli haalt automatisch de benodigde assets voor u uit bij alle vereiste resoluties, maar u moet eerst aangeven welke delen van het ontwerp in afbeeldingen moeten worden omgezet. Het proces om dit te doen is een beetje anders tussen Sketch en Photoshop.
Selecteer in Sketch de laag of groep voor het element dat u als afbeelding wilt exporteren en klik op de Exporteerbaar maken + knop onderaan de rechterkolom.
De eerste keer dat u op de knop klikt, wordt een afbeelding met een resolutie van 1 × klaargemaakt voor export, dus u moet er extra keer op klikken voor extra resoluties zoals 2 ×, zoals hieronder te zien is.
Als u met Photoshop werkt, selecteert u de laag of groep van het item en vervolgens in de Sympli-invoegtoepassingen Assets Utility tabblad klikt Markeren als actief. Het voegt het voorvoegsel "AST:" toe aan de laag en markeert het als een actief. U kunt ook handmatig de naam van lagen wijzigen om dit voorvoegsel toe te voegen als u dat wilt.
Wanneer uw UI-ontwerp klaar is, selecteert u de artboard (s) die u wilt exporteren. Als u nog geen projectinstellingen hebt, kunt u dit nu doen via de Sympli-plug-in voor uw ontwerpsoftware. Als onderdeel van dit proces krijgt u de mogelijkheid om uw ontwerp meteen te synchroniseren / exporteren.
Als je al een project setup hebt, zorg er dan voor dat je de juiste in de Photoshop / Sketch plugin identificeert en druk dan op de corresponderende Synchroniseren of Synchroniseer nu knop.
Sympli besteedt even tijd aan het exporteren van afbeeldingen en het uploaden van uw ontwerpen. Zodra uw project is geëxporteerd, kunt u het bekijken op de pagina "Projecten" van Sympli. Hier kunt u elk ontwerp / tekengebied selecteren en er via de web-app naar toe gaan voor nadere inspectie.
Nadat het project is geëxporteerd, kan het worden overgedragen aan het ontwikkelaars-team. Bijdragers hebben toegang tot het project via een koppeling die rechtstreeks kan worden gekopieerd en gemaild vanuit de Sympli-webapp of via de plug-in in Sketch of Photoshop.
Tijdens het exportproces heeft Sympli alle items die u in uw bronontwerpdocument hebt gedefinieerd, voorbereid en geüpload. Deze activa kunnen in één keer worden gedownload via de Download alles knop in de Sympli-app, of individueel door op het grijze naar beneden wijzende pijlpictogram rechts van het item te drukken.
Elk activum kan worden gedownload als een bitmap (PNG) of een vector (SVG) bestand.
Wanneer ze worden gedownload als bitmaps, worden de afbeeldingen gedownload bij elk van de resoluties die zijn opgegeven tijdens de projectinstellingen, bijvoorbeeld 1 ×, 2 ×, 3 ×.
Eenmaal geëxporteerd naar Sympli, kunt u ook "mapping" gebruiken om assets van naam te veranderen. Het "mapping" -systeem onthoudt de oude naam van het activum en koppelt het aan het nieuwe item dat u hebt toegevoegd, dus als het bronbestand opnieuw geëxporteerd wordt, worden de assets op de juiste manier bijgewerkt maar behouden ze hun nieuwe naam.
In de web-app ziet u een kleine balk aan de linkerkant die u nuttige hulpmiddelen biedt.
Door het hulpmiddel voor lagen uit te vouwen krijgt u een volledige weergave van de lagen in uw originele brondocument. Dit is met name handig voor het selecteren van lagen die achter andere lagen kunnen worden verborgen en daarom moeilijk te selecteren zijn met een muis.
Het tweede hulpmiddel is een set van twee kruisende linialen waarvan u de draadkruis over de pagina kunt slepen om de afstand tussen de randen van de UI en het middelpunt van de liniaal te meten.
De derde tool biedt de mogelijkheid om opmerkingen toe te voegen waarmee u met uw team kunt communiceren. Activeer de reactietool, klik op een positie in het ontwerp, typ vervolgens uw bericht in en klik op Sturen.
Een van de functies die beschikbaar zijn in de web-app van Sympli is automatisch gegenereerde CSS. U zult waarschijnlijk uw eigen responsieve lay-outcode willen schrijven, aangezien Sympli's CSS pixel-perfect en absoluut gepositioneerd is, maar wanneer u vanuit Sketch-ontwerpen werkt, is er een aantal geweldige copy & paste-CSS gegenereerd voor zaken als verlopen, achtergronden, tekstinstellingen, schaduwen, randen enzovoorts.
Sta me toe om een paar snelle tips te delen die nuttig kunnen zijn bij het maken van UI-elementen die door Sympli in CSS moeten worden omgezet.
Sympli maakt het vrij eenvoudig om de grootte van verschillende ontwerpelementen te krijgen, evenals de afstand eromheen. Klik op een element in het ontwerp of selecteer het via het hulpmiddel "Lagen" en u zult zien dat linialen verschijnen met dimensieaflezingen zoals hieronder te zien:
Je krijgt de afmetingen van het element zelf en de afstand tot de randen en de buurtburen in de lay-out.
Wanneer u een willekeurig tekstelement selecteert, ziet u aan de rechterkant van de web-app een uitlezing met de lettertypefamilie, tekengrootte, uitlijning en tekstkleur. Je ziet ook code met al deze items in de automatisch gegenereerde CSS-sectie.
Onder het uitlezen is het ook mogelijk om op de knop met het label te klikken Kopiëren om de inhoud van het tekstitem te pakken, klaar om in de code geplakt te worden.
Als u het derde tabblad aan de rechterkant selecteert dat is gelabeld Aa u kunt alle fontfamilies zien die in het huidige ontwerp worden gebruikt.
Bovendien zijn alle lettertypen die in het totale project worden gebruikt zichtbaar in de Samenvatting sectie, waarover we binnenkort zullen praten.
Kleur wordt automatisch uit uw documenten gehaald en is toegankelijk in RGB- of Hexcode-vorm.
U kunt de gebruikte kleuren in elk element van uw ontwerp bekijken door erop te klikken om de informatie in het rechter paneel te selecteren.
U kunt ook een volledig kleurenpalet zien dat is gedetecteerd in uw ontwerp door ervoor te zorgen dat niets is geselecteerd en vervolgens op het tweede tabblad in het rechterpaneel te klikken met het druppelpictogram.
Net als bij lettertypen zijn alle kleuren in het hele project toegankelijk vanaf de Samenvatting Gebied. Laten we daar nu eens naar kijken.
Om het project te bereiken Samenvatting ga naar de bovenste pagina van het project en selecteer vervolgens de Samenvatting tab, gelegen achter de designs tab. Hier kunt u alle kleuren en lettertypen zien die gedurende het hele project worden gebruikt.
Deze selectie van kleuren en lettertypen kan worden opgeslagen in wat door Sympli wordt aangeduid als een "Brandbook". Brandbooks zijn vergelijkbaar met stijlgidsen, zodat u de kleuren en lettertypen bij bepaalde merken kunt volgen.
Als er wijzigingen in de brondocumenten moeten worden aangebracht, kan het toevoegen ervan aan het overeenkomstige Sympli-project op vrijwel dezelfde manier worden gedaan als bij de initiële export. Selecteer het artboard dat is gewijzigd en voer vervolgens het exportproces uit dat we eerder hebben beschreven.
Als u een ontwerp bekijkt via de Sympli-webapp wanneer een wijziging is geüpload, zal het de wijzigingen detecteren en u vragen om de bijgewerkte versie te openen.
Sympli, trouw aan zijn naam, lijkt inderdaad het samenwerkingsproces "van ontwerp naar af" te vereenvoudigen. Om meer inzicht te krijgen in wat Sympli doet en waarom het is gemaakt, bekijk deze presentatie van de oprichter, veteraan mobiele ontwikkelaar Max Ignatyev:
Houd de site in de gaten voor de volgende zelfstudie, waarin we zullen ingaan op het werken met de plug-ins van Sympli voor Android Studio en Xcode.
En als je Sympli zelf wilt proberen, ga dan naar sympli.io.
Accentsconagua