De 8 bedste funktioner i Anima-appen, som alle designere bør bruge

En samlet design-til-kode-platform som Anima kan hjælpe dig med at fremskynde websteds- og app-udviklingsprojekter.

Anima er et design-til-kode plug-in til Figma, Adobe XD og Sketch. Det gør det muligt for designere at skabe high-fidelity-prototyper til mobilapps, landingssider eller websteder, og udviklere kan nemt få responsive, rene og genbrugelige koder, der også er produktionsklare.

Denne artikel vil introducere design- og kodningsfunktionerne i Anima-plugin'et. Fortsæt med at læse for at finde ud af, om denne app vil være nyttig til dine UI/UX-designprojekter.

1. Kodekonvertering

Det Anima plug-in konverterer hurtigt visuelle design af mobilapps eller websteder til udviklervenlige koder. Du kan få koder på forskellige udviklingssprog som Vue, React, CSS, Sass og HTML. Koderne, som Anima genererer, er handlingsegnede og ikke kun maskingenererede.

Udviklere kan navigere gennem hele designkoden og foretage de ændringer, de ønsker. De kan også verificere eventuelle ændringer på det samme arbejdsområde, da Anima viser en grafisk repræsentation af programmeringskoden.

Anima arbejder på projekter for at tilbyde nye kodekonverteringsmuligheder til Swift, ReactNative og Angular.

2. Opret High-Fidelity-prototyper

Anima-plugin'et hjælper dig med at skabe high-fidelity-prototyper fra dine Adobe XD-, Figma- eller Sketch-designprojekter. Du kan se og interagere med en prototype, der virkelig ligner den endelige hjemmeside eller app.

Relaterede: De bedste Figma-funktioner, som alle designere bør bruge

Du kan inkorporere brudpunkter i dine designelementer og visualisere din prototype i en live browservisning. Du kan foretage justeringer, mens du bliver ved med at gennemgå det endelige udseende på websteds-, tablet- eller mobilskærmstørrelserne.

Plug-in'et tilbyder også indbyggede effekter til at omdanne statiske designs til levende elementer. Du kan inkludere parallakse-rulleanimation, rullemenuer, svæveeffekter, skærmindlæsningsanimationer, videoer og mere.

Sammenfattende giver det dig mulighed for at aflevere en designprototype, der har alle de nødvendige UI-komponenter og designaktiver.

3. Eksporter Vue/React-koder til produktion

Du kan uden besvær eksportere Vue/React-koder af prototypedesignet til test, præproduktion og produktion. Du kan også hurtigt udvikle en kodebaseret hjemmeside ved hjælp af HTML/CSS-koderne i dit designprojekt.

Du vil være i stand til at udgive dit websted direkte fra Figma, Sketch eller Adobe XD. Først skal du bruge Forhåndsvisning i browser funktionalitet til at teste hjemmesidens udseende. Så skal du blot bruge Synkroniser til Anima funktion for at forbinde projektet til dit Anima plug-in dashboard.

Fra Anima-projektets arbejdsområde kan du dele webstedslinket med samarbejdspartnere eller kunder. Du kan også eksportere HTML/CSS-koder for hjemmesiden og publicere hjemmesiden i dit eget domæne eller dele koden med hjemmesideudvikleren til videre behandling.

4. Arbejde med materialedesign

Anima bringer dig det helt nye Materiale Design bibliotek baseret på de seneste Google-retningslinjer. Du kan få adgang til Material Design-biblioteket fra Widget bibliotek af Anima-plugin til Adobe XD, Figma eller Sketch.

Anima-materialekomponenter er interaktive byggeklodselementer til at skabe moderne og stilfuld brugergrænseflade til websteder eller mobilapps. Du kan surfe fra en enorm liste af komponenter og blot trække-og-slip på dit design-arbejdsområde i Figma, Adobe XD eller Sketch.

Lige nu består Anima Material Design-biblioteket af ni komponentmenuer: Knap, Afkrydsningsfelt, Drop-down, FAB, Google Font Icon, Radio Button, Slider, Switch og Text Field.

Relaterede: Hvad er materiale dig? Alt du behøver at vide om Androids nye look

Udvikleren hævder også, at Anima er den eneste platform, der tilbyder virkeligt fungerende materialedesign, der er live og responsivt. Disse designelementer oversættes også automatisk til deres tilsvarende koder.

5. Kodebaseret prototypetest

Du bruger muligvis populære designværktøjer som Adobe XD, Figma og Sketch til UI-designprojekter. De understøtter dog ikke kodebaseret og live prototyping. Anima er et af de populære plug-ins, der kan generere den kode, du har brug for til prototypetest.

Prototypetestværktøjer som Fullstory og Hotjar kræver følgende i dit designprojekt for vellykket brugertest:

1. Responsive designelementer.
2. Interaktive knapper, rullemenuer, tekstfelter og medier.
3. En funktionel kode, som du kan uploade i ovenstående testværktøjer.

Anima plug-in hjælper dig med at opfylde alle ovenstående krav til en vellykket og ubesværet test af din hjemmeside eller mobilapp prototype.

Anima laver visuelt samarbejde om design og udviklingsprojekter nemmere med kommentarer i realtid. Hvis du samarbejder med flere personer som projektledere, designere, udviklere og kunder, så er dette det perfekte kommunikationsmedie for alle.

I stedet for at beskrive din arbejdsgang via e-mail, så skriv korte kommentarer direkte inde i projektet. Din samarbejdspartner kan se præcis, hvad du prøver at formidle. Ved at visualisere scenariet på denne måde sparer alle tid og undgår potentielle konflikter.

7. Administrer og del komponenter

Animas samarbejdsarbejdsområde er det centrale sted, hvor hvert medlem af projektet deler og administrerer komponenter eller aktiver. Du kan nemt undgå at spilde tid, når du søger efter designkomponenter eller kodeaktiver under projektmøder.

Det Kodetilstand opdeler arbejdsområdet i tre adskilte sektioner. Du kan få adgang Komponent og Styleguide fra den nederste menu på skærmen. I menuen til højre har du alle dine aktiver i Aktiver fanen.

På midten af ​​skærmen har du realtidsvisning af designet. Designere kan også bygge et brugerdefineret komponentbibliotek til udviklerens reference.

8. Arbejd på Live Drafts

Mange mobilapp- og webstedsudviklingsprojekter lider under tidstab på grund af flere iterationer. I de fleste tilfælde er disse iterationer blot til mindre ændringer, som en designer eller udvikler kan lave på få minutter.

Din designer og udvikler kan arbejde på projektet kontinuerligt uden at miste tid. Designeren kan synkronisere den nye version af prototypen fra Figma, Sketch eller Adobe XD til Anima-projektets dashboard. Derfra kan udvikleren få adgang til det nye design og fortsætte med projektet. Således sparer du og dit team kostbar tid ved at arbejde på udkast.

Design-til-kode lavet ubesværet med Anima

Ovennævnte funktioner tyder tydeligt på, at design-til-kode Anima plug-in vil fjerne flere flaskehalse, som mange UI/UX udviklingsprojekter lider under. Din app- eller hjemmesidedesigner og -udvikler kan arbejde tæt sammen for at levere en fungerende prototype, der ligner din vision.

Glem besværet med klodsede designoverdragelser, fejlbehæftede designkoder og forsinkelser i at få en live hjemmeside eller app. Du kan nu fokusere mere på de grafiske designelementer for at imponere din målgruppe.

11 grundlæggende designelementer og hvordan man bruger dem

Ny til grafisk design? Disse elementer er nøglen til at skabe et tiltalende design.

Læs Næste

Om forfatteren