Create animation sequences using an Illustrator file in XD

[Preran]

The way Adobe XD handles Illustrator files is pure magic, allowing you to create animated sequences in no time. It would help a great deal to understand how Illustrator files are handled in XD before you proceed.

• You can open an Illustrator file directly from Adobe XD using File > Open. This is the most ideal way to import Illustrator files in XD without loss of fidelity.
• Now, in Adobe XD, open the Layers panel. Take a moment to marvel at how Adobe XD automatically created an artboard for the vector graphic. Do you see all the paths and groups associated with the graphic listed in the panel?
• Navigate through paths and groups in the Layers panel. The selected path or group is displayed in the Design view.
• Steer your eyes to the Properties panel where the properties of the selected path are displayed and available for editing.

Creating an animated sequence:

1. Select the artboard in the Layers panel. Use Ctrl+D/Cmd+D four times to create four instances of the artboard.
2. In each of the artboards, select paths and modify or move them using the Properties panel.  
3. In the Prototype mode, animate your artboards using time transitions as described in this article
4. Preview your prototype to see your animation in action.

Share your creations by replying to this post

We would love to see what you created after going through this tutorial. Publish your file and share the URL here by replying to this post. We will feature the best creations on our support handle @AdobeCare.

Vault ahead using this tutorial to create advanced animations in XD: