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

[@franlee7028]

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

[@framer.university]

they're super powerful! :)

[@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 🫶🫶

[@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 👌

[@badsevenfirefoxisback1541]

Exactly, exactly we need more often videos dear Nandi

[@framer.university]

how often should I upload?

[@AJ-ge4bc]

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

[@framer.university]

More to come! This is just the warmup ;)

[@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 :)

[@siddharthgondaliya9624]

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

[@framer.university]

Appreciate you mate! Your support means a lot 🫡

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

[@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! 🙌🤘

[@davidroberts1398]

Way to go Nandi, you’re awesome

[@framer.university]

appreciate it! 🫡

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

[@sorayaouzara4619]

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

[@framer.university]

My pleasure! Glad you like em' :)

[@jiangjames6959]

you are awesome and inspiring! appreciate

[@framer.university]

Thank u sooo so much 🫶🫶

[@jarosoho2049]

Thank you Nandi - calm & informative, as ever.

[@framer.university]

Thanks mate! :) glad u liked this

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

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

[@altamashkhan5870]

Thank You so much for this video

[@framer.university]

I’m glad it was helpful 💙

[@studioxoux]

Your video are amazing thanks !!!

[@framer.university]

Glad you liked it 🫶

[@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 :)

[@colt_parker]

Really love these videos, thanks so much!

[@framer.university]

Thanks! Im glad u like them :))

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

[@kafiahammed3548]

Love framer❤

[@framer.university]

Framer's good 💙

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

[@joshuagervais9319]

Thank you so much !

[@framer.university]

You're welcome! 💙

[@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 :)

[@tylerwilliams5810]

Good job!

[@framer.university]

Thanks 🙏

[@malikrizwanraee9060]

great Sir

[@framer.university]

Much appreciated

[@eduardoluchtenberg]

Keep going, great masterclass!

[@framer.university]

thanks so much! i'll keep going 💙

[@almighty.saumya]

He really said I am gonna bless u

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

[@Raunakyadav-m2j]

thanx

[@framer.university]

Anytime 🫶

[@kevenasley4171]

Thanks!

[@framer.university]

i hope this video will 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! ❤️

[@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! :)

[@netanel-yl7mj]

you rock man

[@framer.university]

🫶🫶

[@1013dt]

Omg! It’s niiiiiiiiiiiice ❤

[@framer.university]

Thank uu 🫡

[@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 :)

[@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! :)

[@AJ-ge4bc]

And also the purple glasses in the thumbnail

[@framer.university]

Hehe. Component™ glasses merch. 💜

[@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 🤝

[@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?

[@igwekenneth8647]

G.O.A.T

[@framer.university]

🫡🙏

[@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?

[@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! :)

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

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

[@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?

[@shifatmasud]

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

[@framer.university]

Not yet!

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

[@SquaredbyX]

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

[@framer.university]

Unfortunately you can’t do that.

[@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:)

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

[@bekabuchashvili]

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

[@framer.university]

watch the full video hehe 22:35

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

[@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:) 🤝

[@dhruvalmayavanshi9815]

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

[@framer.university]

Happy to hear it mate :)

[@marziz]

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

[@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]

🫡🫡

[@vibrantreach]

thank you nandi , i just sent you an email back