Figma / Creating Input Fields with Auto Layout + Base Components

How to create and manage input & dropdown components using Figma's boolean properties to show/hide elements within components. This tutorial will teach you how to manage larger design systems with ease using base components and variants.
Follow along with the file: www.figma.com/community/file/...
Follow me on Twitter for more tips: / dannysapio

[@user-hl7vj9ve5r]

Thank you for an updated tutorial on Figma! Recently learning this for a project on school, and your tutorial made it much easier to follow along, thank you!

[@utkarshmishra7814]

Its 4:10 in the morning here and I just wanted to go through Input fields then I saw this video and man I swear I learned so much, gotta watch this again after I wake up man, so many good things to document. Kudos Dan!

[@dsapio]

Glad it helped you out a bit!

[@archerarcher5727]

@@dsapio Danny, it's time to make you the National treasure :D

[@TwoLeggedTriceratops]

So one could say the boolean property demonstrated here is just a nicety that bubbles up the visibility of the layers to the panel on the right instead of having to sift through the layers panel on the left and manually clicking on the visibility eye icon?

[@alessioayuninjam7403]

Great video! Thanks Danny!

[@GaryDid]

Love seeing your process!🎉

[@dsapio]

Thanks Gary!!

[@frantzcaz8056]

This was a great!

[@eliegeorgesson9099]

Great video! But the only annoying thing with base components is that we need to click twice on the variant to be able to open the property panel (boolean, text properties..)

[@dsapio]

Click the component then press enter or return to do this much faster.

[@yapingvin]

Thanks, this is really useful 😍 Watched your previous video, this is even better. Especially plugin in the end 😎
I don't understand how you managed to add variant to icons from different file. Do I need to publish library? (I'm on free plan)
Maybe managing libraries can be in some of your next videos 😅

[@dsapio]

Glad you enjoyed! Yes unfortunately I'm using a published library which is a premium Figma feature.

[@rebeccamilazzo6807]

Any tips on how to add mobile and tablet versions of these base components if they have drastic responsive differences?

[@raphaelobasijnr1458]

😫😫😫😫 this is crazy man 🤣🤣🤣🤣

[@StoriesMails]

This dark background is too distracting and it's too hard to see in details what you do. Please change to something lighter

[@brunoaller1690]

Amazing video man! really helpful! thanks a lot 🥷