Change component variants with variables - Advance Figma prototyping

Welcome to my latest Figma tutorial. In this video, I demonstrate how to effectively use variables to modify component variants, a key technique for simplifying complex prototypes. We'll explore step-by-step the process of conditional prototyping, enhancing both the flexibility and efficiency of your design workflow. Join me as we learn new potentials in UI/UX design with this new technique.
#advanceprototyping #figma #DesignTools
📌 Timestamps:
0:00 - What you will see in this video
1:04 - Design the teaser and variants
6:55 - Make the component and property
8:16 - Design layout switch button
10:10 - Convert the button to the component
11:25 - Prepare the final screen
11:25 - Prepare the final screen
11:58 - Make variables and connect them to components
15:55 - Conditional prototyping
17:51 - Final result
18:01 - Ending
Whether you're a beginner or an experienced designer, you'll find valuable insights in this tutorial. Follow along and take your Figma skills to the next level with this captivating micro-animation technique.
👍 If you found this tutorial helpful, don't forget to give it a thumbs up and subscribe to the channel for more design tips and Figma tutorials!
Let's Learn together #UX and #UI , #Design, #figma #prototype
🔔 Subscribe for weekly design tutorials:@Kimoartcave
--------------------------------------------------------------------------------------------
🔥 Check out some of my other popular tutorials:
Variables: create dial pad: • #figma Tips and Tricks...
Advance micro-interactions in Figma: • Level Up Your Micro-In...
--------------------------------------------------------------------------------------------
🌐 Connect with me:
Instagram: / kimo.artcave
Photography: / kiagraphy.a. .
Twitter: / kiarashmoazzez
TikTok: / thekimo.artcave
LinkedIn: / kiarashmoazzez
--------------------------------------------------------------------------------------------
My name is Kia, and I am a UX generalist working for more than 10 years as a designer in the industry. here I am sharing my learnings related to UX and UI design, Figma tutorials, general design tips, and tricks. join me in this channel and let's learn together and become better designers.

[@RasoulMoazzez-ih8us]

excellent

[@Kimoartcave]

❤️❤️❤️

[@margaridaalbuquerque9994]

awesome work!! Can we make a button with conditional logic and another interaction on the same button "on click" changing to another page?

[@Kimoartcave]

Give it a try! It should work. And let me know the result. ❤️

[@metelomaniac]

Is it possible to animate the variant change?

[@Kimoartcave]

I remember there was no smart animate for in this case because we basicly use the set variable interaction, so it happens instantly. So I am afraid not, at least for the theme switch itself.

[@shnaishnfx]

you have different technique, keeps uploading

[@Kimoartcave]

Thanks, I will do ❤️