DEV Community

Cover image for Create a 3D Carousel Slider Animation in Figma: NFT Slideshow
Chidera Nwankwagu
Chidera Nwankwagu

Posted on

Create a 3D Carousel Slider Animation in Figma: NFT Slideshow

Introduction

Have you come across 3D carousel slider animations posted by some of your design influencers on Instagram and wondered how to create such animations? Or are you bored of designing boring sliders and want to make them more interactive?

In this tutorial, you will learn how to create a 3D carousel slider animation, similar to those made by your favorite design influencers, and how to make your sliders more interactive. We'll walk you through the steps of creating a 3D carousel slider animation in Figma for an NFT display.

By the end of this tutorial, you should be able to create something like this.

GIF: The final result

Prerequisites

To follow along, you will need:

  • The Figma application
  • Familiarity with creating components and variants in Figma
  • The Figma file

What’s in the Figma File?

We’ve set up the Figma file for you to follow along with this step-by-step tutorial. The file contains all the necessary assets for this tutorial, including four background designs to showcase the transitions between NFT slides and four NFTs that will change in size and opacity with each background.

Image: What's in the figma file

Step-by-Step Guide to Creating the 3D Carousel Slider

1. Setting up Frame 1

This frame will feature all four backgrounds and will be the foundation for the remaining frames.

Create a new frame and set the width to 5760 (4 times the width of a single background, 1440 pixels each) and height to 870.

Name this frame "Frame 1."

Add the four backgrounds (First BG, Second BG, Third BG, Fourth BG) inside Frame 1, aligning them from left to right in order.

Image: Adding the backgrounds to Frame 1

Go to the Layers Folder and ensure that the backgrounds are correctly ordered:

  • First BG
  • Second BG
  • Third BG
  • Fourth BG

Image: backgrounds in order in the layers folder

Select Frame 1, align all the backgrounds to the left using Alt+A, and ensure the children are vertically centered using Alt+V.

Image: Aligning the backgrounds

Now, adjust the width of Frame 1 to 1440. This will make the frame the same size as one background.

Gif: Adjusting the width of Frame 1

Setting the NFTs to fit Frame 1

Now, let’s prepare the NFTs to fit Frame 1.

Select the four NFTs (First NFT, Second NFT, Third NFT, Fourth NFT) and press Shift+A to create an Auto Layout.

Set the auto-layout settings to match this:

  • Width and Height: Hug content
  • Alignment: Horizontal
  • Space between items: 40 pixels

Image: NFTs in auto layout

Rename the auto-layout NFT to “Grouped NFTs” and customize each NFT to make the First NFT bigger than the rest. To achieve this, we are going to tweak the width, height, and opacity of each NFT:

  • First NFT: Width: 480, Height: 750, Opacity: 100%
  • Second NFT: Width: 193, Height: 300, Opacity: 50%
  • Third NFT: Width: 96, Height: 150, Opacity: 30%
  • Fourth NFT: Width: 48, Height: 75, Opacity: 20%

Image: Customize the size of each NFT for Frame 1

Align the Grouped NFTs to the bottom left.

Gif: Align the Grouped NFTs to the bottom left

Place the Grouped NFTs inside Frame 1 and ensure it’s the top layer (above the backgrounds).

Align the Grouped NFTs at the bottom of Frame 1, setting the left margin of the first NFT to 480 pixels from the left edge.

Image: Place the Grouped NFTs inside Frame 1

2. Setting up Frame 2

Duplicate Frame 1. The new duplicate is our Frame 2.

Make the First BG invisible to reveal the Second BG; This can be achieved by going to the layers folder, locating the First BG under Frame 2, and clicking the eye icon next to it.

Gif: Setting up Frame 2

Setting the NFTs to fit Frame 2

Adjust the sizes of the NFTs for Frame 2. We need to make the Second NFT bigger than the rest. To achieve this, adjust the width, height, and opacity of each NFT to fit this setting:

  • First NFT: Width: 192, Height: 300, Opacity: 50%
  • Second NFT: Width: 480, Height: 750, Opacity: 100%
  • Third NFT: Width: 192, Height: 300, Opacity: 50%
  • Fourth NFT: Width: 96, Height: 150, Opacity: 30%

Set the left margin of the Grouped NFTs in Frame 2 to 248 pixels.

Image: Setting the NFTs to fit Frame 2

3. Setting up Frame 3

Duplicate Frame 2. The new duplicate is our Frame 3.

Make the Second BG invisible, revealing the Third BG.

Gif: Setting up Frame 3

Setting the NFTs to fit Frame 3

Adjust the NFTs for this frame:

  • First NFT: Width: 96, Height: 150, Opacity: 30%
  • Second NFT: Width: 192, Height: 300, Opacity: 50%
  • Third NFT: Width: 480, Height: 750, Opacity: 100%
  • Fourth NFT: Width: 192, Height: 300, Opacity: 50%

Set the right margin of the Grouped NFTs in Frame 3 to 248 pixels.

Image: Setting the NFTs to fit Frame 3

4. Setting up Frame 4

Duplicate Frame 2. The new duplicate is our Frame 4.

Make the Third BG invisible, revealing the Fourth BG.

Gif: Setting up Frame 4

Setting the NFTs to fit Frame 4

Adjust the NFTs for this frame:

  • First NFT: Width: 48, Height: 75, Opacity: 20%
  • Second NFT: Width: 96, Height: 150, Opacity: 30%
  • Third NFT: Width: 192, Height: 300, Opacity: 50%
  • Fourth NFT: Width: 480, Height: 750, Opacity: 100%

Set the right margin of the Grouped NFTs in Frame 4 to 480 pixels.

Image: Setting the NFTs to fit Frame 4

5. Creating the Buttons

Let us create a button component with a hover effect variant. This will be used to navigate each frame.

Create a union of two rectangles with each rectangle having a width of 75 and a height of 18 (forming an arrow shape). Set the button color to #0A0A0A with 40% opacity.

Duplicate the union so you have two arrow shapes. Group them and name it “Button.”

Image: Creating the Buttons

Make it a component, create a variant and increase the variant opacity of the color to 80%.

Image: Making the button a component

Adding interaction to the button

Let us add a hover effect using mouse enter and mouse leave triggers with Figma prototype.

Connect the default button in the button component to its variant, Variant 2. Use the following settings for the interaction:

  • Trigger: Mouse enter
  • Animation: Smart animate
  • Curve: Ease in and out
  • Duration: 300ms

Image: Mouse enter interaction

Next, connect Variant 2 back to its default using the following settings for the interaction:

  • Trigger: Mouse leave
  • Animation: Smart animate
  • Curve: Slow
  • Duration: 300ms

Image: Mouse leave interaction

Framing the button

We need two sides of the button (left and right) for navigation and we need to put them in an auto layout so it will be easier to align them perfectly to each frame.

First of all, let us drag out our interactive button from the assets folder.

Gif: drag out our interactive button from the assets folder

Next, duplicate the button and flip the new duplicate horizontally. This way, we will have two buttons facing left and right.

Image: left and right button

Select both the left and right buttons. Press Shift + A to place them in an auto layout. Let’s name this auto layout “Grouped Buttons.”

Set the width of Grouped Buttons to 1440px and the horizontal padding to 80, ensuring that they are positioned on opposite ends of the screen (left and right).

Image: auto layout buttons

6. Positioning the Grouped Buttons in each Frame

Now that we have the left and right buttons in an auto layout frame, the next step is to place them in each frame.

Select the Grouped Buttons and align it to the vertical center of Frame 1.

Image: Positioning the Grouped Buttons in Frame 1

Now, simply copy the Grouped Buttons and place them in each frame (Frame 2, Frame 3, and Frame 4). Make sure it's vertically centered in each frame.

Image: Positioning the Grouped Buttons in the other Frames

7. Final Adjustments and Prototyping the Interaction

Now that we’ve completed the setup for the backgrounds, NFTs, and navigation buttons, we need to prototype the interactions that allow the user to click through the frames.

Go to Prototype Mode in Figma.

Select the button on the right in Frame 1 and link it to Frame 2. In the interaction details, set the animation:

  • Trigger: On click
  • Animation: Smart animate
  • Curve: Slow
  • Duration: 800ms

Image: Prototyping Frame 1 to Frame 2

Do the same for the button on the right in Frame 2, linking it back to Frame 1.

Image: Prototyping Frame 2 to Frame 3

Repeat this for each frame, linking the right button to the next frame and the left button to the previous frame:

  • Frame 2 right button → Frame 3.
  • Frame 3 left button → Frame 2.
  • Frame 3 right button → Frame 4.
  • Frame 4 left button → Frame 3.

Image: Repeat the prototype for each Frame

Previewing the Prototype

Once all of the interactions are connected, click the play button in the top-right corner to sample the prototype.

Test the buttons to ensure they navigate between the frames smoothly, with the NFT sizes and opacities changing as expected.

Side note: You can add text to each frame, as shown in the final prototype below.

GIF: The final result

Conclusion

We’ve now built an interactive NFT carousel that allows users to slide between different NFTs, with each frame highlighting a different NFT while changing the background and button interactions. You can now apply this technique.

Top comments (0)