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
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!
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.
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?
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 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?
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
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!
🎯 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
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?
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 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?
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?
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.
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?
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.
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?
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.
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
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.
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
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!
just love the way he says "coMPONents"
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" 😂
I keep coming back to those basics videos because I STILL don't know how to properly use the software. I'm gonna cry
Components are indeed an extraordinary resource!
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
Very helpful! Thank you!
where can I find that background wallpaper 👀
9:47 I'm sure website cookies would love this comPOnent
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
Thanks for the tut! Would be top notch if it had graphics for pressed buttons.
It does!
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!
Cm' PAW nent 😂 great tutorials!
How to make the component from 13:05 responsive?
How can you add an animation to the interactions?
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.
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
Hi @Benjamin, I find that I can edit my components in the property section. What am I doing wrong?
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?
need the other half of the video!
How do i actually change the text within an accordion component
Thanks for making these videos 😍
Hi please can I use framer as a showreel for my projects?
Mostly video projects.
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!
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?
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
Dutch accent on top 💯
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!
🎯 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
Thanks!
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?
Needs a simple html/css element import tutorial. The current ones assume (basic) React knowledge which slightly defeats the point of no-code.
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 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👋
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?
Can you create an overlay for a button in a nav component? Just a button for the complete nav bar items
greatt, request : "searching feature in framer"
Just finding it difficult to edit the template I chose. You edit text and when you go back to the home, the text doesn't change
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?
Q : Why does it show up as Click, not Tap? It works the same, but I want to know why
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 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? :)
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
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!
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.
HEY YOU soft LIKE AI AND TNice tutorialS VID SO HELPFUL
0:18 - you already lost me, how did you create this button?
why can"t we add transitions to hover and pressed versions of variants (which appear under each variant)?
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. :(
This is not working for me. If I set answer to "Visible - No" animation is happening only on arrow.
Create a video on integrating custom code.
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 👍
I don't have the appear interaction option - does anyone know why? or where is gone?
is there a limit to how many components you can create inside 1 main component?
Nope
Who chose the background music?!?!?!?!
There is no option to add input box?
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
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
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
I am on a web framer and nothing works like in here. Can't find the right tutorial to learn prototyping.
how to combine links gmail
you don't say how to delete an Interaction ? between variants
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.
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
20 seconds in and I hear for the first time about the CMD+K shortcut. I’m an idiot. 🤦🏽
Dutch?
comPOWnent!
You are dutch
I like compoooonents 🤣🤣🤣
comBOnent
comPOnents
Nou Inglish
My eyes always suffer when I see a Framer tutorial. Please increase your UI scale a bit.
Nothing without HTML/React page export
Ehh not really needed
@@chidorirasenganz so… how you use Framer in commercial projects?
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
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.