Een uniform ontwerp-naar-code platform zoals Anima kan u helpen om website- en app-ontwikkelingsprojecten te versnellen.
Anima is een ontwerp-naar-code plug-in voor Figma, Adobe XD en Sketch. Het stelt ontwerpers in staat om high-fidelity prototypes te maken voor mobiele apps, bestemmingspagina's of websites, en ontwikkelaars kunnen gemakkelijk responsieve, schone en herbruikbare codes krijgen die ook klaar zijn voor productie.
Dit artikel introduceert de ontwerp- en coderingsfuncties van de Anima-plug-in. Lees verder om erachter te komen of deze app nuttig zal zijn voor uw UI/UX-ontwerpprojecten.
1. Codeconversie
De Anima-plug-in converteert snel visuele ontwerpen van mobiele apps of websites naar ontwikkelaarsvriendelijke codes. U kunt codes krijgen in verschillende ontwikkeltalen zoals Vue, React, CSS, Sass en HTML. De codes die Anima genereert, zijn uitvoerbaar en niet alleen machinaal gegenereerd.
Ontwikkelaars kunnen door de volledige ontwerpcode navigeren en alle gewenste wijzigingen aanbrengen. Ze kunnen ook eventuele wijzigingen controleren op dezelfde werkruimte, aangezien Anima een grafische weergave van de programmeercode weergeeft.
Anima werkt aan projecten om nieuwe codeconversie-opties aan te bieden aan Swift, ReactNative en Angular.
2. High-Fidelity-prototypes maken
De Anima-plug-in helpt u bij het maken van high-fidelity-prototypes van uw Adobe XD-, Figma- of Sketch-ontwerpprojecten. U kunt een prototype zien en ermee werken dat echt lijkt op de uiteindelijke website of app.
Verwant: De beste Figma-functies die alle ontwerpers zouden moeten gebruiken
U kunt breekpunten in uw ontwerpelementen opnemen en uw prototype visualiseren in een live browserweergave. U kunt aanpassingen maken terwijl u het uiteindelijke uiterlijk op de schermformaten van de website, tablet of mobiel blijft bekijken.
De plug-in biedt ook ingebouwde effecten om statische ontwerpen om te zetten in live-elementen. U kunt parallax-scrollanimatie, vervolgkeuzemenu's, zweefeffecten, schermlaadanimaties, video's en meer opnemen.
Samenvattend kunt u hiermee een ontwerp-prototype afleveren dat alle benodigde UI-componenten en ontwerpmiddelen bevat.
3. Vue/React-codes exporteren voor productie
U kunt Vue/React-codes van het prototypeontwerp moeiteloos exporteren voor testen, preproductie en productie. U kunt ook snel een op code gebaseerde website ontwikkelen met behulp van de HTML/CSS-codes van uw ontwerpproject.
U kunt uw website rechtstreeks vanuit Figma, Sketch of Adobe XD publiceren. Gebruik eerst de Voorbeeld in browser functionaliteit om het uiterlijk van de website te testen. Gebruik dan gewoon de Synchroniseren met Anima functie om het project te verbinden met uw Anima plug-in dashboard.
Vanuit de werkruimte van het Anima-project kunt u de websitelink delen met medewerkers of klanten. U kunt ook HTML/CSS-codes van de website exporteren en de website in uw eigen domein publiceren of de code delen met de website-ontwikkelaar voor verdere verwerking.
4. Werken met materiaalontwerp
Anima brengt je het geheel nieuwe Materiaal ontwerp bibliotheek op basis van de nieuwste Google-richtlijnen. U hebt toegang tot de Material Design-bibliotheek vanuit de Widgetbibliotheek van de Anima-plug-in voor Adobe XD, Figma of Sketch.
Anima-materiaalcomponenten zijn interactieve bouwsteenelementen voor het creëren van een moderne en stijlvolle gebruikersinterface voor websites of mobiele apps. U kunt surfen vanuit een enorme lijst met componenten en eenvoudig slepen en neerzetten in uw ontwerpwerkruimte van Figma, Adobe XD of Sketch.
Vanaf nu bestaat de Anima Material Design-bibliotheek uit negen componentmenu's: Button, Checkbox, Drop-down, FAB, Google Font Icon, Radio Button, Slider, Switch en Text Field.
Verwant: Wat is materiële jij? Alles wat u moet weten over de nieuwe look van Android
De ontwikkelaar beweert ook dat Anima het enige platform is dat echt functionerende materiaalontwerpen biedt die live en responsief zijn. Deze ontwerpelementen vertalen zich ook automatisch naar de bijbehorende codes.
5. Op code gebaseerde prototypetests
Mogelijk gebruikt u populaire ontwerptools zoals Adobe XD, Figma en Sketch voor UI-ontwerpprojecten. Ze ondersteunen echter geen op code gebaseerde en live prototyping. Anima is een van de trending plug-ins die de code kan genereren die je nodig hebt voor het testen van prototypes.
Prototype-testtools zoals Fullstory en Hotjar vereisen het volgende in uw ontwerpproject voor succesvolle gebruikerstests:
- Responsieve ontwerpelementen.
- Interactieve knoppen, vervolgkeuzemenu's, tekstvelden en media.
- Een functionele code die u kunt uploaden in bovenstaande testtools.
De Anima plug-in helpt je te voldoen aan alle bovenstaande vereisten voor het succesvol en moeiteloos testen van het prototype van je website of mobiele app.
Anima maakt visuele samenwerking op ontwerp en ontwikkelingsprojecten gemakkelijker met realtime opmerkingen. Als u met meerdere personen samenwerkt, zoals projectmanagers, ontwerpers, ontwikkelaars en klanten, dan is dit de perfecte communicatiemedia voor iedereen.
In plaats van uw werkvoortgang via e-mail te beschrijven, kunt u korte opmerkingen rechtstreeks binnen het project schrijven. Uw medewerker kan precies zien wat u probeert over te brengen. Door het scenario op deze manier te visualiseren, bespaart iedereen tijd en vermijdt hij mogelijke conflicten.
7. Onderdelen beheren en delen
De collaboratieve werkruimte van Anima is de centrale plaats waar elk lid van het project componenten of activa deelt en beheert. U kunt gemakkelijk voorkomen dat u tijd verspilt aan het zoeken naar ontwerpcomponenten of code-assets tijdens projectvergaderingen.
De Codemodus: verdeelt de werkruimte in drie verschillende secties. U kunt toegang krijgen tot onderdeel en Stijlgids uit het onderste menu van het scherm. In het menu aan de rechterkant heb je al je activa in de Activa tabblad.
In het midden van het scherm heb je de realtime weergave van het ontwerp. Ontwerpers kunnen ook een bibliotheek met aangepaste componenten bouwen ter referentie van de ontwikkelaar.
8. Werken aan live concepten
Veel ontwikkelingsprojecten voor mobiele apps en websites lijden onder tijdverlies door meerdere iteraties. In de meeste gevallen zijn deze iteraties slechts voor kleine wijzigingen die een ontwerper of ontwikkelaar in enkele minuten kan aanbrengen.
Uw ontwerper en ontwikkelaar kunnen continu aan het project werken zonder tijd te verliezen. De ontwerper kan de nieuwe versie van het prototype van Figma, Sketch of Adobe XD synchroniseren met het Anima-projectdashboard. Van daaruit heeft de ontwikkelaar toegang tot het nieuwe ontwerp en kan hij doorgaan met het project. Zo besparen u en uw team kostbare tijd door aan live concepten te werken.
Design-to-Code moeiteloos gemaakt met Anima
De bovengenoemde functies suggereren duidelijk dat de Anima-plug-in van ontwerp naar code meerdere knelpunten zal wegnemen waar veel UI / UX-ontwikkelingsprojecten last van hebben. De ontwerper en ontwikkelaar van uw app of website kunnen nauw samenwerken om een werkend prototype te leveren dat overeenkomt met uw visie.
Vergeet het gedoe van onhandige ontwerpoverdrachten, gebrekkige ontwerpcodes en vertragingen bij het verkrijgen van een live website of app. U kunt zich nu meer concentreren op de grafische ontwerpelementen om indruk te maken op uw doelgroep.
Nieuw bij grafisch ontwerp? Deze elementen zijn essentieel voor het creëren van een aantrekkelijk ontwerp.
Lees volgende
- Creatief
- productiviteit
- Online tools
- App-ontwikkeling
- Webontwikkeling
Tamal is een freelance schrijver bij MakeUseOf. Na het opdoen van substantiële ervaring in technologie, financiën en business processen in zijn vorige baan bij een IT-adviesbureau, nam hij 3 jaar geleden het schrijven als een voltijds beroep over. Hoewel hij niet schrijft over productiviteit en het laatste technische nieuws, speelt hij graag Splinter Cell en bingewatcht hij Netflix/ Prime Video.
Abonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren