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

  • @AKagNA
    @AKagNA4 ай бұрын

    The man who explains Framer better than the Framer tutorial's itself.

  • @AKagNA

    @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

    @phishdough

    Ай бұрын

    Yeah seriously fuck those bullshit framer tutorials complete useless trash. They should all be fired.

  • @NavesNiche
    @NavesNiche7 ай бұрын

    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

    @TimGabe

    7 ай бұрын

    that's really cool to hear, glad i could help!!

  • @Meadow254
    @Meadow2549 ай бұрын

    Another great tutorial, Tim! I've learned so much from you, designing with Framer. 😊

  • @TimGabe

    @TimGabe

    8 ай бұрын

    that's amazing to hear 😃

  • @NicoloSodano
    @NicoloSodano8 ай бұрын

    Always valuable content! Thank you Tim!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    happy you liked it, Nicolo! 😃

  • @thesloothy9348
    @thesloothy9348Ай бұрын

    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 😍

  • @bleedou.t
    @bleedou.t7 ай бұрын

    Such a great and easy to follow tutorial!

  • @TimGabe

    @TimGabe

    7 ай бұрын

    happy to hear that 🤩

  • @anishamalhotra6195
    @anishamalhotra61958 ай бұрын

    Your videos are so so easy to follow.. thank you so much ❤

  • @TimGabe

    @TimGabe

    8 ай бұрын

    this is exactly what i love to hear! thanks a lot 💜

  • @altetsagroup
    @altetsagroup8 ай бұрын

    It's a very beautiful lesson... thank you so much, Tim

  • @TimGabe

    @TimGabe

    8 ай бұрын

    glad you liked it!! 😃

  • @MrMyers1489
    @MrMyers14898 ай бұрын

    Tim!!! You’re a whole cheat code! Thank you!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    haha, i love it!! cheat code is a fantastic compliment, thank you!!

  • @majidmanavi
    @majidmanavi8 ай бұрын

    Thank you so much Tim, I've been learning Framer by your videos, Your job is really valuable❤

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thank you majid, glad you find it helpful!! 💜

  • @cp3onmtv963
    @cp3onmtv9638 ай бұрын

    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

    @TimGabe

    8 ай бұрын

    always glad when people find my stuff useful, thanks a lot for sharing!! might be something for a future tutorial!

  • @mr.chinaski2613
    @mr.chinaski26138 ай бұрын

    Awesome content, as always !

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thanks my friend 🤩

  • @mubindid
    @mubindid8 ай бұрын

    Super mind blowing videooo!!!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    really glad you liked it, friend!

  • @3wicaksono
    @3wicaksono8 ай бұрын

    this is that am waiting for, create tab component!

  • @TimGabe

    @TimGabe

    8 ай бұрын

    great!! 😃

  • @RLNDcaST
    @RLNDcaST6 ай бұрын

    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

    @TimGabe

    6 ай бұрын

    that's amazing to hear! thanks for letting me know. 😃

  • @figmawme
    @figmawme6 ай бұрын

    Awesomeness INDEEED.

  • @TimGabe

    @TimGabe

    6 ай бұрын

    cms is awesome!!

  • @worksmart8166
    @worksmart81668 ай бұрын

    Sir you are great🎉

  • @TimGabe

    @TimGabe

    8 ай бұрын

    appreciate the kind comment, friend 🤩

  • @ryansilver4805
    @ryansilver48056 ай бұрын

    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

    @TimGabe

    6 ай бұрын

    for sure, you'd have to just add that as another text field!

  • @katiecalvert9143
    @katiecalvert9143Ай бұрын

    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!

  • 7 ай бұрын

    Great video thanks! You could have change the opacity once, on the original component of the tabs :P

  • @TimGabe

    @TimGabe

    7 ай бұрын

    no worries! 😃 haha, sometimes we choose pain!!

  • @des7638
    @des76386 ай бұрын

    amazing

  • @TimGabe

    @TimGabe

    6 ай бұрын

    thank you! 😃

  • @halfpastnitro9593
    @halfpastnitro9593Ай бұрын

    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?

  • @FloNocode
    @FloNocode8 ай бұрын

    awesome !! Tim your course start when ?

  • @TimGabe

    @TimGabe

    8 ай бұрын

    Q1 of 2024 😃 thanks for the support, Florian!!

  • @FloNocode

    @FloNocode

    8 ай бұрын

    @@TimGabe WE wainting for that , i am really existing to create awesome project on framer with your futur course

  • @milanrdesign
    @milanrdesign4 ай бұрын

    Is this possible to do with pages? so that nav at the top stays static but the page changes?

  • @Cphmtbdads
    @Cphmtbdads8 ай бұрын

    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

    @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!

  • @ovalayacademy
    @ovalayacademy7 ай бұрын

    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

    @TimGabe

    7 ай бұрын

    i'll cover use cases likes this in my upcoming course! 😃

  • @rianvdam9901
    @rianvdam99017 ай бұрын

    God bless you bro

  • @TimGabe

    @TimGabe

    7 ай бұрын

    right back at you, my friend 😃

  • @gamingspecialunity
    @gamingspecialunity8 ай бұрын

    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

    @TimGabe

    8 ай бұрын

    will include more specific use cases like this in my upcoming course, thank you for the suggestion my friend 🙏

  • @gamingspecialunity

    @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

  • @wilson_18
    @wilson_188 ай бұрын

    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

    @TimGabe

    8 ай бұрын

    you’ll have to host it on framer 🙏

  • @mikestevens4897
    @mikestevens48977 ай бұрын

    How would you make this component work accross multiple breakpoints?

  • @TimGabe

    @TimGabe

    7 ай бұрын

    you'd have to make more variants of it, or use the new spacing variables 😃 (or both)

  • @FloNocode
    @FloNocode8 ай бұрын

    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

    @TimGabe

    8 ай бұрын

    here’s a good article, Florian: www.framer.com/learn/component-sharing/

  • @FloNocode

    @FloNocode

    8 ай бұрын

    @@TimGabe Super ! That what i need :D excellent

  • @B_Migs
    @B_Migs8 ай бұрын

    Thanks for the laugh @2:22 😂

  • @TimGabe

    @TimGabe

    8 ай бұрын

    haha!! you're welcome 🤩

  • @user-ni6oz7bj9l
    @user-ni6oz7bj9l4 ай бұрын

    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

    @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

    @notlouai

    4 ай бұрын

    ​@@user-ni6oz7bj9lthanks for your help 🙏

  • @evilyamii

    @evilyamii

    16 күн бұрын

    @@user-ni6oz7bj9l Thank you so much!

  • @adityonugroho7225
    @adityonugroho72257 ай бұрын

    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

    @TimGabe

    7 ай бұрын

    hard to say without seeing the project, my friend 😫

  • @adityonugroho7225

    @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 😅

  • @FloNocode
    @FloNocode8 ай бұрын

    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

    @TimGabe

    8 ай бұрын

    i’d probably use some kind of darkening gradient/dark layer, or find a different place for the text (like outside)

  • @FloNocode

    @FloNocode

    8 ай бұрын

    @@TimGabe very thanks for this tips !

  • @vrealizer
    @vrealizer2 ай бұрын

    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.

  • @user-bp2jz1hm5t
    @user-bp2jz1hm5t4 ай бұрын

    Is there a possibility to shift on hover, not on tap? thx

  • @user-bp2jz1hm5t

    @user-bp2jz1hm5t

    4 ай бұрын

    Found a solution: Tab needs to be in a stack to work on hover.

  • @HarshaVardhan-ml6lt
    @HarshaVardhan-ml6lt4 ай бұрын

    Need the header to be slider also, like multiple categories

  • @flus.
    @flus.2 ай бұрын

    This is great! But I cant think of how to make this responsive

  • @Dave_O_O
    @Dave_O_O25 күн бұрын

    How does one make it responsive?

  • @giovannaperez5080
    @giovannaperez50802 ай бұрын

    How do you do this in figma???

  • @minhduong9825
    @minhduong98256 ай бұрын

    It's great but complicated!

  • @TimGabe

    @TimGabe

    6 ай бұрын

    definitely complicated...

  • @afreenshaikh938
    @afreenshaikh9386 ай бұрын

    2:50

  • @TimGabe

    @TimGabe

    5 ай бұрын

    the magic number....?

  • @rejointrident
    @rejointrident7 ай бұрын

    please add it to the master framer crash course

  • @TimGabe

    @TimGabe

    7 ай бұрын

    nested components? 😃