Summary
Keywords
Full Transcript
Email us to Train your Company on [email protected] 👉🏻 Full UX Designer Course for Beginners - https://learnuiux.in/ Join our Instagram Broadcast Community https://ig.me/j/AbYz7q54oZ3CBSHs/ 👉🏻 Follow me on Instagram: https://www.instagram.com/anshmehra.in ▶️ Watch the Hindi Version Here: → https://youtu.be/k1XM_FEQSLA ⏰ Timestamps: 00:00 - Series Intro 1:06 - What we will learn today 1:46 - Anatomy of a Button 6:21 - Using Variant for States 8:20 - Make Sure 8:55 - Labels & Icons 9:22 - Secondary Buttons 11:05 - Tertiary Buttons 12:07 - Classes and Selectors 14:32 - Recommended Articles 15:39 - Premium Sessions on Graphy 16:29 - Conclusion 🌏 Keep up with Design and AI: 🔗 https://www.instagram.com/anshmehra.in/ 🔗 https://www.anshmehra.com/ 🔗 https://medium.com/ansh-mehra Links Mentioned in the video: 🔗 Designing Button States https://cloudfour.com/thinks/designing-button-states/ 🔗 Basic Design System Button States https://medium.com/@saoliveri95/basic-design-system-button-states-4774853048f2 🔗 CSS Buttons https://www.w3schools.com/css/css3_buttons.asp 🔗 Figma's Getting Started Playlist (Must for Beginners) https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4 🔗 Figma's Features (Amazing Stuff) https://www.youtube.com/watch?v=gnscqweM_NU&list=PLXDU_eVOJTx6zk5MDarIs0asNoZqlRG23 🔗 Figma's Office Hours Playlist (Advanced Stuff) https://www.youtube.com/playlist?list=PLXDU_eVOJTx4kKv1IdI-NdlKyCWwE6Ge6 🔗 Notion (I use it for Documenting & collecting my thoughts) https://www.notion.so/ Special thanks to @Figma for helping me become who I am today. There are dozens of sources that have inspired me to make this video so well. My intention is to spread knowledge in a timeless way, not as mere knowledge but as a story, a narrative, something that is so exciting to listen that it inspires you and pushes you to create awesome stuff. What is a button system in UI design?, How do I create consistent buttons in Figma?, Why are button components important in design systems?, What types of buttons should I include in a design system?, How do I build button variants in Figma?, What’s the difference between primary and secondary buttons?, How do I manage hover and active states for buttons?, How do I name button components properly?, What’s the best way to organize buttons in Figma?, How do I use auto layout for button components?, What padding should I use for buttons?, What are icon buttons and when should I use them?, How do I make responsive buttons?, How do I document button systems in a design system?, What color styles should I use for buttons?, What is accessibility in button design?, How do I create disabled button states?, How do I connect buttons to components in Figma?, What are best practices for button UX?, How do buttons fit into a larger UX design system? Ansh Mehra, Ansh Mehra UX, Ansh Mehra AI, Cutting Edge School, Free UX Design Course, UI/UX Course, Product Design Free Course, Figma button design, UI button system, Figma design system tutorial, design system buttons, UI design Figma, button components Figma, Figma auto layout, responsive buttons, primary vs secondary buttons, button states UX, component variants Figma, button UX design, Figma interactive components, accessible buttons UI, UX design tutorial, website UI tutorial, design system best practices, free Figma UI course, button design for beginners, how to design buttons, UI consistency Figma, web UI buttons, product design Figma
