Gebruik Adobe XD om micro-interacties te maken

Feb 1, 2026

Procedures

(Afbeelding Credit: Adobe)

Adobe XD kan helpen met prototyping - een van de belangrijkste processen in de Design Life Cycle, die een vitale rol speelt in ontwikkeling door ontwerpers en dev-teams met workflow-onderhoud te helpen. Er zijn onlangs een aantal grote veranderingen in het prototypinglandschap geweest: ontwerpers zijn verwend voor de keuze.

Net als vele andere disciplines is er geen enkele ontwerp- en prototyping-tool die alles kan bereiken. Verschillende fasen vereisen een unieke reeks gereedschappen. Voorbij zijn de dagen waarop ontwerpers alleen op Photoshop en Sketch raakten. Hoewel ze geweldige UI-ontwerphulpmiddelen zijn, hebben ze niet de capaciteiten voor snelle gebruikersstromen en draadframes (zie onze top Wireframe-tools Voor meer wireframing-opties).

Nu met het groeiende aantal interacties in ontwerpen - zoals animaties, gebaren en spraakbediening - het is moeilijk om een tool te vinden die al deze prototypingmogelijkheden kan bereiken en nog steeds dingen eenvoudig kan houden. Codering is een manier om deze interacties te creëren, maar het is tijdrovend. Gelukkig is Adobe XD bij de redding gekomen door een update af te geven aan zijn prototyping-tool met een handige functie genaamd 'Auto Animate'. Het is veruit de grootste toevoeging aan de krachtige toolset.

Ontvang Adobe Creative Cloud

Het idee hier is eenvoudig: Auto-animate stelt ontwerpers in staat om interactieve prototypen met meeslepende animaties te bouwen door eenvoudig een artboard te dupliceren of de eigenschappen van een object te wijzigen. Deze eigenschappen kunnen alles zijn, zoals de dimensies, positie van x en y, dekking, rotatie. Eerder bood Adobe XD basisinteracties zoals glijden, duwen en oplossen.

Met de toevoeging van de nieuwe functies, kunnen ontwerpers gemakkelijk op beweging gebaseerde animaties creëren, die op zijn beurt de gebruiker zullen helpen om mentale modellen van informatiestroom te creëren wanneer ze tussen meerdere schermen navigeren. Dit kan ook worden gebruikt om visuele hiërarchieën, CTA's of berichten te maken die tijdelijk in of uit het scherm vervagen.

In dit artikel zal ik uitleggen hoe u eenvoudige micro-animaties maakt met behulp van deze nieuwe Auto Animate-functie van Adobe XD. Voordat we beginnen, zijn er een paar dingen om te overwegen over hoe objecten moeten worden afgehandeld voor auto-animatie:

Wanneer een object of element niet op het bestemmingskudboard staat, vervaagt het meestal wanneer een voorvertoning
Wanneer een element niet aanwezig is in het eerste artboard, heeft het de neiging om te vervagen in
Draad altijd de artboards wanneer u in de prototype-modus bent, die de interacties zal creëren
Voor het maken van animaties, zorg er altijd voor dat objecten en elementen bijpassende namen in de lagen hebben en ook de naam van de groep waar ze in zijn

Maak een staat wijzigen met Auto Animate

Adobe XD tutorial — Het klinkt misschien eenvoudig, maar je moet beginnen met twee vormen (Beeldkrediet: Vamsi Batchu)

Laten we beginnen met het maken van een eenvoudig voorbeeld van staatsverandering met Auto Animate. In dit voorbeeld zijn de eigenschappen die veranderen zijn breedte, lengte en kleur. Voor alle auto-animate-overgangen heeft u meer dan twee artboards nodig.

Teken op het eerste artboard een vorm - in ons voorbeeld is het een groene rechthoek van 500px x 200px. Dupliceer dit artboard en selecteer de rechthoek op het tweede artboard. We moeten de eigenschappen van de rechthoek aanpassen door de breedte tot 1000 en de hoogte tot 500 te vergroten. U kunt ook verdere aanpassingen uitvoeren, zoals het wijzigen van de dekking tot 50% of het roze van de kleur maken.

Klik nu op het tabblad Prototype in de linkerbovenhoek. Selecteer het eerste artboard en verbind het met de pijl naar het tweede artboard. Wanneer u dit doet, is er een tabblad Interacties aan de rechterkant van de app die kan worden gebruikt om parameters zoals trigger, actie, bestemming en versoepeling in te stellen. Elke parameter kan worden aangepast aan uw behoeften. Er zijn vijf soorten trigger - inclusief tap, slepen en getimed - die de animatie initiëren.

Stel het tabblad Actie in op Auto Animate en omdat er slechts twee artboards in ons voorbeeld zijn, stelt u het tabblad Bestemming in op Artboard 2. Er zijn ook meerdere soepele overgangen die kunnen worden gekozen en getimed. Klik op het pictogram Play in de rechterbovenhoek om Auto Animate te zien Doe zijn magie en animeer de rechthoek. Wanneer er meer dan twee elementen zijn die tegelijkertijd moeten worden gewijzigd, zorg er dan voor dat de namen van deze elementen hetzelfde zijn in beide artboards. Dit zal de toepassing informeren dat deze twee elementen geanimeerd moeten zijn.

Vouw de kaarten uit

Laten we nu verder gaan met een voorbeeld met meer interactiviteit en een die meerdere elementen bevat. Laten we beginnen met het maken van het eerste artboard hiervoor, bestaande uit een kaart. De kaart heeft elementen zoals een koptekst, beschrijving en een koppeling bij de geschiedenis van de onderste leesweergave. Naast de link, is er een pijlpictogram naar beneden gericht. Wanneer de gebruiker op de link klikt, wordt de kaart geopend als een lade om eerdere inzendingen te tonen. Aangezien dit gebeurt op de functie KLIK / TAP, mogen de vorige inzendingen niet in het eerste artboard worden gemaakt.

Vervolgens dupliceren we dit artboard en veranderen we een paar eigenschappen van de kaart. Het eerste om te doen is de hoogte van de rechthoekige kaart verhogen om het eruit te laten zien als een uitgebreide toestand. De koptekst en de onderstaande beschrijving moeten ongewijzigd zijn. Nu is het tijd om die vermeldingen toe te voegen die we eerder hebben genoemd.

Stel je voor dat er drie items voor de kaart zijn. Elke invoer heeft een invoernaam, invoerdatum en een knop zoals weergegeven in de hoofdafbeelding. U kunt één invoer maken en het twee keer dupliceren om een groep inzendingen te maken. Schik ze zoals weergegeven in de hoofdafbeelding en plaats de tekstverbinding voor History Text onder deze vermeldingen. Omdat het in een geëxpandeerde toestand is, draait u het pijlpictogram zodat deze naar boven wordt geconfronteerd. Dat is het. U hebt de opzet van de artboards voltooid.

Ga naar het eerste artboard om de animatie te maken en klik op het tabblad Prototype vanuit de linkerbovenhoek. Klik nu op de link Geschiedenis bekijken op het eerste artboard en sleep de koppeling van de prototype naar het tweede artboard. Dit maakt de Geschiedenis Bekijk de trigger. Wijzig de eigenschappen in het tabblad Interaction aan de rechterkant door de trekker in te stellen om te tikken en op te gaan met Auto Animate. Test het om de gladde lade-animatie te zien. Wijzigingen aanbrengen in de soeping optie in het tabblad Interaction als u vindt dat de animatie niet soepel genoeg is.

Maak Drag Animaties

Sleep is een van de meest voorkomende animaties als het gaat om mobiele interacties. Laten we een eenvoudig voorbeeld proberen met twee artboards. Voor het eerste artboard, begin met het maken van een cirkel van elke kleur en afmetingen. Maak nu een rechthoek met een breedte van 250px en een hoogte van 25px. Dupliceer acht keer deze rechthoek en handhaaft een ruimte van 20px tussen elk duplicaat, zodat het een stapel maakt. Plaats de cirkel bovenop de eerste rechthoek voordat u dit artboard dupliceert.

Er is niet veel meer te doen voor het tweede artboard. Verklein de kloof tussen elk van de gedupliceerde rechthoeken, zodat het voelt alsof het wordt gecomprimeerd. Let op het eerste artboard, plaats de cirkel bovenop de eerste rechthoek. De laatste stap is om het te prototeren door op het tabblad Prototype vanuit de linkerbovenhoek te klikken. Klik nu op de cirkel van het eerste artboard en maak het een trigger. Als de vorige voorbeelden, wijzigt u de eigenschappen in het tabblad Interaction aan de rechterkant door de trigger in te stellen om te slepen en actie naar Auto Animate. Wanneer u op de knop Afspelen klikt om een voorbeeld van de animatie te bekijken, kunt u een soepele actie zien alsof het blok wordt gecomprimeerd door de bol.

Maak oneindige loader-animaties

Een van de beste kenmerken van Adobe XD is dat Auto Animate tussen meerdere artboards kan worden toegepast. Om zo'n animatie te doen, moet u gewoon eenvoudig wijzigingen aanbrengen in een van de eigenschappen.

Laten we een laadanimatie creëren waarin een batterij wordt opgevuld. De sleutel tot het verkrijgen van deze perfect is om het eerste artboard goed te maken. Het eerste artboard heeft een batterijaanduiding zoals getoond in de afbeelding. Het kan worden gemaakt met behulp van rechthoekige vormen. Voor de werkelijke batterij in de tijdelijke aanduiding moet het eerste artboard leeg zijn (wat 0% vertegenwoordigt). Dupliceer dit artboard en maak een groene rechthoek met een hoogte van 50 px die perfect in de tijdelijke aanduiding past. Creëer vergelijkbare duplicaten zodat de hoogte van de batterij in het derde artboard met 50 px wordt verhoogd enzovoort. Ga door totdat het artboard volledig is gevuld.

Nu moeten we een oneindige lus tussen deze artboards maken, zodat het een synchrone laad-animatie creëert. Ga hiervoor naar de prototype-modus, klik op het eerste artboard en sleep de pijl van de prototype naar het tweede artboard. Wijzig de eigenschappen in het interactiepaneel door de trekker in de tijd in te stellen en vervolgens de vertraging in te stellen op 0 seconden, die op het tweede artboard worden geanimeerd wanneer u wordt bekeken. Voer dezelfde wijzigingen in alle artboards uit door de tweede te koppelen aan de derde enzovoort voordat u eindelijk het laatste artboard aan de eerste koppelt. We hebben alle artboards met succes gekoppeld om een oneindige lus te vormen. Wijzig de soeping- en duur-instellingen volgens uw vereiste om de lading gladder te maken.

Hoewel er tonnen variaties zijn die kunnen worden geprobeerd met Adobe XD, zijn de huidige mogelijkheden van de tool beperkt en worden ze nog steeds regelmatig bijgewerkt door het ontwikkelingsteam. Dus, in vergelijking met hulpmiddelen zoals principe, zou u kunnen voelen alsof XD een beperkte toolset heeft. Adobe heeft echter een uitstekende baan gedaan om het gereedschap eenvoudig te laten leren en te gebruiken. Het creëren van complexe interacties kan enige tijd en moeite kosten, maar ze zijn volledig haalbaar met de automatische animate-functie van XD. De sleutel is om de basisprincipes van bewegende objecten te begrijpen, deze te wijzigen, het toevoegen van lagen en het gebruik van triggers.

Dit artikel verscheen oorspronkelijk nummer 326 van netto- , 's werelds toonaangevende magazine voor webontwerpers en ontwikkelaars. Kopen probleem 326 of Abonneer hier

Lees verder:

40 Briljante WordPress-tutorials
11 Geweldige JavaScript-frameworks
Is neumorfisme echt 2020's heetste trend?

Gebruik Adobe XD om micro-interacties te maken

Maak een staat wijzigen met Auto Animate

Vouw de kaarten uit

Maak Drag Animaties

Maak oneindige loader-animaties

Procedures - Meest populaire artikelen

Hoe een wolf te tekenen

17 manieren om betere wezens te tekenen

Maak een gloeiend neon-teksteffect

Procreate tutorial: Nieuwe gereedschappen verkend

Verf een expressieve stilleven in acrylken

6 manieren om uw modellering te versnellen

Voorbereiden van illustratorafbeeldingen voor na effecten

Maak een meteoordouche in 3DS Max

Categorieën