🎯 Key Takeaways for quick navigation: 00:00 📚 *Introduction to basics of Framer components including variants, variables, and hover states.* 00:12 🎨 *Creation of a simple button component in Framer, highlighting the use of an isolated component canvas.* 00:53 💡 *Emphasis on the reusability of components in Framer and their application across multiple pages.* 01:34 👆 *Introduction to adding hover variants to components for interactive design.* 02:16 🔄 *Explanation of creating and customizing multiple variants within a single component.* 03:11 🌈 *Introduction to variables in Framer, allowing external editing of component properties.* 04:30 🖋️ *Demonstration of how Framer automatically converts text into variables in certain components.* 05:11 🔍 *Exploring auto-sizing options in Framer, such as 'fit content' for adaptable button sizes.* 06:03 🔄 *Overview of inheritance within components, including primary variant changes affecting others.* 07:07 🎛️ *Creating a toggle component and demonstrating animation between variants.* 09:55 🌟 *Application of learned concepts in a realistic scenario, such as a feature block with unique content.* 13:19 📐 *Tutorial on creating an expanding and collapsing accordion component using stacks.* 15:37 ✅ *Final tips on previewing and adjusting components with changing heights.* Made with HARPA AI
This tool is fantastic. If you a Designer that uses frequently Figma and you just need to make marketing/business and showcase websites without the need of a developer. Framer is the perfect tool. You literally don't need to watch all tutorials, maybe the stacks, frames, components and cms tutorials all needed. But for the rest you good to go !
11:00 "I'll speed this up because I spent way too much time customizing the gradient..." lol, clearly a perfectionist and artist who can't help himself... ha
An optimum tutorial would have visited through all interaction types and their examples. Also, is there any feature to transit to a state "after delay" by itself without any tap or hover?
How would you make a question auto-collapse in your FAQ, so that you can't have all of the questions opened at the same time? I can't seem to find a way to do this so far.
Would I have to create a new variant for each custom accordion item? Since there doesn't seem to be a way to edit the content of the component itself yet. Thank you, and great video!
I am trying to create a button right now - but I don't see the "title" section and am unable to change the title property of other buttons. Is this something that's changed in an updated version of framer?
Hi, first of all, thank you. I really love your product and your lessons. when I convert the element to a component I can no longer edit his padding on tablet and mobile and I have to create variants. am I doing something wrong?
HI, is there any video tutorial to select tabs and change state when i click on it , the case am trying to do is i have section and cards change when i change tabs it's working but tabs when i click it dosnot change state and the previouse selcted stay at on click state.
I copied over a carousel component (similar to the one above) from another theme and pasted it on to my file. But once I change the components into a frame so that I can edit the contents, the scrolls and interactions stop working! Am I doing it wrong?
Hey, thank you for the great video! I have the following question: Is there a way to make the Gradient Number components appear smoothly? I have a similar case now, where I want to animate a Card hover, where on hover a container appears, but it seems that I can't control the animation of this container.
Hello, thanks for the great explainer videos. I have a question regarding best practices. Let's say I have a section that is common among many pages like the hero section. How can I save that one as a sort of component? Is that a best practice you would recommend? Obviously the text and image will be different for each page so not sure how to go about this. I am basically loooking for something like "Symbols" in Webflow. Is there anything like that?
Here is the solution for the beginning of the video: Step 1: Make a simple frame (press F + drag mouse on canvas) Step 2: Insert text into frame (press T + click into the frame, enter your text e.g. "Hello") Step 3: Select the frame, right click -> create component, enter a name e.g. "Button" On the left hand side panel, use Layer and Assets to switch between views. Congratulations, now you know another important step for making great websites!
Before you created the component at 0:16 the frame width & height sizes were set to "Fixed". After you created the component and went back to the Home page using the breadcrumb bar the sizes switched to "Fit" at 0:34 | How did this happen? I tried it myself and it didn't work!
Is it possible to edit text as variant? If not, how are we supposed to create tabs in the topbar? Each tab has hover/pressed state, and we would want to use variants to apply those states on other tabs.
I think there's something wrong with the "Fixed Position", it is unclickable. When I tried to fix position the navigation bar of my design, it is really unclickable, I already turned it into stack and still "fix position is unclickable. Is there anyway how to do that?
Nice tutorial! Does variant 1 have to conclude all layers which only show in other variants? Because there are a lot of layers in variant 1 looks no need to exist.
Yes, the primary variant / variant 1 has to include all layers. All layers are shared, the hierarchy cannot change across variants, only the properties can change. So "deleting" a layer in variant 2 is really just hiding it.
I am using components to create buttons, but I can only add a link to a button when editing the component variant, does that mean that for each button linking to a different page I have to create a new variant?
I would love to buy your product, but I'm struggling to understand what you're doing. In each example, you start off with items already in place. For example, in the variants section for One, Two, and Three, You have a navigation pane and a content pane. How did this get there? You don't show that part of the build. It's just magically there and we're supposed to figure it out I guess. Frustrating.
For anyone feeling this in 2024, have a look at Framer University. They have made hours of content starting from the basics and leading up to more advanced stuff like this. Ben is amazing. 😬
I think you should eliminate the option of creating variables to override components. I come from Figma and in figma it's much easier to modify an instance. You only have to modify the properties you want from the right panel.
Omg yes. I've been trying to figure out how I can edit my instances on a card I have created. But it seems like for every card it has to be a new main component on it's own which is cumbersome
is there a setting Called Program*, its default is set to *Agressive TEwNice tutorialch is making that sNice tutorialtty static soft, change that one, once to
Hey framer can you please make a tutorial in how to make an input field manually nad customizable like the old version of framer because the latest version I cant create a input fields it is a build in form i cant customize i want a tutorial that you can manipulate the input fields like before. Inthe old version you can just import an a input fields by import a components bu now the lates version is you impott a form but you can cuztomize famer can you please fix this problem
Please framer please make an a tutorial in how to make a customizable input fields not a build in and have already a sign in button or a buildin form I dont like thenew version the old version is more better cause you can just impitt and install a input fields buttons and etcbut now it is a build in idont like the build inform i like the old version that you can just input a input fields not build in form
Maybe next time start with where you are... Canvas, web, layer... just say the structure and where you are now. Took me quite long to find out how to just start.
ComPOOOnent. Im sorry Benjamin seems like a great guy and all but this is just driving me crazy. I literally cant watch the video I get so annoyed. Brings out my misophonia I guess. Im sure am not alone with this.
this guy really loves his coMPONEnts
Thanks, I had read your comment at the beginning so I heard it throughout the hole video.
Benjamin is such a rockstar
I love all these tutorials! You guys should make one on these Gradient backgrounds!
I can't hear the word "component" ever again lol, But no joke, amazing tutorial bro, and your tool are out of this world! Amazing!
You mean "c'POnent" 😂
just love the way he says "coMPONents"
I keep coming back to those basics videos because I STILL don't know how to properly use the software. I'm gonna cry
🎯 Key Takeaways for quick navigation:
00:00 📚 *Introduction to basics of Framer components including variants, variables, and hover states.*
00:12 🎨 *Creation of a simple button component in Framer, highlighting the use of an isolated component canvas.*
00:53 💡 *Emphasis on the reusability of components in Framer and their application across multiple pages.*
01:34 👆 *Introduction to adding hover variants to components for interactive design.*
02:16 🔄 *Explanation of creating and customizing multiple variants within a single component.*
03:11 🌈 *Introduction to variables in Framer, allowing external editing of component properties.*
04:30 🖋️ *Demonstration of how Framer automatically converts text into variables in certain components.*
05:11 🔍 *Exploring auto-sizing options in Framer, such as 'fit content' for adaptable button sizes.*
06:03 🔄 *Overview of inheritance within components, including primary variant changes affecting others.*
07:07 🎛️ *Creating a toggle component and demonstrating animation between variants.*
09:55 🌟 *Application of learned concepts in a realistic scenario, such as a feature block with unique content.*
13:19 📐 *Tutorial on creating an expanding and collapsing accordion component using stacks.*
15:37 ✅ *Final tips on previewing and adjusting components with changing heights.*
Made with HARPA AI
Amazing explanation! Framer is such a powerful tool. I'm starting to prefer it over figma actually. Seems more organized
This tool is fantastic. If you a Designer that uses frequently Figma and you just need to make marketing/business and showcase websites without the need of a developer. Framer is the perfect tool. You literally don't need to watch all tutorials, maybe the stacks, frames, components and cms tutorials all needed. But for the rest you good to go !
11:00 "I'll speed this up because I spent way too much time customizing the gradient..." lol, clearly a perfectionist and artist who can't help himself... ha
Components are indeed an extraordinary resource!
Thanks for the tutorial! I found all the words to be really small (like the ones on the framer browser). Maybe for future videos they can be bigger
where can I find that background wallpaper 👀
An optimum tutorial would have visited through all interaction types and their examples. Also, is there any feature to transit to a state "after delay" by itself without any tap or hover?
Just use "appear" interaction and set the delay time
Thanks for the tut! Would be top notch if it had graphics for pressed buttons.
It does!
Cm' PAW nent 😂 great tutorials!
Hi please can I use framer as a showreel for my projects?
Mostly video projects.
How would you make a question auto-collapse in your FAQ, so that you can't have all of the questions opened at the same time? I can't seem to find a way to do this so far.
These videos are fantastic, but the resolution is so high that even on an iPad Pro I can’t read anything onscreen. Can your demos be a bit larger?
I can keep that in mind, thank you for letting me know!
Hi @Benjamin, I find that I can edit my components in the property section. What am I doing wrong?
Would I have to create a new variant for each custom accordion item? Since there doesn't seem to be a way to edit the content of the component itself yet. Thank you, and great video!
Thanks for making these videos 😍
9:47 I'm sure website cookies would love this comPOnent
Thanks!
I am trying to create a button right now - but I don't see the "title" section and am unable to change the title property of other buttons. Is this something that's changed in an updated version of framer?
How do i actually change the text within an accordion component
Can you create an overlay for a button in a nav component? Just a button for the complete nav bar items
Hi, first of all, thank you. I really love your product and your lessons. when I convert the element to a component I can no longer edit his padding on tablet and mobile and I have to create variants. am I doing something wrong?
HI, is there any video tutorial to select tabs and change state when i click on it ,
the case am trying to do is i have section and cards change when i change tabs
it's working but tabs when i click it dosnot change state and the previouse selcted stay at on click state.
How can you add an animation to the interactions?
I copied over a carousel component (similar to the one above) from another theme and pasted it on to my file. But once I change the components into a frame so that I can edit the contents, the scrolls and interactions stop working! Am I doing it wrong?
Hey, thank you for the great video! I have the following question: Is there a way to make the Gradient Number components appear smoothly? I have a similar case now, where I want to animate a Card hover, where on hover a container appears, but it seems that I can't control the animation of this container.
Hello, thanks for the great explainer videos. I have a question regarding best practices. Let's say I have a section that is common among many pages like the hero section. How can I save that one as a sort of component? Is that a best practice you would recommend? Obviously the text and image will be different for each page so not sure how to go about this. I am basically loooking for something like "Symbols" in Webflow. Is there anything like that?
i suggest you using small and simple components
Q : Why does it show up as Click, not Tap? It works the same, but I want to know why
Are components account-wide or only project-wide? And, if only latter, can they be easily copied over from project to project?
Project wide, and yes they can be easily copied from project to project. They can even be updated remotely from the source project!
Is there a way to create the accordion animation so that the dropdown pushes existing content on the page down instead of appearing over it?
Dutch accent on top 💯
Here is the solution for the beginning of the video:
Step 1: Make a simple frame (press F + drag mouse on canvas)
Step 2: Insert text into frame (press T + click into the frame, enter your text e.g. "Hello")
Step 3: Select the frame, right click -> create component, enter a name e.g. "Button"
On the left hand side panel, use Layer and Assets to switch between views.
Congratulations, now you know another important step for making great websites!
Before you created the component at 0:16 the frame width & height sizes were set to "Fixed". After you created the component and went back to the Home page using the breadcrumb bar the sizes switched to "Fit" at 0:34 | How did this happen? I tried it myself and it didn't work!
need the other half of the video!
Is it possible to edit text as variant? If not, how are we supposed to create tabs in the topbar? Each tab has hover/pressed state, and we would want to use variants to apply those states on other tabs.
I have the same problem and i saw your comment. Can't we really change the text of the component or am I unable to do it? thanks
Same issue here - have you found a solution? :)
why can"t we add transitions to hover and pressed versions of variants (which appear under each variant)?
How to make the component from 13:05 responsive?
I think there's something wrong with the "Fixed Position", it is unclickable. When I tried to fix position the navigation bar of my design, it is really unclickable, I already turned it into stack and still "fix position is unclickable. Is there anyway how to do that?
Hoping that you notice my comment👋
Nice tutorial!
Does variant 1 have to conclude all layers which only show in other variants? Because there are a lot of layers in variant 1 looks no need to exist.
Yes, the primary variant / variant 1 has to include all layers. All layers are shared, the hierarchy cannot change across variants, only the properties can change. So "deleting" a layer in variant 2 is really just hiding it.
@@Framer Got it. Thanks for reply😆
Can't wait further tutorial 👍
This is not working for me. If I set answer to "Visible - No" animation is happening only on arrow.
I am using components to create buttons, but I can only add a link to a button when editing the component variant, does that mean that for each button linking to a different page I have to create a new variant?
I have the same question and I'm trying to find a solution to this to no avail. :(
greatt, request : "searching feature in framer"
is there a limit to how many components you can create inside 1 main component?
Nope
I would love to buy your product, but I'm struggling to understand what you're doing. In each example, you start off with items already in place. For example, in the variants section for One, Two, and Three, You have a navigation pane and a content pane. How did this get there? You don't show that part of the build. It's just magically there and we're supposed to figure it out I guess. Frustrating.
For anyone feeling this in 2024, have a look at Framer University. They have made hours of content starting from the basics and leading up to more advanced stuff like this. Ben is amazing. 😬
It says, it’s launching soon. What are you talking about?
I think you should eliminate the option of creating variables to override components. I come from Figma and in figma it's much easier to modify an instance. You only have to modify the properties you want from the right panel.
Omg yes. I've been trying to figure out how I can edit my instances on a card I have created. But it seems like for every card it has to be a new main component on it's own which is cumbersome
is there a setting Called Program*, its default is set to *Agressive TEwNice tutorialch is making that sNice tutorialtty static soft, change that one, once to
I don't have the appear interaction option - does anyone know why? or where is gone?
0:18 - you already lost me, how did you create this button?
Create a video on integrating custom code.
Hey framer can you please make a tutorial in how to make an input field manually nad customizable like the old version of framer because the latest version I cant create a input fields it is a build in form i cant customize i want a tutorial that you can manipulate the input fields like before. Inthe old version you can just import an a input fields by import a components bu now the lates version is you impott a form but you can cuztomize famer can you please fix this problem
You can find the old inputs under the Canvas pages. You can even copy and paste them into Framer Sites
HEY YOU soft LIKE AI AND TNice tutorialS VID SO HELPFUL
There is no option to add input box?
Can you nest components within others components like in figma?
Yes! I could make a dedicated video on that topic. You can test components and you can even lift variables.
@@Framer that would be great 🙌
@@Framer please do make a video about it
Who chose the background music?!?!?!?!
Needs a simple html/css element import tutorial. The current ones assume (basic) React knowledge which slightly defeats the point of no-code.
I am on a web framer and nothing works like in here. Can't find the right tutorial to learn prototyping.
Please framer please make an a tutorial in how to make a customizable input fields not a build in and have already a sign in button or a buildin form I dont like thenew version the old version is more better cause you can just impitt and install a input fields buttons and etcbut now it is a build in idont like the build inform i like the old version that you can just input a input fields not build in form
you don't say how to delete an Interaction ? between variants
how to combine links gmail
comPOWnent!
20 seconds in and I hear for the first time about the CMD+K shortcut. I’m an idiot. 🤦🏽
Maybe next time start with where you are... Canvas, web, layer... just say the structure and where you are now. Took me quite long to find out how to just start.
I like compoooonents 🤣🤣🤣
comBOnent
Dutch?
You are dutch
comPOnents
Nou Inglish
My eyes always suffer when I see a Framer tutorial. Please increase your UI scale a bit.
Just a Suggestion: Please do not show desktop direct show framer window. The video looks blurry
The entire Window in Dark mode is readable.
Who's making fnf covers lmao
Nothing without HTML/React page export
Ehh not really needed
@@chidorirasenganz so… how you use Framer in commercial projects?
ComPOOOnent. Im sorry Benjamin seems like a great guy and all but this is just driving me crazy. I literally cant watch the video I get so annoyed. Brings out my misophonia I guess. Im sure am not alone with this.