Framer Masterclass: Learn Components in 30 Minutes

[@framer.university]

If there’s anything that wasn’t explained clearly in the video, and you still have questions, please leave your feedback in the comments! 💙

[@Schmurdel]

Events was quite quickly. Would like to get more information about that.

[@badsevenfirefoxisback1541]

Exactly, exactly we need more often videos dear Nandi

[@framer.university]

how often should I upload?

[@DJMixtApe808]

Without doubt the best nocode tutorials on the internet, across all platforms, not just Framer. Thanks very much for the clear, informative and creative content.

[@framer.university]

really appreciate it! 🙏 thank you for watching :)

[@siddharthgondaliya9624]

Hey Captain, Pure respect and gratitude towards your work, Love from India!

[@framer.university]

Appreciate you mate! Your support means a lot 🫡

[@fadi.optimist]

This is the 2nd time I can't resist pausing the video in Framer University and jumping here to comment my gratitude for Nandi-this guy is A-M-A-Z-I-N-G. 100% feels like he's in the right corner in the universe-the perfect mentor for Framer, Man, the intros are always smooth yet 🔥

[@framer.university]

Love u guys so much! I have best students a teacher can wish for. Thanks so much for the support 🫶🫶

[@franlee7028]

I didn't realize events variables could be used like this; it's really cool!

[@framer.university]

they're super powerful! :)

[@tanthanhle2293]

Thank you, Nandi, for how you conducted the event variables, which really inspired me to adapt the feature to create a slide menu. I had some troubles with overlay before I saw your video, Now, I know how to deal with the issue. I'm a big fan of Framer University, and from several of your first tutorials, I learned a lot from you. On again thank you a lot.

[@framer.university]

Super happy to hear this :) You're very welcome!

[@Ari-lv8nc]

Your voice recording sound quality is great for hearing 👌

[@framer.university]

Super happy to hear this since I've made some improvements to the recording and post production. Thanks :)

[@brtmzr]

Straight to the point, love it

[@framer.university]

🫶 thank uu

[@appstudioux]

Really like Framer's component facility, much easier to digest that Webflow's classes / combo classes which can get v.complex to manage over a project I imagine!

[@framer.university]

I agree! Framer makes it so simple and easy to learn for non tech people 👌

[@AJ-ge4bc]

Kindly make more of these on other elements like frames, transition, etc

[@framer.university]

More to come! This is just the warmup ;)

[@DanielMaduenoG]

I've been trying to understand how to use event variables for so long and I believe this is the first tutorial I've come across that explains how to use them. I would really appreciate to see more examples of how we can use them. Thanks Nandi, you rock! 🙌🤘

[@nobody-bt7mu]

Just started learning framer to create my portfolio. I'm already quite familiar with Figma but it can still get confusing so your videos are perfect!

[@framer.university]

You can do it mate! Keep learning :) I'm glad my vids help!

[@jarosoho2049]

Thank you Nandi - calm & informative, as ever.

[@framer.university]

Thanks mate! :) glad u liked this

[@foyzulhasan4242]

I created Button , Toggle Component . Soon gonna make last 2 .Thanks Nandi

[@framer.university]

let's goo! practice makes perfect :)

[@colt_parker]

I actually just started learning framer today (same day this video was published) and needed a good tutorial on components ... right in time!

[@framer.university]

Hehe great timing! Let me know if something wasn’t explained clearly in the video! Feedback is super valuable! 🫶

[@VinitShimpi-qx9zs]

another useful video. thanks nandi ♥

[@framer.university]

glad u enjoyed it :)

[@jiangjames6959]

you are awesome and inspiring! appreciate

[@framer.university]

Thank u sooo so much 🫶🫶

[@davidroberts1398]

Way to go Nandi, you’re awesome

[@framer.university]

appreciate it! 🫡

[@sorayaouzara4619]

thank you so much buddy for your awesome tuts! legend!

[@framer.university]

My pleasure! Glad you like em' :)

[@notdoshi.1404]

Nandi make a tutorial on that dynamic menu component in the beginning of the video!! thats something you should post on youtube cause explaining what components are, is explained by thousands of others framer experts.What you teach and explains in the tutorials of building complex components which can be helpful in websites makes us watch and wait for your new videos!!!!

[@framer.university]

I might make a tutorial for the dynamic menu. Until then take a look at the remix: framer.university/resources/dynamic-action-bar-in-framer

[@altamashkhan5870]

Thank You so much for this video

[@framer.university]

I’m glad it was helpful 💙

[@lailaalbuquerque5036]

you make framer seem less scary, thank you :)

[@framer.university]

really my pleasure! :))

[@pedrosoareshealing]

Great quality and value ! Thank you so much :)

[@framer.university]

thank you so much!

[@chotvana]

nandi youre amazing

[@framer.university]

[@almighty.saumya]

He really said I am gonna bless u

[@studioxoux]

Your video are amazing thanks !!!

[@framer.university]

Glad you liked it 🫶

[@colt_parker]

Really love these videos, thanks so much!

[@framer.university]

Thanks! Im glad u like them :))

[@eduardoluchtenberg]

Keep going, great masterclass!

[@framer.university]

thanks so much! i'll keep going 💙

[@yesblad32]

Dope video pro. To go back to the ON state you can click at the top where it says interactions and change it from "Off" to "Cycle Variant" saves yu having to link back to it

[@framer.university]

That’s a nice trick! Never even thought of using it for click interaction. I usually use it for auto looping appear interactions. Thanks for the tip 🫶

[@mrblack3163]

nice tutorial. Great, thank sir

[@framer.university]

Happy I could help :)

[@joshuagervais9319]

Thank you so much !

[@framer.university]

You're welcome! 💙

[@bernardpetter658]

Hi Nandi. Love your style and your pacing is super. Learning lots. Are you using Loom to present?

[@framer.university]

Thank u so muuch

[@kafiahammed3548]

Love framer❤

[@framer.university]

Framer's good 💙

[@tylerwilliams5810]

Good job!

[@framer.university]

Thanks 🙏

[@malikrizwanraee9060]

great Sir

[@framer.university]

Much appreciated

[@nicktodtube]

These are great tutorials... But one tutorial I haven't seen that would greatly help me and probably a few others. How to effectively navigate the support community and best practices to keep your sites up and running, because let's face facts. No matter how wiz-bang beautiful your site is, it's nothing if it's down because of some Framer bug. But please, carry on

[@framer.university]

I have some videos on best practices: framer.university/lessons/5-mistakes

[@badsevenfirefoxisback1541]

3 times a week, 12 times a month. So that we can master Framer faster.

[@framer.university]

aye aye, captain!

[@edenassos]

You're not mastering Framer unless you know how to code. Every other thing needs code to solve.

[@djangoklos5714]

@@edenassosyes, for now :)

[@simplyamy5124]

Thank u so much.

[@framer.university]

my pleasure!

[@emm5582]

Very well explained!! Thanks for making the video and sharing these gems with us! I'd love to know how to do the bento card animations :) like the ones that show the benefits/ features of a product Thanks!! Have a great day!!

[@framer.university]

Hey! Thanks for the kind words! For a bento anim, you turn each bento box into a compoment and you add a hover state to each, where you change some things about the comp like color, element’s position change and so on.

[@joaofilipesilva33]

Master content! So my question is: in last part of video (overlay) how can i block scroll from behind the overlay ?

[@framer.university]

there supposed to be a block scroll property on the right properties panel of the overlay.

[@AJ-ge4bc]

18:00 Also kindly make a video on transitions

[@framer.university]

Anything specific you want to know about them?

[@AJ-ge4bc]

@@framer.university Spring transformation properties especially damping, mass, stiffness, etc

[@AJ-ge4bc]

And also when are you going to make framer university live? and will it be paid or free?

[@1013dt]

Omg! It’s niiiiiiiiiiiice ❤

[@framer.university]

Thank uu 🫡

[@dreamerz95]

Your videos are top notch. Any ETA for your paid course.

[@framer.university]

Really appreciate ya! No ETA yet. Wanna release something special. Needs time!:) Sorry mate and stay tuned 🤝

[@kevenasley4171]

Thanks!

[@framer.university]

i hope this video will help 🫶

[@arthurcueff1264]

Great video, thanks for the valuable content. However, I'm having trouble understanding the notion of event for the overlay. Why isn't event 1 displayed for the overlay and why do we have to create an event chain?

[@framer.university]

Good question! Because the event we create is always only visible on one layer back. So we have a nesting like: Homepage > Resource Card > Quick Preview Button. The event created on the Quick Preview Button will be accessible on one “layer of nesting” back, so in Resource Card. There, we can use it for an interaction, or if we decide that we wanna use the event on one layer back (Homepage) we can create another event on it, making a chain of events, pulling it to the outside (Homepage) so we can use it there as trigger for “show on” property of overlay. Lmk of this explanation makes sense! :)

[@Ali-xd8ei]

One more thing I would like to ask that is it possible to create an animation on the switching from one page to another from the specific section of home page like CMS collection, and it will gradually cover up the whole of the whole screen of the website or an mobile instead of opening the page on another on another tab let me know if it is possible in the Framer because I have seen so many websites having such animations and this animation just look like amazing

[@framer.university]

Are you talking about an overlay? Like the quick preview interaction on framer.university/resources (the button on top right corner of cards)?

[@notdoshi.1404]

@@framer.universityi think what he trying to say is, Imagine pictures scrolling in a carousel and when you click on one of images instead of opening a new webpage he wants to animate the image and scale it to a bigger size covering the whole screen with the information regarding it on the same page and is also scrollable.

[@netanel-yl7mj]

you rock man

[@framer.university]

🫶🫶

[@sampassmore6356]

I would love a video on how to create complex components like the one at the beginning that you used as an example

[@framer.university]

noted it! btw: if you want to check it yourself link to this component is in the vid description :)

[@shroots88]

Hey Nandi, thank you for this tutorial, great lesson! For component variables, can we set up different hover states? So for example in your design, if i was to hover on the image for "Cursor image trail" i'd see a different image inside the card - can this be achieved with component variables? Thank you again!!

[@framer.university]

Hey! Appreciate your kind words. Yes you can definitely achieve that. On the hover state you can remove the variable and add a new one to it or leave it on a fixed value. Hope this helps!

[@shroots88]

@@framer.university Ah okay, makes sense. Will give it a try, thanks for responding! :)

[@Chirag-Madhu]

I wasn't aware about event thingy, If I knew this few weeks ago, I would've pull off my project sooner. But overall thanks for sharing this.

[@framer.university]

Glad I could help! :)

[@glagraphy6533]

You should consider introduce to the page transitions a funtion that can make a transition with a mask (SVG or shapes) this will be amasing

[@framer.university]

I might make a video on page transitions in the future! thanks for the suggestion 🫶

[@glagraphy6533]

@@framer.university thanks for the replay, i bougth a package from a guy with transitions but in one of the upgrades in framer stop working, i would like to have any advice for solving this because i dont have any responde from the creador, but again, thanks for the support you are doing grate! ❤️

[@MatejBazar]

Thank you for the great video. I’d like to ask about a problem I’m encountering, and I’m not sure what I’m missing. I need to set the component to the ‘Fill’ option so that it adjusts to the screen width. The component always sets itself to ‘Fixed,’ and I can’t work with it further. Where am I going wrong? Thank you very much.

[@framer.university]

It can only be set to fill if the parent frame is a stack.

[@AJ-ge4bc]

And also the purple glasses in the thumbnail

[@framer.university]

Hehe. Component™ glasses merch. 💜

[@Ali-xd8ei]

Hey Nandi is it possible to create the pixel distortion effect in Framer on hover, also I wanted to create the fluid scroll (horizontal or vertical whatever you would like) in Framer and when we scroll, stationary frames slightly changes its style (like a rectangle to oval) and whole following frames follow that effect / animation and afters the scroll stops it goes back to its original state and vice versa Please reply 🙂

[@framer.university]

Can you send an example of what you’re looking to create?

[@zerschmetterling7557]

Thank you so much for this and all the other vidoes! I am really grateful for your help! But I have a question, is it possible to make a variable for Lottie Files? Or only for images, texts, colors etc?

[@shifatmasud]

Is there key/gamepad & drag interaction available for interactive components in framer like figma?

[@framer.university]

Not yet!

[@dhruvalmayavanshi9815]

Thanks for this. That click event for components was super useful. 🫡

[@framer.university]

Happy to hear it mate :)

[@SquaredbyX]

How do you copy the styles from hovered and pressed to the next variant?

[@framer.university]

Unfortunately you can’t do that.

[@nuel0xx]

Thank you very muchh

[@framer.university]

appreciate it!

[@Raunakyadav-m2j]

thanx

[@framer.university]

Anytime 🫶

[@MrInvisible5119]

Transitions on component variable/events would be great to demonstrate.

[@mw9968]

Is there a reason for the toggle component you didn’t use the pressed state over creating a new variant?

[@guillermocastrof]

Hey Nan!! I’m encountering an issue with a component I created, and I was hoping you might be able to help. The component has a "Read More" button that triggers a state change, and it works perfectly when previewed individually. However, when I add the component to my main page (under the "main" layers), the button stops working - I can’t click it at all. Do you have any idea what might be causing this issue or how I can fix it?

[@framer.university]

You probably have some layers over the button that are preventing you from interacting with the button underneath them. Identify the frame that blocks the button, and add “pointer events none” style to it.

[@worksmart8166]

Hi nandi. I try to recreate a website for my practice but i don't know download or link the same video or images that are in the original website. Please can you help me

[@framer.university]

You can go into inspect mode in the browser and get assets from there. Google “Getting Website Assets From Inspector”.

[@bekabuchashvili]

but is it possible to change the texts in button instances?

[@framer.university]

watch the full video hehe 22:35

[@leonardoaubert]

E-vent 29:51

[@framer.university]

Thanks bud! Just checked the correct pronunciation. Will do my best to improve :)

[@muhammadsohel5124]

how to apply both gradient and solid colors to one heading?

[@framer.university]

If you can’t simply select the part of the text and change the color, then you’ll need to create separate text layers for solid and gradient. Hope this helps:)

[@igwekenneth8647]

G.O.A.T

[@framer.university]

🫡🙏

[@ffmde8268]

and why when i create the button as a component it doesnt show me the button component but rather only a rectangle variant dont get it....

[@Maxzis]

I still have trouble linking different variables to different things. I have multiple items in my nav bar which are 1 component because they share an animation. I've changed the text each one has, but I can't change the link each one has.

[@Maxzis]

1 second after commenting I found out: I have to create a link variable for the text as well, now it's an option.

[@framer.university]

great you solved it! let's gooo

[@Captainn_4ever]

how could i join Framer University ?

[@framer.university]

Wait for the release (next year) and then you can join:) 🤝

[@ffmde8268]

some elements are not working the same even if i exactly apply the same as shown in the tutorial, for example, the frame within the button when you apply the radius to 100, which i did the same, mine doesnt look at all like an ellipse no matter how much i increase the radius, weird..

[@edenassos]

For the other commenters, you can't really master Framer until you know how to code. So much is off-limits without knowing how to code, and so much is off-limits even if you know how to code. What a dilemma.

[@framer.university]

Well, I don’t know how to code and I think I mastered Framer pretty well lol

[@edenassos]

@@framer.university Yeah, you mastered Framer for what it was intended to do, no-code and I can tell you are very proficient with it but imagine how much further you could go with code. There is a whole new world of stuff you can do with code in Framer. It's probably a matter of "you don't know what you're missing until you get there." I can see you know the importance of code as well since you made a video about ChatGPT a while ago. Also, you collaborate with coders to bring free components to the public. Framer treats developers as second-class citizens from how lacking the documentation is and also the code feature set in Framer is like a ghost town. No property controls for code overrides which they could easily add. Buggy code editor. No APIs for anything, unlike Wix Studio(which has APIs for literally everything). Much respect to you though, you carved out a niche for yourself for no-code and I'm all for it. Even developers like myself would rather not touch code if I don't have to.

[@framer.university]

Yeah definitely there are things you can’t do in Framer, but that’s exactly why I’m releasing components for highly requested features, making them accessible for everyone. Many of the things you’re mentioning are coming, such as property controls for code overrides or APIs. Stay tuned mate 🤝! Framer is gonna be big. They’re not stopping anytime soon. All gas, no brakes.

[@edenassos]

@@framer.university Yeah you are the Mother Teresa of Framer. Haha. Also I trust you, I know you have insider access to the latest stuff. Property controls for code overrides are finally coming ? That’s going to be lit.

[@framer.university]

🫡🫡

[@marziz]

Gets confusing when you get the overlay. That part needs more details.

[@vibrantreach]

thank you nandi , i just sent you an email back

[@jesseberlinjames]

Thanks a lot!

[@framer.university]

my pleasure! :))