Framer Components For Beginners (Netflix Carousel)
HTML-код
- Опубликовано: 28 июн 2024
- In this tutorial we'll learn to master components in Framer by recreating button, card and carousel components. We'll cover things like states, variants, variables and nested components - giving you everything you need to create whatever you can imagine.
🔴 Working File: timgabe.com/resources/netflix...
Timecodes
0:00 - Introduction to Netflix-style carousel in Framer.
0:07 - Overview of states, variants, and nesting.
0:21 - Start of button component creation.
0:53 - Introduction of button hover states.
1:27 - Setting up button hover effects.
1:46 - Demo of the hover effect.
2:06 - Explanation of pressed states.
2:12 - Dive into Framer variants.
2:30 - Making different button variants.
3:13 - Applying button on main canvas.
3:31 - Introduction to dynamic variables.
4:35 - Crafting the movie card with nested components.
5:37 - Use of variants in the card design.
6:02 - Enhancing movie card hover features.
6:56 - Highlighting nested component features.
7:02 - Carousel creation begins.
8:08 - Showcase of the final carousel design.
#framer #framertutorial
this is insane! 🎉 I’m just starting to learn framer after being a Duda agency for years and I couldn’t even dream of building something like this in Duda
This one is incredibly detailed and easy to understand!
Thanks Tim, I appreciate the straight forward simplicity of your walkthroughs
happy to be of service, my friend!!
This Framer tutorial is incredibly detailed and easy to understand! I love the way you explained the concept of components and variants, making it clear and approachable for beginners. Your step-by-step guidance on creating hover and pressed states for the button component was particularly helpful. I'm curious: What other creative applications do you think Framer variants can be used for? Do you have any tips for managing complex interactions with variants?
I used to be skeptical about No Code apps, but recently I fell in love with Framer, and your video was very useful and helped me learn more,
Thank you, Tim!
that's so cool to hear. i'm guilty of falling in love with framer too, so i understand you!! 😃
You make an Amazing work ! Your tutorial help so much ! You always choice great use case. I waiting for the next
thank you so much, Florian!!
Very gooooood
thanks a lot!!
This kind of project to me is right on the edge of just doing it in code. The cards I get but making this dynamic code would be easier to just hit an API to get the data.
for developers, it's probably still better to do these things natively in code -- especially for bigger projects 😃
How do I use my own icon set from Figma in a component ? I tried many things but can't seem to figure how to use them in a variable
At 5:54 you scaled down the component (button). I am not able to do it. Could you please help with this.
Thank you for the tutorial! The only thing missing is how do I make different sizes, let's say if I replicate this, and this is for desktop, how do I change the size of the cards, buttons comments to be for mobile?
you'll have to do different variants of your components!
this is definitely a tricky one though, so might have to do more content on the topic!
I'd love that! Thank you for all you do! @@TimGabe
@@artcgix thank you for the support!! 😃
7:06 When creating component the title and image menus do not appear
in 7:18 you duplicated the poster, but is there any way we can make collection list without using Collection List so that we can put that into the Carousel?
sorry you feel that way! i personally love it
@@TimGabe lol it was an honest question. I got a heap of cms backends and impossible to do it one by one...
@@denelancholy wow! my comments seem to have really bugged out, I’ve got multiple ones where I answered something in one comment and it got posted to another one 🤯
regarding the question: might need to cover the collection list topic more deeply in another video to dig into all this stuff!
Cool, keep up the great work!
3:36
Can I export it to code?
they have a feature called Handshake for exports!
don't you make figma videos anymore? I'd like to understand the material 3 ui kit components for figma and how to use them to create a site
Figma videos have been on a hold since i'm planning on releasing a Framer course and want to cover that software a bit more... but i'll be back!
i don't get the 3 dots part
what about it don't you get? 😃