Hey Tim, ngl, followed a lot of designers for Figma tutorials and you were the best one so far. Really understood components in Figma because of you, so, I'd just like to thank you. :)
You make very useful tutorials and I appreciate that. I can see several use cases for this; as a product designer this could be a great way to show lo-fi/hi-fi version of a component, or a subscriptions based site could have their 3 tier options laid out this way etc. Subscribed **Would like to see how to build animated preloaders (like logos, welcome etc) for framer before entering the actual site!
Thanks Tim! Looksl ike you gave me the idea how to animate service cards for my first Framer project. 😅 till this video i didn't know how to do it. But still has one other doubt about reviews section.😅
hi there!! Absolutely love this, i have a question, is it possible to add a read more section or to have a section appear underneatth for the relevant selected tab?
Thanks for this! When you rename the Title variable of Tabs at 7:28 - how do I get this option? I created a text variable in the Tab component, but it's not showing when I'm back on the Home page. thanks for any help!
Hi, I was thinking while watching your TH-cam videos, I can make the components, but it's so hard to prototype them. Do you have any videos on this? Or can you take a video of variations prototyping? I'm not sure if it's better to just study framer or write a program like jitter or learn pygma prototyping. Is there a lecture or course that combines components and prototyping? I'm not very good at English, so I used a translator a bit, please understand. I want you to comment. Thanks for the nice videos. I hope you're always happy.
thanks so much for this video. life-saver. quick q: I've created this w icons as tabs instead of text. when i click on one of the tabs, the previous one i clicked doesn't go back to default state. It's going back to default-hover instead. what am i missing?
Great tutorial! There is one issue I have come across. I cannot rename my Title on the Tab. Why might this be? Under the Tab, I see Variant: default, and edit component only. I do not see an option for Title.
I was able to figure it out on my own. For anyone having this issue, I was able to get the Title tab to change the text by first selecting the Tab you created > edit component > select the text on the layers panel > on the aside menu on the right > you will see content with a plus sign (+) > click it > select create variable > plain text > give it a title (you can name it anything). Now when you go back to Home, you will see the Title tab where you can name the Tab anything you like. This must have been a new update on Framer.
Amazing content Tim, but when I try to change the image in variant 2 & 3, it doesn't happen, because it doesn't appear in image component, can u tell me why?
I have a question: I'm creating a nested component set up, say: Content Block > Title Block + Description block. Title Block and Description Block both have variables attached to them so i can customise them on the fly. However, these variables aren't exposed to the main Content Block component. How can I make this work? Please help! @timGabe
Tim i have a question. By exemple , i create a website aon framer and i see a component what i love like yours , how copy a component on own projet ? when i try , i lost all interaction. I don't know the methode for make that. Have you a video who explain how make that or its not possible
Hi Tim thanks for your content ! How make this responsive for a component framer. It work very well on desktop but when I change for tablet et Phone it look so bad. How debug that?
@@TimGabe actually I have recreate all tutorial ! And can you share something who can help me to fix that and how transform correctly in mobile. When Your upcoming course will release ? I just need to know for this usecase if its possible . Thanks
Hi i try to reproduce your tutorial and i have a question , can you give a tips if our images are light and we want a white texte , what is your advice for make better our accessibility. Thanks you
I googled on nested components and ended up here. No offense, you designed very beautiful views, but that could be part of another tutorial? The things about the nesting could easily fit into a 2 min video. Please be mindful of peoples time :)
This is a solution for a problem I've had for a while now. Been looking everywhere, asking people, and here it is. Pure magic.
Thank you.
that's really cool to hear, glad i could help!!
The man who explains Framer better than the Framer tutorial's itself.
Hey Tim, ngl, followed a lot of designers for Figma tutorials and you were the best one so far. Really understood components in Figma because of you, so, I'd just like to thank you. :)
Yeah seriously fuck those bullshit framer tutorials complete useless trash. They should all be fired.
as usual)
Thank you so much Tim, I've been learning Framer by your videos, Your job is really valuable❤
thank you majid, glad you find it helpful!! 💜
Another great tutorial, Tim!
I've learned so much from you, designing with Framer. 😊
that's amazing to hear 😃
It's a very beautiful lesson... thank you so much, Tim
glad you liked it!! 😃
Tim, I love your tutorials.
You my good sir, are a life + saver. I am currently doing a build for myself and I was trying to figure out how to do just this. Thanks so much 😍
Tim!!! You’re a whole cheat code! Thank you!
haha, i love it!! cheat code is a fantastic compliment, thank you!!
Always valuable content! Thank you Tim!
happy you liked it, Nicolo! 😃
Such a great and easy to follow tutorial!
happy to hear that 🤩
Your videos are so so easy to follow.. thank you so much ❤
this is exactly what i love to hear! thanks a lot 💜
You make very useful tutorials and I appreciate that. I can see several use cases for this; as a product designer this could be a great way to show lo-fi/hi-fi version of a component, or a subscriptions based site could have their 3 tier options laid out this way etc. Subscribed
**Would like to see how to build animated preloaders (like logos, welcome etc) for framer before entering the actual site!
always glad when people find my stuff useful, thanks a lot for sharing!!
might be something for a future tutorial!
Thanks Tim! Looksl ike you gave me the idea how to animate service cards for my first Framer project. 😅 till this video i didn't know how to do it. But still has one other doubt about reviews section.😅
that's amazing to hear! thanks for letting me know. 😃
Thank you for the tutorial, what about a button previous and next for example ?
awesome !! Tim your course start when ?
Q1 of 2024 😃 thanks for the support, Florian!!
@@TimGabe WE wainting for that , i am really existing to create awesome project on framer with your futur course
Awesome content, as always !
thanks my friend 🤩
hi there!! Absolutely love this, i have a question, is it possible to add a read more section or to have a section appear underneatth for the relevant selected tab?
for sure, you'd have to just add that as another text field!
Thanks for this! When you rename the Title variable of Tabs at 7:28 - how do I get this option? I created a text variable in the Tab component, but it's not showing when I'm back on the Home page. thanks for any help!
Same issue here
this is that am waiting for, create tab component!
great!! 😃
Super mind blowing videooo!!!
really glad you liked it, friend!
Hi, I was thinking while watching your TH-cam videos, I can make the components, but it's so hard to prototype them. Do you have any videos on this? Or can you take a video of variations prototyping? I'm not sure if it's better to just study framer or write a program like jitter or learn pygma prototyping. Is there a lecture or course that combines components and prototyping? I'm not very good at English, so I used a translator a bit, please understand. I want you to comment. Thanks for the nice videos. I hope you're always happy.
thanks so much for this video. life-saver. quick q: I've created this w icons as tabs instead of text. when i click on one of the tabs, the previous one i clicked doesn't go back to default state. It's going back to default-hover instead. what am i missing?
Sir you are great🎉
appreciate the kind comment, friend 🤩
Can you create a nested component where you roll over different icons in one section, and the background changes depending on the icon you roll over?
Great video thanks!
You could have change the opacity once, on the original component of the tabs :P
no worries! 😃 haha, sometimes we choose pain!!
Awesomeness INDEEED.
cms is awesome!!
Great tutorial! There is one issue I have come across. I cannot rename my Title on the Tab. Why might this be? Under the Tab, I see Variant: default, and edit component only. I do not see an option for Title.
I was able to figure it out on my own. For anyone having this issue, I was able to get the Title tab to change the text by first selecting the Tab you created > edit component > select the text on the layers panel > on the aside menu on the right > you will see content with a plus sign (+) > click it > select create variable > plain text > give it a title (you can name it anything). Now when you go back to Home, you will see the Title tab where you can name the Tab anything you like. This must have been a new update on Framer.
@@RobZ-u3rthanks for your help 🙏
@@RobZ-u3r Thank you so much!
Amazing content Tim, but when I try to change the image in variant 2 & 3, it doesn't happen, because it doesn't appear in image component, can u tell me why?
hard to say without seeing the project, my friend 😫
Thanks Tim, I've already follow it ur step one by one carefully, and solve it, can't wait for ur next course 😅
I have a question:
I'm creating a nested component set up, say:
Content Block > Title Block + Description block.
Title Block and Description Block both have variables attached to them so i can customise them on the fly.
However, these variables aren't exposed to the main Content Block component. How can I make this work? Please help!
@timGabe
i'll cover use cases likes this in my upcoming course! 😃
Tim i have a question. By exemple , i create a website aon framer and i see a component what i love like yours , how copy a component on own projet ? when i try , i lost all interaction. I don't know the methode for make that. Have you a video who explain how make that or its not possible
here’s a good article, Florian:
www.framer.com/learn/component-sharing/
@@TimGabe Super ! That what i need :D excellent
Hello! Why I am not getting the Title Option to change the names of the tabs? I followed your steps second by second
So what's up with having to use stacks all the times.
Would it be similarly complex if you did this nested component in Figma for instance?
i just find that having a stack (or auto layout, flexbox, etc.) based workflow helps with consistency
you could do it all without using stacks though!
Hi Tim thanks for your content ! How make this responsive for a component framer. It work very well on desktop but when I change for tablet et Phone it look so bad. How debug that?
will include more specific use cases like this in my upcoming course, thank you for the suggestion my friend 🙏
@@TimGabe actually I have recreate all tutorial ! And can you share something who can help me to fix that and how transform correctly in mobile. When Your upcoming course will release ? I just need to know for this usecase if its possible . Thanks
Hi i try to reproduce your tutorial and i have a question , can you give a tips if our images are light and we want a white texte , what is your advice for make better our accessibility. Thanks you
i’d probably use some kind of darkening gradient/dark layer, or find a different place for the text (like outside)
@@TimGabe very thanks for this tips !
How would you make this component work accross multiple breakpoints?
you'd have to make more variants of it, or use the new spacing variables 😃 (or both)
Can I build an website on framer and then host it on a custom hosting service? Or I’m limited to use their hosting service?
you’ll have to host it on framer 🙏
Hey How do I slide up the images in the image container, is there a short cut I am using windows and I am unsure how to that part. Please help.
My apologies, I solved it by grabbing the Image container (stack with images in it) before trying to drag and it moved
God bless you bro
right back at you, my friend 😃
Is this possible to do with pages? so that nav at the top stays static but the page changes?
This is great! But I cant think of how to make this responsive
i think the only way is to set the image sizes to width: fill content and work with masks but i vent tried if that works
amazing
thank you! 😃
Is there a possibility to shift on hover, not on tap? thx
Found a solution: Tab needs to be in a stack to work on hover.
Does this work for CMS??
Need the header to be slider also, like multiple categories
It's great but complicated!
definitely complicated...
How does one make it responsive?
How do you do this in figma???
please add it to the master framer crash course
nested components? 😃
I googled on nested components and ended up here. No offense, you designed very beautiful views, but that could be part of another tutorial? The things about the nesting could easily fit into a 2 min video. Please be mindful of peoples time :)
2:50
the magic number....?
The man explain WORST and his method is COMPLEX compare to others.
Thanks for the laugh @2:22 😂
haha!! you're welcome 🤩