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!
I've got a challenge for you (well, for me, but I bet you can figure it out faster haha) I've got a component I want to use on each page that contains a stack of 3 elements to form a "slider". The first and third elements are opposite characteristics (like "serious/funny") and in the middle column, I have a graphic made from a single line and a circle that is placed on the line to represent where this client falls on this spectrum, like this: [ serious --O------- funny ] I can create the 1st and 3rd elements as variables, no problem, those are just text. But I want to create a variable for the graphic that places the dot at intervals of 10% (0, 10, 20, 30%...), but the aspects that are "variable-able" don't seem to give me what I'm looking for. First I thought I could create a stack with PADDING variables for the dot, but I really need a PERCENTAGE to keep responsive settings clean. With this setup, if SIZE was a variable I could use the relative width to expand and contract to the relative size I need, but size isn't a variable setting option. I just tried creating multiple stacks (each with a circle inside, since I can't set variables onto graphics) at the various points and then having an OPACITY variable for each so I can hide all but one, but that also gets wonky on mobile since the size of the parent stack adjusts size. Plus, it creates 10 variable options instead of just 1, which feels messy. Can you think of any other way to do this?
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!
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.
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
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!
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,
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.
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.
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
thanks for providing a clear explanation of components jesse. lots of love from India ❤
My pleasure!
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!
Some of the best edits I've ever seen
Thanks so much!!
so amazingly a clear explanation for me!
Thank you so much for watching! I’m so glad you enjoyed it!
Thanks for the amazing tutorial🌸💮
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!
I've got a challenge for you (well, for me, but I bet you can figure it out faster haha)
I've got a component I want to use on each page that contains a stack of 3 elements to form a "slider". The first and third elements are opposite characteristics (like "serious/funny") and in the middle column, I have a graphic made from a single line and a circle that is placed on the line to represent where this client falls on this spectrum, like this:
[ serious --O------- funny ]
I can create the 1st and 3rd elements as variables, no problem, those are just text. But I want to create a variable for the graphic that places the dot at intervals of 10% (0, 10, 20, 30%...), but the aspects that are "variable-able" don't seem to give me what I'm looking for.
First I thought I could create a stack with PADDING variables for the dot, but I really need a PERCENTAGE to keep responsive settings clean. With this setup, if SIZE was a variable I could use the relative width to expand and contract to the relative size I need, but size isn't a variable setting option.
I just tried creating multiple stacks (each with a circle inside, since I can't set variables onto graphics) at the various points and then having an OPACITY variable for each so I can hide all but one, but that also gets wonky on mobile since the size of the parent stack adjusts size. Plus, it creates 10 variable options instead of just 1, which feels messy.
Can you think of any other way to do this?
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!
Nice tutorial, thank you
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.
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
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!
thank you!!
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,
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.
Yes you can, you can insert custom code and create code components
@@JesseShowalter Fantastic! Thanks for responding.
wow
Dude stop disappearing
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.
Thanks for the feedback 😊
what a miserable comment lol
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