Figma Tutorial: Creating an Engaging Image Carousel Animation

in today's video we're going to create this image Carousel in figma my name is Jacqueline and this is Ikea designs before we get started be sure to like And subscribe for more content now let's get started press F and create your frame press R and create a rectangle inside the frame press T and create your text for the menu item of the navbar duplicate the first text and create another text repeat process so you have all your menu items [Music] select all the text Center align them and make sure they are evenly spaced duplicate the about us type shop now and press shift a to add an auto layout Center item in the auto layout and adjust the horizontal padding rename the auto layout and click on the fill to add background color then adjust the color [Music] create a simple text logo by typing the name of the brand and adjusting the fonts add an image to the center of the frame select the rectangle and change its color change the color of the navbar items from black to white [Music] press T and add a text duplicate the text and type another text select both text and increase their size [Music] duplicate the image layer and convert it to a solid [Applause] then mask the image using the solid shape rename the max group [Music] and move the second text layer behind the max group add the frame to the first text layer and rename it to text 1 then select clip content add a frame to the second text layer and rename it to text 2. make sure to check the clip content here too select the two text layers and the image and group them then rename the group to slide 1. duplicate the group and drag the duplicate out of the frame then replace the image in the duplicate and change the text behind the image to suit [Applause] increase the height of the frame by pressing down command whilst dragging the mouse downwards drag the second group onto the frame and change the color of the frame so that it can make the text visible duplicate the group once again and change the image with the second text layer [Music] process for the last time [Music] select all the groups and make sure they are evenly spaced duplicate the frame and move the grooves upwards thank you [Music] duplicate the frame once again I repeat the process [Music] repeats the duplicates one more time [Music] decrease the height of the last frame and change its background color change the background color of the third frame and the second frame as well [Music] in the first frame select the fourth and third group and drag it downwards then select the image in the second group and drag the image downward select the image mask and reduce its height select the first text and drag it towards the right then select the second text and drag it towards the left select both text and turn off the opacity repeat this process for the second and third group [Music] thank you [Music] now select all three groups and make sure they are evenly spaced [Music] delete the two first frame then copy and paste the groups from the first frame to the second frame make sure they're well adjusted in the second frame delete the group in in the third frame and copy the group from the second frame into the third frame and adjust it now decrease the heights of the frames to the original height do that by holding down command or Ctrl whilst dragging the mouse upwards [Music] switch to prototype and connect the fast frame to the second frame using after delay and then the moving command [Music] connect the second ring to the third frame using the same settings and then connect the third ring to the fourth ring using the same settings as well voila there you have it our image Carousel in figma if you enjoyed this tutorial be sure to like And subscribe for more content and don't forget to watch the other videos on this channel thank you for watching foreign [Music]

Channel: Aquiyah Designs

Views: 569

Keywords: Figma tutorial, Image carousel animation, Figma design, Interactive design, Web design, UX/UI design, Animation tutorial, graphic design, Design tutorials, Figma techniques

Id: 2brVTXC6V3w

Length: 7min 39sec (459 seconds)

Published: Thu Jun 29 2023