Anima

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

___________________________________________________________

<a href="#h_9d4172b85d">How to add Carousel / Horizontal Scroll</a>

<a href="#h_40832944d4">How to Make your Carousel 'Clickable'</a>

<a href="#h_362bf788fb">Go Live or Export Code</a>

How to add Carousel / Horizontal Scroll:

Once you've designed or inserted the relevant elements into your Figma file, select them all, right click and select 'frame selection', then drag them all into the relevant main frame. 

1. Once you've designed or inserted the relevant elements into your Figma file, select them all, right click and select 'frame selection', then drag them all into the relevant main frame. 

2. Next, go to the Prototype tab in Figma and beneath Overflow scrolling, select Horizontal scrolling.

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

How to make your Carousel 'Clickable'

<a href="" rel="nofollow noopener noreferrer" target="_blank">Figma file</a>

Once your project is ready, 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>, connect your <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/6431384-create-responsive-design-in-figma">Create Responsive Designs in Figma</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/6431384-create-responsive-design-in-figma">Create Responsive Designs in Figma</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 Figma's native carousel or horizontal scroll feature

Skip to a section:

How to add Carousel / Horizontal Scroll

How to Make your Carousel 'Clickable'

Go Live or Export Code

How to add Carousel / Horizontal Scroll:

How to make your Carousel 'Clickable'

Go Live or Export Code

Try it on your own for free!

Get involved in our Anima Community Forum! 😎

New to Anima?

Learn More