Design Breathtaking CAROUSEL POSTS in Figma FAST: My 9-Minute Setup

[@DouglassVisions]

keep in mind everyone! once you create this project and duplicate it as a template, you'll never have to build this all from scratch ever again!

[@prinxprincessa]

Would you do that?

[@itsRDLobo]

I'm new to Figma, i've always been in the area of photography and filmmaking but from time to time i'm doing jobs with carousel deliverables, doing it in PS is good but the way Figma allows me to automate other elements into the next slide without doing manually is a game changer, this is the kind of tutorial i needed and i just want to contribute my 2cents here: Right where it starst to decrease the X coordinates, you can do it with multiplying symbol so instead of decreasing -1080-1080 and so on, you can just type -1080*2, -1080*3, just be aware of the frame you're in and that will be just a little bit faster, hope this helps anyone finding this great tutorial.

[@mattwalker5383]

I was just wondering the exact same thing - thank you!

[@urtype0]

✦Generate immersive Carousel posts for social media 00:04 - Use a 1080-pixel-tall frame and rename it as main frame - Arrange multiple images horizontally to create a giant horizontal image effect - Design engaging visuals that transition smoothly from one Carousel element to another ✦Optimizing for maximum of 10 images within one Carousel post. 01:12 - Creating a rectangle of 1080 x 1080. - Duplicating the rectangle to align with the first one. - Filling up the whole width of the Mainframe with duplicated rectangles. - Removing every second square to differentiate between sections. - Pulling out the selected square. ✦Create guides to separate images within a frame 02:16 - Position guides at each square edge - Remove squares and keep only vertical lines as guides - Create a frame that is 1080 by 1080 ✦Duplicating and renaming items in bulk 03:25 - By duplicating and pressing command D, we can create multiple copies of an item - By selecting the duplicated items and using command R, we can bulk rename them - We can use the match and replace function to replace the ending text with numbers - By using the rename option, we can revert the changes and have the correct order ✦Copy and align Mainframe component 04:33 - Search for Mainframe and use it as an instance - Copy and paste Mainframe instance into all frames - Select second and third Carousel and adjust x coordinates ✦Arranged main frame components in Carousel with decreasing x coordinates by 1080 05:49 - Each Mainframe component moved one slot to the left with each new frame - Tested by typing '1' in the first section ✦Splitting a design into individual images for social media sharing 07:05 - By creating different frames on a Carousel, each frame displays a different section of the design. - When exporting all the frames as individual images, it results in 10 separate images. - These images can be easily uploaded to social media platforms like Instagram or Twitter. ✦Design an interesting Carousel and export it to create a cohesive singular design with six individual images. 08:22 - Select Carousel frames and export the layers to get the final result. - Use the images to send to colleagues or clients or upload on platforms like Instagram to create - - an immersive and interesting Carousel.

[@njorogekamau3820]

Only people who understand the value of scale with appreciate this. Thanks for your service my friend.

[@betinapaixao6258]

Thank you sooo much, this is gold! I appreciate you taking the time to teach such an amazing setup to make our design process faster. Amazing!!!

[@f0xik101]

You can simply use the Slice tool in Figma to generate individual slices for each element of the carousel. Once the slices are set up, you can easily export them as separate square images, making it quick and efficient to create individual assets for your carousel.

[@saqibmansoor3513]

This was very helpful. For anyone wondering, if you want to add another carousel slide, you just have to change the X coordinates of the new one. Your framework is still linked.

[@Rebekah_67]

The most complicated video I've ever seen

[@cosmic_rem]

It's impressive buddy, it makes things easier and it's only 1 time effort

[@majharul.shawon]

You save my day man!

[@curtiswiens9372]

This is great! FYI just multiple the -1080 when you move the frame rather than writing -1080 for each increment.

[@snowy4369]

You should've put that figma file in the description.

[@popescumuguraurelian956]

Instead of -1080-1080-1080 you can simply write -1080*3

[@z.sticks]

this was really useful to create a template for my future social media postings. thank u!

[@doyinsovohunu1268]

This is a long process...am tired already 😢 having serious issues on building. Carousel, I need a simplify video..I need help 😢

[@DavidStavegard]

This was soo cool - I like how easily you can split ut images and texts now into very good looking images. Or - in my case - I'll probably split up Excel spreadsheets into a great carousel! 😂📈

[@Anas-Ben88]

Thank you mavi for these great tutorials, I learned alot from you keep up.

[@farzadkafi7592]

This is fantastic, Thanks a lot

[@Design-yr9rw]

awesome thnx!!!!

[@profitdjifuf6981]

Cool and easy ❤️❤️ thx ❤️❤️

[@JulioSantirachi]

Very useful video, thank you.

[@VictorCampoblanco]

Wow. It looks intimidating at first but I want to try it. Thanks.

[@easymathlearnings]

Please make a detailed video on how to design social media posts ❤

[@M_Whisperer]

Amazing video. Thanks

[@uidesignstuff-vt7nj]

Nice one, mate!

[@Shaileshkvr]

This shows why you should use canva

[@RenewedMinds]

Exactly

[@OrionPaxOP]

no this shows that you only have to make this once and use it all the time. also on canva you are dependant on templates while you can create your own here coz its a vector program and images will be always much crisper.

[@ron_berlinski]

Just use slices

[@sophiedehaan]

yeah I also don't get why he just doesn't use these. Any reason why @Mavi Design ?

[@abhaychauhan751]

Then where should we design that big template

[@FolqiSubscriptions]

Hey Mavi, great stuff, just wanted to let you know that does not work with sections. For ex. if i drag a section in the main component, does not update, only work with frames which i guess is fine. Another thing is to make it work with instances instead of working on the main component, i prefer to work on instances mostly, however i can copy the component in a work file while keep one component in the design system. Overall great job.

[@Dhruvin_Vadaliya]

Amazing tutorial 😅🤝🏻

[@Phill456-n6h]

Great video! Is there a way to simulate o view the carousel on a smartphone before posting?

[@automatewithrezwan]

really helpful

[@Ethan-D.Rincon]

Me: only starting... Mavi: fly edit: my brain is small but still managed to do this i cant believe this

[@enlightmenow3950]

Can you create a video on how to resize this for all social media sizes. Or should we create a seperate carousal for all social handles.

[@sophiaonus3108]

having a hard time figuring the copy 'x' and copy 'v'. it keeping appearinf bak to where it originally was rather than stay on the first component ''carousel 01''. what to do?

[@jordan.na.dzielni]

I was wrestling with the same, but it turned out I made a mistake. Make sure that you've made frames, not rectangles. Components seem to only be pasting into frames.

[@abril_sama]

What is "option A"?

[@abril_sama]

Nevermind. It's "alt A"

[@gayan6438]

@@abril_sama Thank you❤ This helps me

[@FaisalKamran-q6x]

guys please help to solve this beef , having a hard time figuring the copy 'x' and copy 'v'. it keeping appearing on the top of all carousel and carousel are not visible . what to do? 4:49

[@crashxout]

same...

[@crashxout]

It didnt work because we were using shapes instead of frames...

[@OrionPaxOP]

now it made all sense.

[@sajjadak]

Great tutorial... Advanced level

[@teodorprchlik1877]

I have a problem that the text I put there is x times copied... why?

[@enlightenwithamlan3435]

Is Windows 7 compatible for Figma ?

[@mialiuwork]

how about clice? just asking, once this templete is built also available for duplicate no?

[@adnanahmad01786]

Yes, you can use it again. Just remove the old content from parent component and put new content there

[@GayathryPVasudevan]

whats that a ,press a ?? at4.25

[@obochafrancis4475]

How to post your design on Instagram

[@Xellar1993]

Idk if its the american keyboard layout, but at 4:40 he doesnt do that. he just paste the frame just again, where he dissappeared...

[@juliusberg1132]

Weißt du wie man den Schritt macht?😅 so wie er es macht gehts ja nicht hah

[@martamenardi1410]

To be honest, it is a bit too demanding for my level😂😅

[@uuilkie]

You set it up once and can easily simplify every carousel creation in the future

[@RenewedMinds]

​@@uuilkieyh but it's too much effort when you have canva

[@degenman28302]

I tried this myself but I ran into a problem. If i try duplicate this template then the design originates from the initial component. It's very time consuming to remake this template for every set of carousel slides. Is there a way around this?

[@mavidesign]

you have to duplicate the main component as well

[@isaiahheine]

@@mavidesign I'm not understanding, I duplicated and created a new component and like everything but I'm still getting the issue in multiple instances

[@isaiahheine]

figured it out ;) @@mavidesign

[@bart_hillerich]

what did you do?@@isaiahheine

[@FolqiSubscriptions]

What I did is the following: I copied the main component and the cards in a different file or project, after that I copy it back in my original file , like this I have a duplicate component in the same file. This approach works so you can start on another post and update the cards, however this is not a good fix, I’m trying to figure it out how to make it work with instanced only so I don’t need to duplicate the component. The idea is great but it’s not practical since for each post you make you need to work for the main component.

[@harshraj9757]

why can't we just slice it instead from the main frame

[@gues.im.godsent7934]

What program is this?

[@mavidesign]

Figma

[@EdWilliams]

People really don't read. Literally says it in the title and he's walking you through Figma throughout the entirety of the video.

[@clubelite2260]

I found it faster and easier if you take -1080 * the amount you want it to be minused with

[@SadatAhmad-to8wg]

figma file not working

[@artiliciouswithfati]

i don't get it why there is a need to use difficult apps like this when you can easily make anything on canva in minutes.This is so annoying to use but have to say you teaching manner is amazing but there were multiple things i did't get and can you tell if you were using the paid version because there was no scale in mine

[@mavidesign]

Thanks! “Scale” tool is definitely available on the free plan as well

[@newlifeintorreon]

Hello Mavis none of your links work,,,,,can you please refund my money ,,,Thankyou

[@mavidesign]

@@newlifeintorreon please reach out to my email

[@neido25]

Super useful thanks a lot!

[@newlifeintorreon]

Hello Mavis none of your links work,,,,,can you please refund my money ,,,Thankyou