Mastering Framer Components | Variants & Variables

In this comprehensive tutorial, we delve into mastering Framer components, focusing on Variants and Variables. Learn why using components can enhance reusability and consistency in your projects. We'll guide you through the process of creating components, understanding and using variants, and implementing variables for your components. We'll also cover interactive variants, states, and working from the Primary to affect everything else. Join us as we rebuild an accordion using nested components. This tutorial is designed to elevate your Framer skills and enhance your design projects. Don't forget to like, share, and subscribe for more tutorials like this.
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:

🏆 //////////// Join my free member's community to get access to perks:
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma

🖥️ ////////// I Build websites in Framer

🖥️ ////////// I Prototype Magic in ProtoPie

📅 ////////// I run my life with Notion

0:00 Intro
0:35 Basics
3:36 Variants & States
7:47 Variable Properties
12:06 Nested Components
14:09 Accordion
19:06 Outro

[kishorekumarseenivasan]

thanks for providing a clear explanation of components jesse. lots of love from India ❤

[blanaroo]

This is the fourth video I've watched on Framer's components and it's the first one with clean and clear information. Thank you + Subscribed!

[daniellchukwu]

Some of the best edits I've ever seen

[이상묵-ly]

so amazingly a clear explanation for me!

[hellogianni]

Nice video, really enjoyed it. I especially appreciate the part on how to use nested components!

I just used this for sections I'll re-use within the case study pages of my portfolio site. For example, I created an intro section component (with all its breakpoint settings) and used variables to make editing it on each of my case study pages a breeze! I was initially creating variants for each headline which was... not right lol

I had a question but just figured it out (you already know this but in case someone reads this comment with the same question) - if you need to put a HYPERLINK within the text of a variable field, the variable has to be set to "formatted text". If you choose that, the options in the toolbar display a button to "edit content" where you can select headline styles and add links to specific text. Score!

Subscribed!

[rafavaz]

Hi Jesse. Awesome video! It was very helpful. I’m still having some trouble creating a variable icon for a button using the auto layout in Framer. It would be very helpful if you made a video tutorial showing up how to create variable icons for a button. Thank you!

[DevonFrohne]

Thanks so much for sharing all these techniques.

I'm wracking my brain over one piece though - if I have all my icons as components, how can I swap them out in the buttons? It feels like there aren't any options for that.

[SiftaIdrees-dn]

Hi Jesse,

Could you please create a tutorial on how to build an icon library in Framer, similar to Figma? The goal is to have icons that can be reused in components like buttons and easily swapped with other icon instances. Thanks

[fiorecallebaut]

Hi Jesse! Great video, thank you for your very clear explanation. I have a question, what happens if I have the button just like the one you created with shape variants (square, rounded and pill as you did), and I want to add another variant such as hierarchy (primary, secondary, tertiary buttons, with diferent styles), or sizes. how would you do handle that? thanks!

[khalilbenaoumeur]

Hi Jesse, Thanks for the videos, this is great and clear,
I have a question about creative component and in terms of putting data into the variants, is there a way to use the collection list in the components? lets say I'm working on a portfolio website now and I wanted to have all the data information including the images for example to be added automatically, from the collection list that we have already created. just to avoid the extra work ?
thanks,

[jswanson]

Good information. Thanks for sharing. I have a question and maybe an idea for a future video. Can you build a Framer site and then add code for payments or other functions that need very secure functions? I'm thinking of building a site in Framer and then passing it off to a developer for more of these high security options. I know I could also dig into the Framer site to find this out but since you amke such great videos, I'd love to see your thoughts and process. Thanks.

[ekoflexofficial]

i like your video but i HATE your thumbnail. i just hate it. why do you need to do a crazy face to make people click? Your content is great you don't need to do this. look the face of the guy from framer university (ie: Framer Trick: Convert 2D Elements into Interactive 3D): just a normal and a honest face look. very sorry for the comment but you don't need this clickbait face. Thanks for your content anyway.

[SiftaIdrees-dn]

Hi Jesse,

Could you please create a tutorial on how to build an icon library in Framer, similar to Figma? The goal is to have icons that can be reused in components like buttons and easily swapped with other icon instances. Thanks