Nested Components in Framer (Beginner Tutorial)
In this Framer Beginner Tutorial we're creating nested components to achieve next level stuff in Framer.
🔴 Working File: timgabe.com/resources/nested-...
Timecodes
0:00 - Introduction to the tutorial on creating nested components in Framer.
0:17 - Explaining the purpose of combining components.
0:53 - Starting the recreation of the tab component.
1:58 - Creating a hover state for the tab component.
2:59 - Initiating the image component creation.
3:50 - Adding a hover effect to the image component.
4:46 - Adjusting the shine effect on the image component.
6:10 - Recap of the components created: tab and image.
6:17 - Beginning the creation of the nested component.
7:49 - Recreating the tabs for the nested component.
9:01 - Adding shadows and adjusting the nested component's appearance.
10:03 - Creating the text field for the nested component.
11:50 - Duplicating and adjusting text fields for different tabs.
13:20 - Finalizing the nested component and creating variants.
13:45 - Adjusting the tabs for the nested component.
14:30 - Modifying the padding and radius of tabs.
15:01 - Setting up interactions between tabs and variants.
15:49 - Customizing the appearance for different tab states.
16:59 - Adjusting the image component within variants.
17:41 - Aligning the text with the corresponding tab.
18:00 - Wrapping text stacks into another stack for better control.
18:46 - Adjusting opacity for text stacks in different states.
19:22 - Final touches on the opacity settings for text variants.
19:53 - Demonstrating the final interactive nested component with tab selection.
Пікірлер: 87
The man who explains Framer better than the Framer tutorial's itself.
@AKagNA
4 ай бұрын
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. :)
@phishdough
Ай бұрын
Yeah seriously fuck those bullshit framer tutorials complete useless trash. They should all be fired.
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.
@TimGabe
7 ай бұрын
that's really cool to hear, glad i could help!!
Another great tutorial, Tim! I've learned so much from you, designing with Framer. 😊
@TimGabe
8 ай бұрын
that's amazing to hear 😃
Always valuable content! Thank you Tim!
@TimGabe
8 ай бұрын
happy you liked it, Nicolo! 😃
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 😍
Such a great and easy to follow tutorial!
@TimGabe
7 ай бұрын
happy to hear that 🤩
Your videos are so so easy to follow.. thank you so much ❤
@TimGabe
8 ай бұрын
this is exactly what i love to hear! thanks a lot 💜
It's a very beautiful lesson... thank you so much, Tim
@TimGabe
8 ай бұрын
glad you liked it!! 😃
Tim!!! You’re a whole cheat code! Thank you!
@TimGabe
8 ай бұрын
haha, i love it!! cheat code is a fantastic compliment, thank you!!
Thank you so much Tim, I've been learning Framer by your videos, Your job is really valuable❤
@TimGabe
8 ай бұрын
thank you majid, glad you find it helpful!! 💜
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!
@TimGabe
8 ай бұрын
always glad when people find my stuff useful, thanks a lot for sharing!! might be something for a future tutorial!
Awesome content, as always !
@TimGabe
8 ай бұрын
thanks my friend 🤩
Super mind blowing videooo!!!
@TimGabe
8 ай бұрын
really glad you liked it, friend!
this is that am waiting for, create tab component!
@TimGabe
8 ай бұрын
great!! 😃
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.😅
@TimGabe
6 ай бұрын
that's amazing to hear! thanks for letting me know. 😃
Awesomeness INDEEED.
@TimGabe
6 ай бұрын
cms is awesome!!
Sir you are great🎉
@TimGabe
8 ай бұрын
appreciate the kind comment, 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?
@TimGabe
6 ай бұрын
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!
Great video thanks! You could have change the opacity once, on the original component of the tabs :P
@TimGabe
7 ай бұрын
no worries! 😃 haha, sometimes we choose pain!!
amazing
@TimGabe
6 ай бұрын
thank you! 😃
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?
awesome !! Tim your course start when ?
@TimGabe
8 ай бұрын
Q1 of 2024 😃 thanks for the support, Florian!!
@FloNocode
8 ай бұрын
@@TimGabe WE wainting for that , i am really existing to create awesome project on framer with your futur course
Is this possible to do with pages? so that nav at the top stays static but the page changes?
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?
@TimGabe
8 ай бұрын
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!
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
@TimGabe
7 ай бұрын
i'll cover use cases likes this in my upcoming course! 😃
God bless you bro
@TimGabe
7 ай бұрын
right back at you, my friend 😃
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
8 ай бұрын
will include more specific use cases like this in my upcoming course, thank you for the suggestion my friend 🙏
@gamingspecialunity
8 ай бұрын
@@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
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?
@TimGabe
8 ай бұрын
you’ll have to host it on framer 🙏
How would you make this component work accross multiple breakpoints?
@TimGabe
7 ай бұрын
you'd have to make more variants of it, or use the new spacing variables 😃 (or both)
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
@TimGabe
8 ай бұрын
here’s a good article, Florian: www.framer.com/learn/component-sharing/
@FloNocode
8 ай бұрын
@@TimGabe Super ! That what i need :D excellent
Thanks for the laugh @2:22 😂
@TimGabe
8 ай бұрын
haha!! you're welcome 🤩
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.
@user-ni6oz7bj9l
4 ай бұрын
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.
@notlouai
4 ай бұрын
@@user-ni6oz7bj9lthanks for your help 🙏
@evilyamii
16 күн бұрын
@@user-ni6oz7bj9l 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?
@TimGabe
7 ай бұрын
hard to say without seeing the project, my friend 😫
@adityonugroho7225
7 ай бұрын
Thanks Tim, I've already follow it ur step one by one carefully, and solve it, can't wait for ur next course 😅
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
@TimGabe
8 ай бұрын
i’d probably use some kind of darkening gradient/dark layer, or find a different place for the text (like outside)
@FloNocode
8 ай бұрын
@@TimGabe very thanks for this tips !
Hi, I was thinking while watching your KZread 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.
Is there a possibility to shift on hover, not on tap? thx
@user-bp2jz1hm5t
4 ай бұрын
Found a solution: Tab needs to be in a stack to work on hover.
Need the header to be slider also, like multiple categories
This is great! But I cant think of how to make this responsive
How does one make it responsive?
How do you do this in figma???
It's great but complicated!
@TimGabe
6 ай бұрын
definitely complicated...
2:50
@TimGabe
5 ай бұрын
the magic number....?
please add it to the master framer crash course
@TimGabe
7 ай бұрын
nested components? 😃