Anima

Make your prototypes and sites more interactive and impressive by adding a horizontal scroll effect to different sections of your design. Horizontal scroll is a great feature to use for a section containing many images, cards, or other sequential elements. Anima supports XD's native horizontal scroll option, and setting it up is simple! 

___________________________________________________________

Add the Carousel / Horizontal Scroll:

Once you've designed or inserted the relevant elements into your XD file, select them all, and click the horizontal Scroll Groups icon in XD's right side panel, or click ⇧⌘H, then drag the section into the relevant artboard.

1. Once you've designed or inserted the relevant elements into your XD file, select them all, and click the horizontal Scroll Groups icon in XD's right side panel, or click ⇧⌘H, then drag the section into the relevant artboard.

3. Repeat for all relevant sections, then <a href="https://support.animaapp.com/en/articles/6189376-how-to-sync-adobe-xd-design-to-anima">Preview</a><a href="https://support.animaapp.com/en/articles/6189376-how-to-sync-adobe-xd-design-to-anima"> and Sync</a> to your Anima project to see it live!

Once your project is good to go, you can go live with Anima's generated <a href="https://support.animaapp.com/en/articles/2632095-how-to-publish-a-website-with-anima">public link</a>, add your own <a href="https://support.animaapp.com/en/articles/2593821-add-a-custom-domain-to-your-website">custom domain</a> or <a href="https://support.animaapp.com/en/articles/6132960-how-to-convert-figma-design-to-html-react-or-vue-js">export</a> your code framework of choice!

Get involved in our <a href="https://forum.animaapp.com/" rel="nofollow noopener noreferrer" target="_blank">Anima Community Forum</a>! 😎

<a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>

Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>

<a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

- <a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>
- Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>
- <a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

<a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Anima for Adobe XD: How to Create a High Fidelity Prototype</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

- <a href="https://support.animaapp.com/en/articles/6189254-how-to-sync-figma-design-to-anima">Anima for Adobe XD: How to Create a High Fidelity Prototype</a> 
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

Enhance your design by using Adobe XD's native carousel or horizontal scroll feature

Add the Carousel / Horizontal Scroll:

Go Live or Export Code

Get involved in our Anima Community Forum! 😎

New to Anima?

Learn More