Skip to main content
All CollectionsPopular Articles
Auto-Animate for Sketch, Adobe XD and Figma
Auto-Animate for Sketch, Adobe XD and Figma

Create Automatic Transitions Between Artboards, on Sketch, XD, and Figma

Avishay Cohen avatar
Written by Avishay Cohen
Updated over a week ago

Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Introducing Auto-Animate

Anima Auto-Animate enables you to connect two similar artboards and get a fluid animation between them as if you animated it yourself.

See it live: https://wndr.animaapp.io
Try it out yourself! Download Sketch File

How Does It Work?

Step 1. Create a design and duplicate the artboard.

Select the artboard and press Command + D.

Step 2. On the duplicated artboard, resize the Machu Picchu image to fit the entire artboard.

Important: Layers must keep the same names in both artboards in order to auto- animate correctly.

Resize Machu Picchu image

Step 3. Move elements to their end position

  • Move the text box to the lower-left corner

  • Slide down the Social symbol and Slider Ovals. (Make sure they do not slide outside the artboard).

  • Slide Facts (hidden) in from the right

Move elements to their end position

Step 4. Modify the elements’ properties

  • Change the white Rectangle opacity to 0%

  • Change the text color to white

  • Change the Social symbol and Slider Ovals opacity to 0%

  • Change Facts group opacity to 100%

Anima will calculate the position, color, and opacity changes and generate a fluid transition between the two artboards.

Modify the elements’ properties

Select the Read More button in the original artboard, then go to Anima Plugin>Prototype> Flow> Links and point the purple arrow towards destination artboard and click it.

Link Artboards

Change link type to Auto-Animate

Step 7. Select animation curve and duration

Select animation curve and duration

Step 8. Click Preview in Browser

Click Preview in Browser

Violà!

See it live: https://wndr.animaapp.io
Try it out yourself! Download Sketch File

❗️Please note:

  • Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.


Learn More

Did this answer your question?