De 8 beste funksjonene til Anima-appen alle designere bør bruke

En enhetlig design-til-kode-plattform som Anima kan hjelpe deg med å fremskynde utviklingsprosjekter for nettsteder og apper.

Anima er en design-til-kode plug-in for Figma, Adobe XD og Sketch. Det gjør det mulig for designere å lage high-fidelity-prototyper for mobilapper, landingssider eller nettsteder, og utviklere kan enkelt få responsive, rene og gjenbrukbare koder som også er produksjonsklare.

Denne artikkelen vil introdusere design- og kodingsfunksjonene til Anima-plugin-modulen. Fortsett å lese for å finne ut om denne appen vil være nyttig for UI/UX-designprosjektene dine.

1. Kodekonvertering

De Anima plug-in konverterer raskt visuelle design av mobilapper eller nettsteder til utviklervennlige koder. Du kan få koder på forskjellige utviklingsspråk som Vue, React, CSS, Sass og HTML. Kodene som Anima genererer er handlingsdyktige og ikke bare maskingenererte.

Utviklere kan navigere gjennom hele designkoden og gjøre endringer de ønsker. De kan også verifisere eventuelle endringer på samme arbeidsområde som Anima viser en grafisk representasjon av programmeringskoden.

Anima jobber med prosjekter for å tilby nye kodekonverteringsalternativer til Swift, ReactNative og Angular.

2. Lag High-Fidelity-prototyper

Anima-plugin-modulen hjelper deg med å lage high-fidelity-prototyper fra Adobe XD-, Figma- eller Sketch-designprosjektene dine. Du kan se og samhandle med en prototype som virkelig ligner den endelige nettsiden eller appen.

I slekt: De beste Figma-funksjonene alle designere bør bruke

Du kan inkludere bruddpunkter i designelementene dine og visualisere prototypen din i en live nettleservisning. Du kan gjøre justeringer mens du fortsetter å vurdere det endelige utseendet på skjermstørrelser på nettsider, nettbrett eller mobiler.

Plug-in-modulen tilbyr også innebygde effekter for å gjøre statiske design om til levende elementer. Du kan inkludere parallaksrulleanimasjon, rullegardinmenyer, sveveeffekter, skjermlastingsanimasjoner, videoer og mer.

Oppsummert lar den deg levere en designprototype som har alle nødvendige UI-komponenter og designelementer.

3. Eksporter Vue/React-koder for produksjon

Du kan enkelt eksportere Vue/React-koder for prototypedesignet for testing, pre-produksjon og produksjon. Du kan også raskt utvikle et kodebasert nettsted ved å bruke HTML/CSS-kodene til designprosjektet ditt.

Du vil kunne publisere nettstedet ditt direkte fra Figma, Sketch eller Adobe XD. Først, bruk Forhåndsvisning i nettleser funksjonalitet for å teste nettstedets utseende. Deretter bruker du bare Synkroniser til Anima funksjon for å koble prosjektet til Anima-plugin-dashbordet.

Fra Anima-prosjektets arbeidsområde kan du dele nettstedkoblingen med samarbeidspartnere eller klienter. Du kan også eksportere HTML/CSS-koder til nettsiden og publisere nettsiden i ditt eget domene eller dele koden med nettstedutvikleren for videre behandling.

4. Arbeid med materialdesign

Anima gir deg det helt nye Materialdesign bibliotek basert på de nyeste Google-retningslinjene. Du kan få tilgang til Material Design-biblioteket fra Widgetbibliotek av Anima-plugin-modulen for Adobe XD, Figma eller Sketch.

Anima-materialkomponenter er interaktive byggesteinselementer for å lage moderne og stilig brukergrensesnitt for nettsteder eller mobilapper. Du kan surfe fra en enorm liste over komponenter og ganske enkelt dra-og-slipp på designarbeidsområdet til Figma, Adobe XD eller Sketch.

Per nå består Anima Material Design-biblioteket av ni komponentmenyer: Button, Checkbox, Drop-down, FAB, Google Font Icon, Radio Button, Slider, Switch og Text Field.

I slekt: Hva er materiale du? Alt du trenger å vite om Androids nye utseende

Utvikleren hevder også at Anima er den eneste plattformen som tilbyr virkelig fungerende materialdesign som er live og responsive. Disse designelementene oversettes også automatisk til deres tilsvarende koder.

5. Kodebasert prototypetesting

Du bruker kanskje populære designverktøy som Adobe XD, Figma og Sketch for UI-designprosjekter. Imidlertid støtter de ikke kodebasert og live prototyping. Anima er en av de populære plugin-modulene som kan generere koden du trenger for prototypetesting.

Prototypetestverktøy som Fullstory og Hotjar krever følgende i designprosjektet ditt for vellykket brukertesting:

1. Responsive designelementer.
2. Interaktive knapper, rullegardinmenyer, tekstfelt og media.
3. En funksjonell kode som du kan laste opp i testverktøyene ovenfor.

Anima-plugin-modulen hjelper deg med å oppfylle alle kravene ovenfor for vellykket og uanstrengt testing av prototypen for nettstedet eller mobilappen din.

Anima lager visuelt samarbeid om design og utviklingsprosjekter enklere med sanntidskommentarer. Hvis du samarbeider med flere individer som prosjektledere, designere, utviklere og kunder, så er dette det perfekte kommunikasjonsmediet for alle.

I stedet for å beskrive arbeidsfremgangen din via e-post, skriv korte kommentarer rett inne i prosjektet. Samarbeidspartneren din kan se nøyaktig hva du prøver å formidle. Ved å visualisere scenariet på denne måten sparer alle tid og unngår potensielle konflikter.

7. Administrer og del komponenter

Animas samarbeidsarbeidsområde er det sentrale stedet hvor hvert medlem av prosjektet deler og administrerer komponenter eller eiendeler. Du kan enkelt unngå å kaste bort tid når du søker etter designkomponenter eller kodeelementer under prosjektmøter.

De Kodemodus deler arbeidsområdet inn i tre distinkte seksjoner. Du kan få tilgang Komponent og Stilguide fra den nedre menyen på skjermen. På menyen til høyre har du alle eiendelene dine i Eiendeler fanen.

På midten av skjermen har du sanntidsvisning av designet. Designere kan også bygge et tilpasset komponentbibliotek for utviklerens referanse.

8. Arbeid med direkteutkast

Mange mobilapp- og nettstedutviklingsprosjekter lider av tidstap på grunn av flere iterasjoner. I de fleste tilfeller er disse iterasjonene bare for mindre endringer som en designer eller utvikler kan gjøre på få minutter.

Din designer og utvikler kan jobbe med prosjektet kontinuerlig uten å miste tid. Designeren kan synkronisere den nye versjonen av prototypen fra Figma, Sketch eller Adobe XD til Anima-prosjektets dashbord. Derfra kan utvikleren få tilgang til det nye designet og fortsette med prosjektet. Dermed sparer du og teamet ditt dyrebar tid ved å jobbe med direkte utkast.

Design-til-kode gjort uanstrengt med Anima

De ovennevnte funksjonene tyder klart på at design-til-kode Anima-plugin-modulen vil fjerne flere flaskehalser som mange UI/UX-utviklingsprosjekter lider av. App- eller nettsteddesigneren og utvikleren din kan jobbe tett for å levere en fungerende prototype som ligner din visjon.

Glem bryet med klønete designoverleveringer, feilaktige designkoder og forsinkelser i å få en live nettside eller app. Du kan nå fokusere mer på de grafiske designelementene for å imponere målgruppen din.

11 grunnleggende designelementer og hvordan du bruker dem

Ny på grafisk design? Disse elementene er nøkkelen til å skape et tiltalende design.

Les Neste

Om forfatteren