Using Variables with Component Properties | Figma

Component properties can now be bound to variables

Also, UI has been simplified so that props and variables are in the same dropdown. Learn how to use variables for component properties without detaching in this tutorial by Chad Bergman, Designer Advocate.
____________________________________________________

Find us on ⬇️

[sutherlandcarter]

Chad is such a rockstar. I always enjoy his calm demeanour while explaining new Figma updates!

[Dreamworkstt]

Hi, I'm new to Figma, and I've been trying to learn it by myself. English isn't my first language, so sometimes it can be a bit challenging. I just wanted to say thank you so much for the video explanations—they really help me understand things better. I truly appreciate the effort put into making them clear and easy to follow.

[JuanEncalada]

YES! This is amazing. Been waiting for this feature for some time. Thanks for the tutorial, Chad!

[UnchainedExperience]

Using variables is awesome! It's helped me a lot. I'm loving UI3 even though I'm still getting used to some aspects of it.

[amirataha]

Great Video, please if you have a full playlist about using and creating different variables for different cases. hope to share it with us or add it to the description.

[koekie]

That's great! However, when I add an already defined variable as the value for the text property (in the panel at 1:35) I cannot update it anymore to another string variable in the instance... It only works if the value is typed in the main component 😢

[antonyp]

Very useful, although I am a bit tired of seeing the same cooking/travel app design every single time for those examples. Other use cases would also be interesting I reckon. But I'm nit-picking.

[ПуТНиК-дп]

Add the ability to bind variables and instances

[mumulti]

Awesome! Cool how main and instance components can have different variables! How about attaching string variables for text content to text elements which are not in a component? Or would you create components (for headings, paragraphs etc.) which have just a text element and a frame as container around and then give that a text property to bind a variable?

[IanPilgreen]

I was on top of all of this until you got to 2:54 lol