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.
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.
✦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.
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! 😂📈
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.
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.
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?
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.
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
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?
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.
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
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!
Would you do that?
Only people who understand the value of scale with appreciate this. Thanks for your service my friend.
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.
I was just wondering the exact same thing - thank you!
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.
✦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.
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!!!
It's impressive buddy, it makes things easier and it's only 1 time effort
This is great! FYI just multiple the -1080 when you move the frame rather than writing -1080 for each increment.
Instead of -1080-1080-1080 you can simply write -1080*3
The most complicated video I've ever seen
You should've put that figma file in the description.
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! 😂📈
Great video! Is there a way to simulate o view the carousel on a smartphone before posting?
this was really useful to create a template for my future social media postings. thank u!
This is a long process...am tired already 😢 having serious issues on building. Carousel, I need a simplify video..I need help 😢
Please make a detailed video on how to design social media posts ❤
Me: only starting...
Mavi: fly
edit: my brain is small but still managed to do this i cant believe this
Thank you mavi for these great tutorials, I learned alot from you keep up.
This is fantastic, Thanks a lot
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.
Wow. It looks intimidating at first but I want to try it. Thanks.
This shows why you should use canva
Exactly
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.
Cool and easy ❤️❤️ thx ❤️❤️
Very useful video, thank you.
now it made all sense.
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?
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.
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.
Nice one, mate!
how about clice? just asking, once this templete is built also available for duplicate no?
Yes, you can use it again. Just remove the old content from parent component and put new content there
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
Is Windows 7 compatible for Figma ?
Amazing tutorial 😅🤝🏻
Amazing video. Thanks
Just use slices
yeah I also don't get why he just doesn't use these. Any reason why @Mavi Design ?
Then where should we design that big template
really helpful
To be honest, it is a bit too demanding for my level😂😅
You set it up once and can easily simplify every carousel creation in the future
@@uuilkieyh but it's too much effort when you have canva
I have a problem that the text I put there is x times copied... why?
What is "option A"?
Nevermind. It's "alt A"
@@abril_sama Thank you❤ This helps me
How to post your design on Instagram
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?
you have to duplicate the main component as well
@@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
figured it out ;) @@mavidesign
what did you do?@@isaiahheine
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.
What program is this?
Figma
People really don't read. Literally says it in the title and he's walking you through Figma throughout the entirety of the video.
whats that a ,press a ?? at4.25
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...
Weißt du wie man den Schritt macht?😅 so wie er es macht gehts ja nicht hah
why can't we just slice it instead from the main frame
I found it faster and easier if you take -1080 * the amount you want it to be minused with
Great tutorial... Advanced level
figma file not working
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
Thanks! “Scale” tool is definitely available on the free plan as well
Super useful thanks a lot!