Dat developers altijd op zoek zijn naar manieren om slimmer en efficiënter te werken, dat is ruim bekend. In deze blogpost vertellen we jullie meer over de open-source Figma plugin DevSync die uit de Coffee IT keuken komt. Met deze plugin is het gemakkelijk om multi-language in jouw app design toe te voegen. Benieuwd? Lees lekker door of check hier de Github documentatie. 

COFFEE IT PRESENTEERT: DEVSYNC

DevSync: Coffee IT Figma plugin

Een van de belangrijkste aspecten van een succesvolle mobiele app is het design. De gebruikerservaring (UX) en omgeving (UI) die perfect aansluiten op de behoefte van de gebruiker zorgen ervoor dat de interactie met de app toeneemt in duur en frequentie. Als het design van de app een duidelijk flow heeft, zal dit een groot positief effect hebben op de eindgebruiker. 

Bij Coffee IT werken onze designers met Figma; een wereldbekend platform waar designers gemakkelijk in kunnen ontwerpen, testen en documenteren. Daarnaast zijn developers ook altijd blij met designs die een duidelijke opzet en documentatie hebben, because developers ❤️ efficiency. Benieuwd hoe wij de workflow van de designers en developers hebben geoptimaliseerd? Lees verder over ons eigen plugin: DevSync.

First things first: regelmatig organiseren wij de Freaky Friday; een vrijdag waarin iedereen kan werken aan zijn eigen projecten. Dit keer heeft onze Lead Designer Tom samen met Duco (Hybrid developer) gewerkt aan een eigen Figma Plugin.

De werelden van developer en designer dichter bij elkaar

Het ontwikkelen van DevSync heeft twee doelen. Het eerste doel is om beide teams (iOS en Android) efficiënter met elkaar te laten samenwerken. Daarnaast willen wij met DevSync de werelden design en development dichter bij elkaar te brengen. 

Zo werkt de Figma Plugin (DevSync)

Efficiëntie is key bij het ontwikkelen van nieuwe applicaties. De basis hiervan is een consistent werkproces en goede communicatie tussen meerdere teams. Bij een native app werken twee teams aan een app. Dit komt omdat deze apps geprogrammeerd worden voor twee verschillende platformen (iOS en Android). 

Onderling stemmen de teams af welke keys (aangegeven met een ‘#’) er gekoppeld worden aan de objecten. Het is de bedoeling dat alle keys synchroon lopen binnen een project. Dit vereist onder de developers intensieve communicatie, afspraken en oplettendheid bij elke button of ander object die wordt toegevoegd. 

Met de DevSync plugin voor Figma worden alle keys van tevoren al gesynchroniseerd. Je ziet nu in Figma welke buttons allemaal hetzelfde zijn en welke tekst daarbij hoort. Om een paar voorbeelden te geven: 

DevSync figma plugin

Ook hiermee kun je (in de toekomst) direct de talen van de app aanpassen. Hierbij wordt gebruik gemaakt van een simpele if statement binnen de plugin.

Wat zijn de voordelen van DevSync

Doordat in de designfase van de app alle keys gedefinieerd worden hoeven de developers onderling niet meer af te stemmen welke keys bij welk object hoort. Dit is een groot voordeel wat we in de vorige paragraaf hebben besproken. 

Andere mogelijkheden zijn het koppelen van bepaalde stijlen of teksten met de keys. Wanneer er bijvoorbeeld een paragraaf wordt toegevoegd met de key: #create_house_subtext wordt er in de paragraaf meteen de tekst toegevoegd. Dit kan ook toegepast worden met de verschillende talen.

figma plugin

De toekomst van de Figma plugin DevSync

Nu ontdek je misschien al heel veel mogelijkheden met de DevSync plugin. Zo worden in de designfase alle keys bepaald en kan vanuit een punt de translate plaatsvinden. Hier blijft het niet bij, in de toekomst willen wij met DevSync ook de tekststijlen, kleurstijlen, afbeelding synchronisatie en Git synchronisatie beheren.

functies defsync plugin

Dit zorgt voor een enorme consistentie- en efficiëntie slag bij het ontwikkelen van mobiele apps. Daarnaast brengen wij ook de werelden van design en ontwikkeling dichter bij elkaar. Want hoe beter dit op elkaar afgestemd is hoe beter het eindresultaat van de app.

Wil jij mee ontwikkelen aan DevSync als stagiair

De plugin staat nog in de kinderschoenen. Er moeten nog flinke stappen gemaakt worden om dit project te realiseren. Hiervoor zijn goede developers nodig. Ben jij student, spreekt dit project jou aan en wil jij binnen een team van ervaren developers kennis opdoen? Dan zijn wij opzoek naar jou! Bekijk hier al onze beschikbare stageplekken.

Marketeer

NEEM CONTACT OP

Wil jij een app laten maken of graag meer weten? Neem vrijblijvend contact op en ik help je graag verder.

vrijblijvend adviesgesprek

CONTACT

Heb je een vraag? Neem vrijblijvend contact op en ik help je graag verder.

vrijblijvend adviesgesprek
Marketeer