Framer Tutorial: Components with Interactions, Variants and Variables

A Framer Tutorial about Components, covering Variants, Variables and Interactions. I’ll show you how to create a simple button, an interactive toggle, an interactive feature block displaying unique content, and an auto-sizing accordion component.

#website #webdesign #framer

[considercaption]

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

[krashvash]

just love the way he says "coMPONents"

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

[robsonoliveira]

Components are indeed an extraordinary resource!

[shpcpc]

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

[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

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

[gdesign]

How to make the component from 13:05 responsive?

[shivampednekar]

where can I find that background wallpaper 👀

[polystormstudio]

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

[marioparra]

How can you add an animation to the interactions?

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

[winnifredDanmusa]

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

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

[jessemalisa]

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

[marsdiggy]

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!

[shreysharma]

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?

[deemee]

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

[jessemalisa]

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

[AlisterDiaz]

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