Add fluid movement to your prototypes with this Adobe XD auto-animate tutorial. Get started with Adobe XD: [ Ссылка ]

Start from scratch, or download practice files [[ Ссылка ]] for a head start. Steps below.

Draw paths to animate:

1. Open an .xd document, or use ours (animated-prototype.xd).
2. Click the artboard name, then use alt (or option) + drag on your keyboard to duplicate the original artboard.

Tip: To animate objects in Adobe XD, the layers must have the same name. Duplicating an artboard also duplicates the layer names.

3. Double-click one of the wavy lines to convert it to a path. Drag each point to change the shape of the path. Repeat for each of the three wavy lines.
4. Duplicate the updated artboard and change the path of the wavy lines on the newest artboard. You should have a total of 3 artboards now.

Animate the paths:

1. Go to Prototype mode and click on the name of the 1st artboard to select it.
2. Drag a wire from the blue arrow to the 2nd artboard and choose the following settings:

- Trigger = Time
- Delay = 0s
- Action = Auto-Animate

3. Drag a wire from the 2nd artboard to the 3rd artboard. XD remembers the previous settings so you don’t have to change anything.
4. Drag a wire from the 3rd artboard back to the 1st to create a looping animation.
5. Choose Desktop Preview, Cmd+return or Ctrl+enter, to test your prototype.

That's it!

To learn, more visit our Adobe XD CC Tutorials page: [ Ссылка ]

Subscribe to Adobe Creative Cloud: [ Ссылка ]

Download Adobe Express: [ Ссылка ]

Learn More: [ Ссылка ]

About Adobe Creative Cloud:
Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Connect with Adobe Creative Cloud:
Twitter: [ Ссылка ]
LinkedIn: [ Ссылка ]
Facebook: [ Ссылка ]
Instagram: [ Ссылка ]

#AdobeXD

How to Use Auto-Animate for Prototypes in Adobe XD | Adobe Creative Cloud
[ Ссылка ]

свернуть