Använd Adobe XD för att skapa Micro-interaktioner

Sep 13, 2025

Hur

(Bildkredit: Adobe)

Adobe XD kan hjälpa till med prototypning - en av de viktigaste processerna i designens livscykel, som spelar en viktig roll i utvecklingen genom att hjälpa designers och dev-team med underhåll av arbetsflödet. Det har varit några stora förändringar i prototyplandskapet nyligen: Designers är bortskämda för val.

Precis som många andra discipliner finns det inget enda design och prototyperverktyg som kan uppnå allt. Olika stadier kräver en unik uppsättning verktyg. Borta är de dagar då designers brukade förlita sig enbart på Photoshop och skiss. Även om de är stora UI-designverktyg, har de inte möjligheterna till snabba användarflöden och wireframes (se vår topp Wireframe Tools för fler trådlösa alternativ).

Nu med den växande mängden interaktioner i mönster - som animationer, gester och röstkontroll - det är svårt att hitta ett verktyg som kan uppnå alla dessa prototypa förmågor och fortfarande hålla sakerna enkla. Kodning är ett sätt att skapa dessa interaktioner men det är tidskrävande. Lyckligtvis har Adobe XD kommit till räddningen genom att släppa en uppdatering till sitt prototyperverktyg som innehåller en praktisk funktion som heter "Auto Animate". Det är överlägset det största tillägget till den kraftfulla verktyget.

Få Adobe Creative Cloud

Tanken här är enkel: Auto Animate gör det möjligt för designers att bygga interaktiva prototyper med immersiva animationer genom att helt enkelt duplicera ett ämne eller ändra objektets egenskaper. Dessa egenskaper kan vara något, såsom dimensionerna, positionen av X och Y, opacitet, rotation. Tidigare erbjöd Adobe XD grundläggande interaktioner som glidning, tryck och upplöses.

Med tillägget av de nya funktionerna kan designers enkelt skapa rörelsebaserade animationer, som i sin tur hjälper användaren att skapa mentala modeller av informationsflöde när de navigerar mellan flera skärmar. Detta kan också användas för att skapa visuella hierarkier, CTA eller meddelanden som försvinner i eller ut ur skärmen tillfälligt.

I den här artikeln kommer jag att förklara hur man skapar enkla mikroanimationer med hjälp av den här nya auto-animerade funktionen i Adobe XD. Innan vi börjar, det finns några saker att överväga om hur objekt måste hanteras för automatisk animering:

När ett objekt eller ett element inte är på destinationsartskylten, försvinner det vanligtvis när det är förhandsgranskat
När ett element inte är närvarande i den ursprungliga artikeln, tenderar det att blekna i
Lockera alltid tavlorna när du är i prototypläge, vilket kommer att skapa interaktionerna
För att skapa animeringar, se alltid till att objekt och element har matchande namn i lagren och även namnet på gruppen som de kan vara i

Gör en statlig ändring med Auto Animate

Adobe XD tutorial — Det kan låta enkelt, men du måste börja med två former (Bildkredit: Vamsi Batchu)

Låt oss börja med att göra ett enkelt exempel på statlig ändring med automatisk animera. I det här exemplet är de egenskaper som skulle förändras är bredd, höjd och färg. För alla automatiska övergångar behöver du mer än två tavlor.

På den ursprungliga artikeln, rita en form - i vårt exempel är det en grön rektangel på 500px x 200px. Duplicera det här kneplaret och välj rektangeln på den andra kordluckan. Vi måste ändra egenskaperna hos rektangeln genom att öka bredden till 1000 och höjden till 500. Du kan också utföra ytterligare modifieringar som att ändra opacitet till 50% eller göra färgrosa.

Klicka nu på fliken Prototyp på det övre vänstra hörnet. Välj den första artikeln och länka den med pilen till den andra artikeln. När du gör det finns det en interaktionsflik till höger om appen som kan användas för att ställa in parametrar som utlösare, åtgärd, destination och lättnad. Varje parameter kan anpassas efter dina behov. Det finns fem typer av trigger - inklusive kran, drag och tidsbestämd - som kommer att initiera animationen.

Ställ in fliken Åtgärd TILL AUTO ANIMATE och eftersom det bara finns två artboards i vårt exempel, ställ in fliken Destination till Artboard 2. Det finns också flera smidiga övergångar som kan väljas och tidsbestämda. Klicka på Play-ikonen längst upp till höger för att se Auto Animate Gör sin magi och animera rektangeln. När det finns mer än två element som behöver bytas samtidigt, se till att namnen på dessa element är desamma i båda tavlorna. Detta kommer att informera ansökan om att dessa två element måste animeras.

Expand Cards

Låt oss nu framgå till ett exempel med mer interaktivitet och en som innehåller flera element. Låt oss börja med att skapa det första artskummet för detta, bestående av ett kort. Kortet kommer att ha element som en rubrik, beskrivning och en länk på den nedre läsningsvyn. Bredvid länken kommer det att finnas en pilikon som vetter mot. När användaren klickar på länken öppnas kortet som en låda för att visa tidigare poster. Eftersom det händer på klick / tryckfunktionen, ska de tidigare posterna inte skapas i det första artskummet.

Därefter duplicerar vi det här kordlistan och ändrar några egenskaper på kortet. Det första att göra är att öka höjden på det rektangulära kortet för att få det att se ut som ett expanderat tillstånd. Huvudet och beskrivningen nedan bör vara oförändrad. Nu är det dags att lägga till de poster som vi nämnde tidigare.

Tänk dig att det finns tre poster för kortet. Varje post har ett inmatningsnamn, inmatningsdatum och en knapp som visas i huvudbilden. Du kan skapa en post och duplicera det två gånger för att skapa en grupp av poster. Ordna dem som visas i huvudbilden och placera länken Visa historik under dessa poster. Eftersom det är i ett expanderat tillstånd, rotera pilikonen så att den är vänd uppåt. Det är allt. Du har slutfört att du sätter upp tavlorna.

För att skapa animationen, gå till det första artskjortet och klicka på fliken Prototyp från det övre vänstra hörnet. Klicka nu på länken Visa historik på det första kordluckan och dra prototyplänken till den andra artskortet. Detta gör visningshistoriken länk avtryckaren. Ändra egenskaperna i fliken Interaktion till höger genom att ställa in utlösaren för att knacka och åtgärd till Auto-animera. Testa det för att se den smidiga lådanimationen. Gör ändringar i lättnadsalternativet på fliken Interaktion om du hittar animationen är inte tillräckligt smidig.

Göra drag animationer

Drag är en av de vanligaste animationerna när det gäller mobila interaktioner. Låt oss prova ett enkelt exempel med två tavlor. För det första artskortet, börja med att skapa en cirkel av vilken färg som helst och dimensioner. Skapa nu en rektangel med en bredd på 250px och en höjd av 25px. Duplicera denna rektangel åtta gånger, upprätthålla ett utrymme på 20px mellan varje duplikat, så att det skapar en stapel. Placera cirkeln ovanpå den första rektangeln innan du duplicerar det här kneplaret.

Det finns inte mycket kvar att göra för det andra artskummet. Minska klyftan mellan var och en av de duplicerade rektanglarna så det känns som att det är komprimerat. Liknande den första artikeln, placera cirkeln ovanpå den första rektangeln. Det sista steget är att prototypera det genom att klicka på fliken Prototyp från det övre vänstra hörnet. Klicka nu på cirkeln från det första artskummet och gör det till en utlösare. Änna precis som de tidigare exemplen, ändra egenskaperna i fliken Interaktion till höger genom att ställa in utlösaren för att dra och åtgärd för att animera automatiskt. När du klickar på Play-knappen för att förhandsgranska animationen, kan du se en smidig åtgärd som om blocket komprimeras av sfären.

Skapa oändliga lastare animeringar

En av de bästa funktionerna i Adobe XD är att Auto-animera kan appliceras mellan flera tavlor. För att göra en sådan animering behöver du bara göra enkla ändringar i en av fastigheterna.

Låt oss skapa en laddningsanimering där ett batteri fylls upp. Nyckeln till att få det här perfekt är att skapa den första artikelns ordentligt. Den första artikeln har en batterihållare som visas i bilden. Den kan skapas med hjälp av rektangulära former. För det faktiska batteriet inuti platshållaren ska den första artskylden vara tom (vilket representerar 0%). Duplicera detta ämne och skapa en grön rektangel med en 50px höjd som passar perfekt inuti platshållaren. Skapa liknande dubbletter så att batteriets höjd i det tredje artbrädet ökas med 50px och så vidare. Fortsätt tills tavlan är helt fylld.

Nu måste vi skapa en oändlig slinga mellan dessa tavlor så att den skapar en synkron laddningsanimering. För detta, gå till prototypläge, klicka på det första artskummet och dra prototyppilen till det andra artskummet. Ändra egenskaperna i interaktionspanelen, genom att ställa in utlösaren till tiden och sedan ställa in fördröjningen till 0 sekunder, vilket kommer att animera till det andra kordluckan när den förhandsgranskas. Utför samma förändringar i alla tavlor, genom att länka den andra till den tredje och så vidare innan du äntligen kopplar den sista artikelns första. Vi har framgångsrikt länkat alla tavlor för att bilda en oändlig slinga. Ändra inställningarna för lättnad och varaktighet enligt ditt krav för att göra lastningen mjukare.

Även om det finns massor av variationer som kan provas med Adobe XD, är verktygets nuvarande kapacitet begränsade och är fortfarande vanliga uppdaterade av utvecklingsgruppen. Så, jämfört med verktyg som princip, kan du känna dig som om XD har en begränsad verktygssats. Men Adobe har gjort ett utmärkt jobb att göra verktyget enkelt att lära och använda. Att skapa komplexa interaktioner kan ta lite tid och ansträngning men de är helt uppnåelig med XDs Auto Animate-funktion. Nyckeln är att förstå grunderna för rörliga föremål, ändra storlek på dem, lägga till lager och använda triggers.

Denna artikel uppträdde ursprungligen utgåva 326 av netto , världens ledande tidning för webbdesigners och utvecklare. köpa Utgåva 326 eller prenumerera här .

Läs mer:

40 briljanta wordpress tutorials
11 fantastiska javascript-ramar
Är Neumorphism verkligen 2020s hetaste trend?

Använd Adobe XD för att skapa Micro-interaktioner

Gör en statlig ändring med Auto Animate

Expand Cards

Göra drag animationer

Skapa oändliga lastare animeringar

Hur - Mest populära artiklar

Hur man redigerar en video på TIKTOK

Hur man testar reagerar webbplatser och appar

Hur man döljer din JavaScript-kod från View Source

10 Regler för att göra användarvänliga webbformulär

Hur man målar som en 1800-talsmästare

Bygga appar som fungerar offline

Hur man lägger till data till dina skissdesigner

10 Top Houdini Tutorials

Kategorier