Skip to main content

Hello everyone,


I’m currently trying to figure out the carousel thing on Figma for a school projet (trying to build an app).


I want to create a carousel where there’s an arrow which can be clicked on to check the next photos (I don’t want it to be a scrolling).


I’m trying with components and interactions but can’t find out how to do that…


Is there someone who tried it before and could enlighten me ?


Thank you in advance Figma Community 😊

There’s plenty of carousels to study shared with the community.

There’s a simple and education friendly one by @ssemenov here: Figma - Carousel | The carousel is a slideshow for cycling through a series of content which was made as an interact...


My personal observations on that file:



  1. On the carousel component you will find a gallery padding for each variant. Autolayout is unnecessary on them.

  2. Heavy use of autolayout comes down to personal preference, which I myself endorse, but having said that if you remove autolayout on the parent element of gallery padding then the gallery padding frame can be removed (the frame, not the contents).


@Emilie2 as @Klesus Mentioned — there are a lot of examples.

It can be though to keep auto layout if you need some more complex interactions and effects.


Here is a prototype I made today.


Feel free to use the file.

It’s hard to recreate all effects and keep Auto Layout.


But it does have:



  • Responsive Layout ↔️

  • Touch friendly navigation 🎉

  • Navigation by image dragging or tapping + dots + arrows ✅

  • It’s spinning in infinite loop 🔁


Haven’t tested everything so there might be some glitches — but it should work in principle.


Hope it helps.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


i wanted to learn how does the carousel of prime video can be designed searched multiple times but no luck. Can someone help me with it .

Thanks.


Hey @Pranabesh_Kumar, thanks for reaching out!


We’ve merged your topic with a similar existing one in the community.


The replies above may help with this, but there are other videos from YouTube that may help as well:



Redesigning Amazon Prime Video UI | Figma Tutorial|Redesigning Amazon Prime Video UI | Figma Tutorial


Reply