Nested Components in Framer (Beginner Tutorial)
Вставка
- Опубліковано 9 лип 2024
- 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.
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.
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!!
Always valuable content! Thank you Tim!
happy you liked it, Nicolo! 😃
Another great tutorial, Tim!
I've learned so much from you, designing with Framer. 😊
that's amazing to hear 😃
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!
happy to hear that 🤩
Tim!!! You’re a whole cheat code! Thank you!
haha, i love it!! cheat code is a fantastic compliment, thank you!!
It's a very beautiful lesson... thank you so much, Tim
glad you liked it!! 😃
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!! 💜
Your videos are so so easy to follow.. thank you so much ❤
this is exactly what i love to hear! thanks a lot 💜
Awesome content, as always !
thanks my friend 🤩
this is that am waiting for, create tab component!
great!! 😃
Super mind blowing videooo!!!
really glad you liked it, friend!
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!
Awesomeness INDEEED.
cms is awesome!!
Sir you are great🎉
appreciate the kind comment, friend 🤩
amazing
thank you! 😃
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. 😃
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!
Is this possible to do with pages? so that nav at the top stays static but the page changes?
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!
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! 😃
God bless you bro
right back at you, my friend 😃
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 video thanks!
You could have change the opacity once, on the original component of the tabs :P
no worries! 😃 haha, sometimes we choose pain!!
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
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
Hi, I was thinking while watching your UA-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.
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 !
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
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 🙏
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)
Thanks for the laugh @2:22 😂
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.
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.
@@user-ni6oz7bj9lthanks for your help 🙏
@@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?
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 😅
Need the header to be slider also, like multiple categories
How does one make it responsive?
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.
This is great! But I cant think of how to make this responsive
How do you do this in figma???
It's great but complicated!
definitely complicated...
2:50
the magic number....?
please add it to the master framer crash course
nested components? 😃