Mastering Framer Components | Variants & Variables

Просмотров 3,2 тыс.

% 123

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.
... Remember to Subscribe goo.gl/6vCw64
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Build websites in Framer
framer.link/jesse
🖥️ ////////// I Prototype Magic in ProtoPie
www.protopie.io/plans?ref=jesse
📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/16252
0:00 Intro
0:35 Basics
3:36 Variants & States
7:47 Variable Properties
12:06 Nested Components
14:09 Accordion
19:06 Outro

Опубликовано:

23 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 12

@kishorekumar8216 Месяц назад

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

@JesseShowalter Месяц назад

My pleasure!

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

@fiorecallebaut 22 дня назад

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!

@khalilbenaoumeur4234 13 дней назад

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,

@jswanson859 Месяц назад

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.

@JesseShowalter Месяц назад

Yes you can, you can insert custom code and create code components

@jswanson859 Месяц назад

@@JesseShowalter Fantastic! Thanks for responding.

@observer3359 Месяц назад

Dude stop disappearing

@ekoflexofficial3903 Месяц назад

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.

@JesseShowalter Месяц назад

Thanks for the feedback 😊