How to Design Powerful Components and Buttons with Variants and Auto Layout in Figma

Learn design, Figma, or review your portfolio with me: https://cortes.us/learn
My newsletter: https://getrevue.co/profile/shyboytm

In this video, I'll go over my approach to building scalable components in Figma using Variants, Variant Groups, and Auto Layout. While there are many ways to build components, this is the way that I have found to be the most helpful for design systems and scaling a design team.

This video touches on the basics from definitions of each feature, to more advanced methods of building out different types of variants in Figma. These are a great foundation for all product designers and UX designers to know!

🙏 SUPPORT ME ON PATREON
Get early access to videos, participate in Q&As, get my unreleased music and Figma source files, and exclusive updates on Patreon!   / shyboytm  

🎧 MUSIC
Lofi Beats to Create, Design, and Code to (Royalty Free):    • Lofi Hip Hop Beats to Create, Design, and ...  
Background music by Cordio (me!): https://cortes.us/music
Looking for a record label? Try DistroKid: https://distrokid.com/vip/seven/799422
Access millions of samples on Splice: https://splice.com/vip/fromcortes

☕ PROJECTS
Buy my iOS 15 icon set at https://osicons.com
Learn about Taste Notes, a coffee tracking app at https://tastenotes.app

💻 SETUP
Interested in my setup? Everything I use is here: https://www.cortes.us/tools

📹 RELATED VIDEOS
How and Why to Use an 8pt Grid for Product and Website Design in Figma (Tutorial):    • How and Why to Use an 8pt Grid for Product...  
How to Interview for Design IC and Leadership Roles in UX and Product Design:    • How to Interview for Design Roles - Portfo...  
How I Got Into Product Design and My Career:    • How to Make Component Variations in Figma ...  

👋 SOCIALS
Twitter:   / shyboytm  
Instagram:   / shyboytm  
Dribbble: http://www.dribbble.com/shyboytm
Website: http://www.cortes.us

Contact: [email protected]