Adobe XD: Hoe de Auto-Animate-functie te gebruiken

Sep 14, 2025

Procedures

(Afbeelding Credit: Adobe)

Ondanks de late toegang tot het prototypingspel is Adobe XD een van de beste en snelste wireframing- en prototypingstools beschikbaar. Prototyping is een sleutelproces in de ontwerplevenscyclus, maar speelt ook een vitale rol in de ontwikkeling door ontwerpers en dev-teams met workflow-onderhoud te helpen.

Als ontwerpers hebben we vaak veel hulpmiddelen nodig om de verschillende stadia van de werkstroom van de gebruikerervaring te ontwerpen. Adobe wordt actief in het innoveren van een griffi-platformtool dat kan worden gebruikt voor het testen van ontwerpen, het maken van wireframes, het uitdelen van specs naar het Dev-team en ook samenwerkend ontwerpen (zie onze lijst van Wireframe-tools voor meer opties).

De Auto-Animate-functie betekent dat Adobe XD ook kan worden gebruikt om naadloze micro-interacties en animaties zoals gereedschappen zoals principe te maken. Dit helpt ontwerpers om rijke prototype-ervaringen te maken, van boodschappen, animaties voor mobiele carrousel, vooruitgangsindicatoren en meer. Het beste deel van deze functie is dat het eenvoudig is om te leren en uit te voeren.

In dit artikel zal ik uitleggen hoe u eenvoudige micro-animaties maakt met behulp van de Auto-Animate-functie. We zullen zowel gebaren op basis van gebaren en op tikken gebaseerde interacties bekijken.

Als je Adobe XD nog niet hebt, kijk dan hoe Download Adobe XD Post, en bekijk onze favoriet Adobe XD-plug-ins

01. Veeg gebaren om toe te voegen aan FAV of Verwijderen

Swipe-interacties zijn een van de meest gebruikte micro-interacties op mobiele apps. Laten we naar dit voorbeeld kijken naar een muziekafspeellijst. Voor het eerste artboard gaan we een afspeellijstscherm maken met vijf nummers erin. Elk nummer is een individuele kaart en in wezen wanneer elke kaart naar links wordt gevlekt, zou het het nummer van de afspeellijst moeten verwijderen. Wanneer een kaart rechts wordt gevlekt, moet het de song aan de wachtrij toevoegen.

Laten we aan de slag gaan en de eerste kaart maken. U kunt basisgegevens toevoegen, zoals de naam van het nummer, de naam van de artiest, de lengte van het nummer en de beoordeling. Groep nu al deze elementen in een enkele laag. Dupliceer het totdat vijf van de vergelijkbare kaarten worden gemaakt. U kunt ze bewerken op basis van uw smaak.

Voor de eerste kaart - C1 - we gaan een linkerwip toevoegen voor het verwijderen van actie. Laten we dus een klein vierkant maken met een rode achtergrond, voeg wat verwijderen tekst en een pictogram toe zoals weergegeven in de onderstaande schermafbeelding. Groep al deze items in een laag genaamd A1. Combineer nu C1 en A1 in een laag L - zodat A1 aan de rechterkant van C1 ligt.

02. Maak de tweede kaart

Voor de tweede kaart - C2 - we gaan op een vergelijkbare manier toevoegen aan wachtrij rechts-veegactie. Maak een groep A2 met pictogram, tekst en groene achtergrond. Voeg het toe aan de linkerkant van de groep C2 en maak een gecombineerde laag met de naam L2. Nu is het eerste artboard (S1) voltooid. Laten we het hele artboard tweemaal dupliceren, in twee staten - S2 en S3. We zullen S2 gebruiken voor het verwijderen van Swipe en S3 voor Toevoegen aan wachtrij Swipe. Om te doen, moeten we enkele wijzigingen aanbrengen voor elk van deze artboards. Hier zijn de instellingen voor beide swipes:

● S1 - Verander de dekking van A1 en A2 tot 0% en regeel L1, L2 zodat ze centraal zijn.

● S2 - Schik de L1-kaart zodat de rechterrand van L1 is uitgelijnd met de andere kaarten. Verander de dekking van A2 tot 0%.

● S3 - Schik de L2-kaart zodat de linkerrand van L2 is uitgelijnd met de andere kaarten. Verander de dekking van A1 tot 0%.

03. Animeer de artboards

Nu de artboards volledig zijn ingesteld, is de volgende stap om ze te animeren. U kunt dit doen door in de prototype-modus aan de linkerkant van het gereedschap te gaan. Nu op het Artboard S1, klik op de laag L1 en voeg een interactie toe aan de rechterkant van het gereedschap door de trigger in te stellen om te slepen, actie naar auto-animate en bestemming naar Artboard S2. U kunt ook versoepeling toevoegen op basis van uw voorkeuren. Test deze interactie door op de knop Afspelen aan de rechterbovenkant van het gereedschap te klikken. Klik op het S1-artboard op de laag L2 en voeg een vergelijkbare interactie toe met dezelfde instellingen, maar stel in dit geval de bestemming in op S3 in. Deze interactie zal de linker swipe maken.

04. Breid uw kaarten uit

De tweede interactie waar we naar kijken, wordt vaak gezien op de meeste apps en websites waar je een lijst of een catalogus van producten doormaakt en wanneer je op een van die klikt, wordt je op een nieuwe pagina opgenomen met meer details over het product . Auto-Animate maakt het super eenvoudig om dit soort interactie te animeren. Laten we voor dit voorbeeld beginnen met het maken van een productcataloguspagina. U kunt een product kiezen zoals bijvoorbeeld een mobiele telefoon (die ons voorbeeld zal zijn), kleding, enz. Voor het eerste artboard (S1), maak een kopbalk met een hamburgermenu en een profielpictogram.

05. Werk op afbeeldingen en details

Maak nu een koptekst-element met het aantal catalogusitems. Voor elk van de productkaarten gaan we één beeld, de naam van de telefoon, prijs en waarderingen. We kunnen deze kaarten C1 tot C6 noemen. De beste manier om dit te doen is om de eerste kaart (C1) te maken en vervolgens een verbazingwekkende functie van XD-herhaal raster te gebruiken, die is gevonden in de rechterbovenhoek van het gereedschapspaneel. Hierdoor kunt u met gemak items dupliceren, waardoor de uitlijning en afstand intact blijft. De opzet van dit artboard is voltooid. We gaan de tweede kaart animeren, dus het is belangrijk om de elementen van die kaart los te maken, zodat XD auto-animate kan uitvoeren.

06. Ontwerp het tweede artboard

Nu om aan het werk te gaan op het tweede artboard. Dupliceer de eerste artboard en verwijder kaarten C1, C3-C6. We gaan de bestaande kaart C2 gebruiken om deze pagina te bouwen, dus de namen van de lagen zijn hetzelfde. Breid eerst de achtergrond van de kaart uit zodat het de volledige pagina onder de kopbalk dekt. We kunnen nu de andere items regelen die we willen - het basisidee dat is dat het anders is dan hoe de kaart in de Artboard S1 was, want dat is wanneer u de overgang kunt zien. Laten we om die reden de naam van de mobiel oplopen tot 25px en het vet maken. Verhoog op dezelfde manier de grootte van de prijs en plaats deze onder de mobiele naam. Volgende is het belangrijkste deel - het beeld van de mobiele telefoon. Je moet de grootte aanzienlijk vergroten en het ook in het midden uitlijnen.

07. Pas de finishing aan

Om alles op te ruimen en het ontwerp af te ronden, regelt u de beoordelingen en de sterren onder alles en naar links. Aangezien dit artboard de gedetailleerde versie van het product vertegenwoordigt, kunt u nu aanvullende informatie over de telefoon zoals het geheugen opnemen, de beschikbare kleuren van de telefoon, accessoires die met de telefoon zijn gegeven, enzovoort, op basis van uw voorkeuren. Al het andere zal volgen terwijl je door het artboard scrol. U kunt het kopbalpictogram van de hamburger ook wijzigen, zodat de gebruiker teruggaat naar de vorige artboard S1. Vergeet niet om de naam van het pictogram te wijzigen dat overeenkomt met de pictogramnaam in het eerste artboard.

08. Maak de micro-interactie

Laten we nu naar de prototype-modus gaan om de micro-interactie te maken. Om dit te doen, selecteert u de kaart C2 in de Artboard S1 en sleept u de blauwe pijl naar de artikeldie S2. In het interactiepaneel aan de rechterkant, stel de trekker in als tik, actie als automatisch animaat en bestemming als S2. Voor soepelere interacties is het goed om met gemak uit te gaan voor het versoepelen en een tijd van 0,4 of 0,6 seconden. Klik op het pictogram van de achterpijl op Artboard S2 en sleep de pijl naar S1. U kunt hiervoor dezelfde instellingen gebruiken om deze consistent te maken. Klik nu op S1 en speel het prototype om de magie te zien. U zult een soepele animatie observeren wanneer de kaart C2 wordt getikt. Pas de versoepelingsinstellingen aan om de animatie gladder te maken.

09. Ga verder dan de basis

U hebt nu een basisidee van het maken van eenvoudige interacties. U kunt ook proberen Auto-animatie door de kleuren van de elementen, formaten en vormen te wijzigen om soepele overgangen tussen meerdere artboards te bekijken. Naast het tikken en dreggen van triggers, zijn er andere triggers die ontwerpers kunnen experimenteren met, zoals het gebruik van toetsenboardtoetsen en Gamepad-toetsen om prototypen op een bepaalde sleutelpik te trigeren. Er is ook een modus waarin u spraakprototypes voor Alexa, Siri enzovoort kunt maken en ontwerpen, waar u zinnen kunt toewijzen en ze spreekt om specifieke reacties te krijgen.

Lees verder:

De Beste website Builders
De Adobe XD-snelkoppelingen die u moet weten (maar waarschijnlijk niet)
Bouwen prototypen met Adobe XD

Adobe XD: Hoe de Auto-Animate-functie te gebruiken

01. Veeg gebaren om toe te voegen aan FAV of Verwijderen

02. Maak de tweede kaart

03. Animeer de artboards

04. Breid uw kaarten uit

05. Werk op afbeeldingen en details

06. Ontwerp het tweede artboard

07. Pas de finishing aan

08. Maak de micro-interactie

09. Ga verder dan de basis

Procedures - Meest populaire artikelen

Hoe HTML-code sneller te schrijven

Hoe vereenvoudigen van het maken van mixvorm in Maya

Een gelaagd parallax-effect op uw site maken

Spring Start Reageer Native met Expo

Colourise Greyscale Werk in Photoshop

Hoe codeert een Augmented Reality Marker

Toptips om uw handgetekende illustratietechnieken te verfijnen

De anatomie van karikatuur: 15 toptips

Categorieën