Framer Tutorial: Components with Interactions, Variants and Variables

[@asetzharkenov7109]

this guy really loves his coMPONEnts

[@imagrinner2828]

Thanks, I had read your comment at the beginning so I heard it throughout the hole video.

[@lfgraf]

Benjamin is such a rockstar

[@considercaption]

I love all these tutorials! You guys should make one on these Gradient backgrounds!

[@Benga-Eno]

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!

[@VonSnakes]

You mean "c'POnent" 😂

[@krashvash]

just love the way he says "coMPONents"

[@shpcpc7257]

I keep coming back to those basics videos because I STILL don't know how to properly use the software. I'm gonna cry

[@aireviewstudio]

🎯 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

[@robsonoliveira7552]

Components are indeed an extraordinary resource!

[@shivampednekar3301]

where can I find that background wallpaper 👀

[@JasonMelanconEsq]

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.

[@jaywalker.]

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. 😬

[@ConnnectingDotss]

It says, it’s launching soon. What are you talking about?

[@winnifredDanmusa]

Hi please can I use framer as a showreel for my projects? Mostly video projects.

[@deemee009]

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

[@boschulte]

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

[@SamuelOpatola]

Hi @Benjamin, I find that I can edit my components in the property section. What am I doing wrong?

[@shreysharma9653]

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?

[@muhammadiyad2153]

Just use "appear" interaction and set the delay time

[@jessemalisa6804]

Thanks for the tut! Would be top notch if it had graphics for pressed buttons.

[@Framer]

It does!

[@santosortegap]

Cm' PAW nent 😂 great tutorials!

[@libertarianarchitect]

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.

[@marsdiggy8]

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!

[@gdesign6528]

How to make the component from 13:05 responsive?

[@Asad_Ziaa]

How do i actually change the text within an accordion component

[@marioparra9337]

How can you add an animation to the interactions?

[@melodyhwang698]

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?

[@lukedorny]

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?

[@Framer]

I can keep that in mind, thank you for letting me know!

[@empathizers]

Thanks for making these videos 😍

[@markomilosavljevic7272]

This is not working for me. If I set answer to "Visible - No" animation is happening only on arrow.

[@rabinmet]

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?

[@vankiz]

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.

[@peterputzer212]

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?

[@MicheleMessina-Spline3DMaster]

i suggest you using small and simple components

[@grdnrush]

Q : Why does it show up as Click, not Tap? It works the same, but I want to know why

[@k16e]

Are components account-wide or only project-wide? And, if only latter, can they be easily copied over from project to project?

[@Framer]

Project wide, and yes they can be easily copied from project to project. They can even be updated remotely from the source project!

[@Airboxr]

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?

[@AlisterDiaz]

Can you create an overlay for a button in a nav component? Just a button for the complete nav bar items

[@graphic-nations]

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.

[@polystormstudio]

0:18 - you already lost me, how did you create this button?

[@makisam3969]

why can"t we add transitions to hover and pressed versions of variants (which appear under each variant)?

[@TanimImam]

need the other half of the video!

[@ForhadSattar]

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?

[@smdv9284]

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?

[@smdv9284]

Hoping that you notice my comment👋

[@tylerwilliams5810]

Thanks!

[@saidalahyane]

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!

[@sanketdeorukhkar4122]

is there a limit to how many components you can create inside 1 main component?

[@Framer]

Nope

[@lagatta5221]

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?

[@jaykeydelmar]

I have the same question and I'm trying to find a solution to this to no avail. :(

[@emilieldr]

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.

[@erenkocak]

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

[@chainthat2465]

Same issue here - have you found a solution? :)

[@hjhjhjhj77]

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.

[@Framer]

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.

[@hjhjhjhj77]

@@Framer Got it. Thanks for reply😆 Can't wait further tutorial 👍

[@christiancabanillas1932]

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.

[@melvintan9308]

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

[@jessemalisa6804]

9:47 I'm sure website cookies would love this comPOnent

[@danieladepaz588]

I don't have the appear interaction option - does anyone know why? or where is gone?

[@mihiryadav221]

There is no option to add input box?

[@johannesmarkusfroech]

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!

[@cttest3193]

Dutch accent on top 💯

[@prideIndia3904]

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

[@mazizifalaqi673]

greatt, request : "searching feature in framer"

[@intervention_w_myself]

Who chose the background music?!?!?!?!

[@chidorirasenganz]

Can you nest components within others components like in figma?

[@Framer]

Yes! I could make a dedicated video on that topic. You can test components and you can even lift variables.

[@chidorirasenganz]

@@Framer that would be great 🙌

[@mt000mp]

@@Framer please do make a video about it

[@aaronburchart5526]

you don't say how to delete an Interaction ? between variants

[@playpiano2264]

Create a video on integrating custom code.

[@harshitguptaphotographystu5162]

HEY YOU soft LIKE AI AND TNice tutorialS VID SO HELPFUL

[@peterkortvel]

I am on a web framer and nothing works like in here. Can't find the right tutorial to learn prototyping.

[@bloodheist5212]

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

[@neilnicholsii9393]

You can find the old inputs under the Canvas pages. You can even copy and paste them into Framer Sites

[@Trazynn]

Needs a simple html/css element import tutorial. The current ones assume (basic) React knowledge which slightly defeats the point of no-code.

[@bloodheist5212]

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

[@yogawijaya8349]

how to combine links gmail

[@reyesoperator]

20 seconds in and I hear for the first time about the CMD+K shortcut. I’m an idiot. 🤦🏽

[@peterkortvel]

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.

[@fqras]

Dutch?

[@Martin-zq4fq]

You are dutch

[@ЕвлампийБрзджинский]

comPOWnent!

[@akanjidev]

I like compoooonents 🤣🤣🤣

[@ekyas]

My eyes always suffer when I see a Framer tutorial. Please increase your UI scale a bit.

[@danield2398]

Nothing without HTML/React page export

[@chidorirasenganz]

Ehh not really needed

[@danield2398]

@@chidorirasenganz so… how you use Framer in commercial projects?

[@leodwivedi]

Just a Suggestion: Please do not show desktop direct show framer window. The video looks blurry The entire Window in Dark mode is readable.

[@cozy9016]

comBOnent

[@thangbui5185]

comPOnents

[@YamilethHernandez-l3l]

Nou Inglish

[@danishhhhh0]

Who's making fnf covers lmao

[@atkatsom8745]

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.