A carousel slider is a great way to display multiple pieces of content in a single area on your website. Figma makes it easy to create a carousel slider with its ‘Component’ and ‘Interaction details’ features. Here’s how you do it:
1. Upload the images to be used for your carousel in Figma.
2. Align the images properly with consistent spacing between them.
3. Select all the images and convert them to one frame. To do this, right-click on the selected images and select the ‘Frame selection‘ option from the menu that will appear.
4. Once the frame is created, you can then rename it. To do this, double-click on the frame layer in the ‘Layers‘ section and type in your frame’s new name.
5. Resize your frame. You can do this by placing your cursor on the right-end side. From there, click and drag toward the other side until you hit the first image’s edge.
6. The frame should now look like this. After that, tick the checkbox of the ‘Clip content‘ section located under the ‘Design‘ tab.
7. Once the ‘Clip content’ is enabled, the other images should not be visible anymore.
8. Next is to create copies of the frame.
9. From there, select the second frame and uncheck the checkbox of the ‘Clip content‘ section. This will show the other two images.
10. Select all images in the second frame and move them in such a way that the second image takes the place of the first image in the frame.
11. The second image should now be placed within the frame.
12. Once done, select the second frame and tick the checkbox of the ‘Clip content‘ section.
13. Repeat procedures 9 to 12 for the other frames.
14. Once done, select all frames and go to the top menu and select the ‘Create component set‘ option.
15. Next is to select the ‘Prototype‘ tab.
16. Connect the first frame to the second frame. You can do this by hovering your cursor over the frame and clicking the plus icon that will appear, then dragging and connecting it to the other frame.
17. In the ‘Interaction details‘ window that will appear, select the ‘After delay‘ option and set the duration to ‘1000ms‘. In the ‘Animation’ section, select the ‘Smart animate‘ option and set the duration to ‘500ms‘.
18. Do the same for the other connections. Below is a guide for the other connections to be done and the image shows the final connections.
Connection 1: Frame 1 to Frame 2
Connection 2: Frame 2 to Frame 3
Connection 3: Frame 3 to Frame 1
19. Once done with connections, go to the frame where you want to insert the carousel slider. Select the frame element where the carousel will be placed.
20. In the left menu, go to the ‘Assets‘ tab and select the component you just created and drag it into the frame where it will be placed.
21. Once done, click on the ‘Play‘ icon to see a preview of your carousel slider in action!
That’s it! You’ve now successfully created a carousel slider in Figma.
Conclusion:
Creating a carousel slider in Figma is easy with their built-in Carousel component. Simply upload your images then arrange them properly. From there, convert them into one frame and make sure to tick the checkbox of the ‘Clip content’ section. Once done, create copies of the frame depending on the number of images you have. Then, in each frame, make the other images take the place of the first image. Once done, select the ‘Create component set’ and set up your prototype connections. When finished setting up, place the component in the frame where you want it to appear. You can find the component in the ‘Assets’ tab on the left menu. You can then see a preview of your carousel slider in action by clicking on the ‘Play’ icon at the top.
