Connect Figma Variable to Variant | Connect a component to a variable | Prototype with Variables

Просмотров 17 тыс.

% 856

🚨Follow along → www.figma.com/community/file/1331243661693350254/connect-figma-variable-to-variant-prototype-with-variables
☆ Try Figma's *Professional* Plan - bit.ly/TDProFigma
☆ Try Figma For *Free* - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 _WHAT TO WATCH NEXT_ :
1. *Variables 101* - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TGinpYnwu2A.html
2. *Prototype with Variables | Config Update* - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RERfcQp7zSk.html
3. *Language change with variables* - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X5arGNpdXS0.html
👋🏼 _IF YOU ARE NEW HERE_ :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 _MY GEAR_ :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 _CHAPTERS_ :
00:00 Hey!
00:04 Simple Method
02:50 Intermediate Method
09:39 Advanced Method
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes

Хобби

Опубликовано:

23 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 111

@Osigot 17 дней назад

2:30 For those wondering: "Set Variable" in prototypes is NOT a free feature. It is hidden behind a paywall

@TDSunshine 14 дней назад

Yes prototyping variables is only available on the professional plans and "upwards" ☀️🙏🏻

@xolampendu8660 3 месяца назад

You are so good; I had to like and subscribe. Well done!

@TDSunshine 2 месяца назад

Thanks! 🙏🏼☀️

@jennyk299 4 месяца назад

This came along right when I needed it. Thanks for explaining things!

@TDSunshine 4 месяца назад

Ah yay! Happy to help 🙏🏼🤗☀️

@riccardovannozzi568 2 месяца назад

I've been looking for these solutions for weeks. Congratulations for making them so simple.😻

@TDSunshine Месяц назад

You're welcome! ☀️🙏🏻💛

@balajim9505 4 месяца назад

Thanks for the tutorial, easy to understand and good examples.

@TDSunshine 4 месяца назад

Thanks! You're welcome ☺️☀️💛

@killjoyous_ Месяц назад

Beyond helpful, thank you so much for sharing your knowledge!

@TDSunshine Месяц назад

You’re welcome 💛🙏🏼☀️

@jayreambonanza1991 17 дней назад

I'm glad I found this video. I love the simplicity on how you explain things

@TDSunshine 14 дней назад

aww thanks! ☀️🙏🏻💛

@SarahAndBoston 2 месяца назад

Awesome video, I can't wait to try all these out.

@TDSunshine Месяц назад

Thanks! 🙏🏻☀️

@ricardofernandes1276 Месяц назад

that's i'm looking for, thank you for the help, keep pushing yourself and also teaching us, cheers from Portugal

@TDSunshine 27 дней назад

Happy to help! Thanks! ☀️🙏🏻💛

@czerskip 4 месяца назад

Your videos are on top of the list of the most useful and practical Figma tutorials. 👏💚

@TDSunshine 4 месяца назад

thank you so much! 🙏🏻☀️

@irzadnorman892 День назад

Thank you Miss Sunshine 🙏

@ramazanguler6066 9 дней назад

Thank you very very much this peerless information

@TDSunshine 6 дней назад

You're welcome! ☀️🙏🏻

@BrookeMotis 11 дней назад

Great video! Truly a talent to be able to explain these confusing topics in a simple way. Totally subscribing. Thank you!

@TDSunshine 10 дней назад

Thank you!! 🥹💛🙏🏼☀️

@making-things 29 дней назад

I just leveled up! Thank you!

@TDSunshine 27 дней назад

Glad I could help! ☀️🙏🏻

@DianaMartiandani 6 дней назад

you are so good on explaining but so fast for me as a non English speaker so I had to replay on some parts of them :')) but thank you so much!

@TDSunshine 6 дней назад

ugh sorry! I always get told I speak too fast and I'm trying to work on it but Im glad you still managed to enhoy it! ☀️🙏🏻

@masumsarkerux 4 месяца назад

So Informative Dear... 🥰🥰🥰🥰🥰🥰

@TDSunshine 4 месяца назад

🙏🏼☀️

@ravirajputdesigner 19 дней назад

Too easy process. Thanks a lot you saved my day.... ❤

@TDSunshine 18 дней назад

You're welcome! ☀️🙏🏻💛

@bukharidesigns 3 месяца назад

I barely subscribe any RU-vid channel but you've got my subscribe ma'am. A true master of Figma.

@TDSunshine 3 месяца назад

Aww thanks! 🙏🏻☀️💛🤗

@kakanishalemraju9995 3 месяца назад

as usual amazing tutorial with full energy you are the best teacher with good examples 👃

@TDSunshine 3 месяца назад

Thank you! 😃☀️

@Angie.K_ProductDesigner 2 дня назад

It was very useful!!!

@TDSunshine 2 дня назад

Glad to hear that! ☀️🙏🏻

@Mauriciog623 4 месяца назад

I've been binge watching your videos on creating a design system and it helped me learn how to make pretty much an entire app interface (that's saying a lot since I didn't study UX/UI in uni), today I was looking to to exactly this, what are the odds! Thank you for you amazing learning material I really feel like stepping up with my skills. 👑

@TDSunshine 4 месяца назад

Happy to hear they help! 🙏🏼🤗☀️💛

@teegees Месяц назад

I ❤ how you go the extra mile to explain the little details that save you time (shortcuts, tips and tricks). Learned a lot in this video thank you so much! 🙏

@TDSunshine Месяц назад

Thanks! ☀️💛🙏🏻

@teegees Месяц назад

@@TDSunshine Of course! =) So, quick question actually.... I was able to follow along your Intermediate example but when I tried to make it so that clicking on the "I accept the Privacy Policy" part will do both 1) enable the Continue button and 2) change the checkmark variant to True, it works but then when I tried to do the same sort of thing for the "I would like to subscribe to all promotional emails", it affects BOTH checkboxes. Do you know what I'm missing? How do I craft the interaction so that only a specific instance of the checkbox component is affected?

@TDSunshine Месяц назад

@@teegees it’s all about the variables so if you are using the same variable to control both the cells then they will both disappear so just make sure to split them up to separate ones and it should work! I hope this helps 🙏🏼☀️

@teegees Месяц назад

@@TDSunshine Ah I see! Thank you 🙏

@m_tron99 2 месяца назад

Great tutorial

@TDSunshine 2 месяца назад

Thanks! 🙏🏼☀️

@FFUX-de5ew Месяц назад

Thank you so much! You are Great and so helpful! Like your energy! Subscribed to your channel!

@TDSunshine Месяц назад

aww thanks! ☀️🙏🏻💛

4 месяца назад

TD, great advance tutorial, thanks!. One more thing... I've been using all those useful shortcuts you mention all the time. My new fav is Command/Control+Shit+R. Keep rocking!

@TDSunshine 4 месяца назад

Thanks! Paste to replace is such a lifesaver I love it! 💛☀️

@vladimirdursel 3 месяца назад

Better Shift than Shit tho 😜

@TDSunshine 3 месяца назад

@@vladimirdursel 😂😂😂😂 I didn’t even notice! 🙈

@andrewstrasser 24 дня назад

You are REALLY GOOD at explaining this stuff fast and easy to understand! I really need help. I'm trying to make a single choice toggle where it is scalable, you can add several buttons and when you click only one with be selected. I don't want to do this with a pasta salad, I want to find a way to use booleans, strings etc conditionals whatever it takes to set this up so that when one button is selected all the others toggle off and only the main selection is highlighted. Any thoughts on how to do this?

@TDSunshine 18 дней назад

Thanks! you can use the same method I used in the intermediate example where I use a boolean to change the variant of an instance. I use a mixture of variants and boolean variables that control eachother and turn things on and off. Remember you can connect multiple elements to the same variable so one can for sure turn off all your toggles. I hope that makes sense! ☀️🙏🏻💛

@ruotongwu7922 Месяц назад

Thanks for your tutorial! It's really help!! But I have a quick question about the second example, if I want user to select both 2 checkboxes, then the continue button is able to click. How to achieve this? Should I use a if statement? I think making 2 boolean variants can not help.

@TDSunshine Месяц назад

hmm there are a few ways around this. You could use a double IF so nest two IF's inside of each other to check both checkbox variables. I hope that helps! 🙏🏻☀️

@ruotongwu7922 29 дней назад

@@TDSunshine Thank you so much! I finally figure out how to do.

@jennyk299 3 месяца назад

Thank you so much for all your wonderful tutorials! They've really made my work files a lot cleaner and work better than they did when I would plug things together manually. I have a question: Are there ways to set characters limits for things? For example If a name is over 16 characters long the font size goes down to make more space. It doesn't look like you're currently able to do this with advanced prototyping but if there is I'd love your thoughs if you could share! This video really made all the difference in my current work project so thank you so much!

@TDSunshine 3 месяца назад

Thanks! hmmm tricky one! Font size change is a tricky one. You could always set your text box to fixed size and turn on the truncate text in the additional text options and that will truncate the text for you even if the user keeps typing in a prototype. Another option I can think of is a bit of a more clunky one where you can have a non dynamic keyboard and when they tap on it once it fills 16 characters so you can show how it looks up till there and then tap again and show how it would look with more than 16. (in this case the 16 and 16+ would just be different variants you would swap to) If you just need to show someone how it would look you can use that second option for sure. Remember its always super fun to have really dynamic realistic prototypes but sometimes its ok to have it a bit more simplistic just to get our point across. I hope that helps! ☀️🤗

@jennyk299 3 месяца назад

@@TDSunshine Currently I do have it set how you described in the 2nd example. I just had to know if I might have been missing something as I'm only just beginning to dive into the advanced prototyping world! That is a good point to keep in mind: just because you can doesn't mean it's the easiest way to convey a concept in a prototype. Sometimes my 'too much' gene gets the better of me. 😉 Thank you for making such a detailed response!

@maninoroozi3456 Месяц назад

Thanks for explaining this. I am still struggling with these variables. I wish to have my selected image thumbnails to change state and change the image. I was able to get it to work but the performance was terrible. I then tried your mode switch approach. It works smoother but I am not sure how to make the state on/off depending on the selected thumbnail.

@TDSunshine Месяц назад

Hey! to make one change effect the other you either need an IF statment somewhere in the prototype OR you need to connect the to the same boolean variable and then use TRUE / FALSE as your variant names as well. I hope that helps! ☀️🙏🏻

@pauljessee8611 4 месяца назад

Thank you, thank you, thank you!! This is the video of the year for me. Helps so much! This helps make prototypes so much more interactive. These variables and variants are crazy. I have another question for you. I set up the prototyping for the buttons. Currently, if the user clicks on the disabled state of that button it will take the user to the next page. Once the button is clicked I only want it to take the user to the next page IF the button is enabled. Is that possible? Or is this getting too deep? Feel free to let me know it's too much. Just wondering! Thanks again for your work on this!

@TDSunshine 4 месяца назад

You’re welcome! Yes you can for sure do that 🤗🤗 as with everything- there are a few ways. If there is a variable controlling the variant than you can add a conditional like on click IF variableME = true THEN … so it only does it if that is the variable. If you only use the button in one place you can also set the action on the variant itself in the main component as well :) there’s probably a few other ways around this too 🤗 I hope that helps ☀️

@emmaaho7714 Месяц назад

Thanks for you video! Despite burning my head off but trying to implement the technique into a multi checkbox(that gives different results) Wish me luck hahahaha

@TDSunshine Месяц назад

Ooooo love this idea! Best of luck! I believe in you 💛🙏🏼☀️

@betho1000 2 месяца назад

Hello TD, thank so much for your videos, Yours videos are amazing and useful. thanks for that. So I have a question, do you know if there is a possibility to apply variable with smart animate or open overlay sections for instances? I never see yet a tutorial using this technique.

@TDSunshine Месяц назад

Thanks! sadly no :( you can't set any animations for variable prototyping right now which does make them a bit jumpy. Fingers crossed for an update soon! 🙏🏻☀️💛

@monqyy 4 месяца назад

Could you show us how real life project looks like in figma? How it is organized etc? Thank you for your videos 💜

@TDSunshine 4 месяца назад

Great idea! will add to my list 🤗☀️

@SilenceKillsDesign 3 месяца назад

I would say, just for best practices and Dev handoff, keep letter case the same. "Yellow" != "yellow"

@TDSunshine 3 месяца назад

Great point! 🙏🏻🤗☀️

@grantboufford5186 4 месяца назад

Hi. Quick question for the advanced example. Being that the interaction is the same for each tab, could it be set on a source component and then the instances within the comp each get a mode like before? 13:19

@TDSunshine 4 месяца назад

great question! yes, you definitely can! I show an example of that in this video -> *Language change with variables* - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X5arGNpdXS0.html ☀️🤗

@grantboufford5186 4 месяца назад

Great! Thank you

@mlememe9541 3 месяца назад

So this advanced solution is limited to 4 items because of Figma 4 modes limitation (unless you have an enterprise plan).

@TDSunshine 3 месяца назад

Yeah its a bit restricted but sometimes 4 is all you need! ☀️

@cricketcountry6384 11 дней назад

5:30 Hello, I have a question about applying a variable to 'Variant (False)'. When you set the boolean variable to 'Variant (False)', the element does not get hidden. Could you please explain?

@TDSunshine 6 дней назад

Yes! So, if you attach a Boolean variable to an element by right clicking on the eye on the layer section of the design panel then the variable controls the layers visibility. But if you use the variable to select a variant (like we do in the video) then it does not control the visibility at all. I hope that makes sense! ☀️🙏🏼

@cricketcountry6384 6 дней назад

Many thanks... Will keep following you 😊

@ashwingaikwad200 Месяц назад

became a fan...am i in love???🤔

@TDSunshine 27 дней назад

haha ☀️🙏🏻

@Thisislordadam Месяц назад

Which tool do you use to edit your videos?

@TDSunshine Месяц назад

I use Final Cut Pro! And I’ve made a few of my own effects and generators in Apple Motion. ☀️🙏🏼

@kriswayne7938 4 месяца назад

Hey, What minimum size do designers use for buttons in android apps? I know material guidelines say min is 48 for icon buttons and uses 40 for other buttons. The problem is height of 40 and above looks horrible in my designs. Apple's small buttons have 28px height, can i use this height? What size do yall experienced designers use in real apps?

@TDSunshine 4 месяца назад

This is a tricky one! You are correct about the 48 / 40 guidelines and yet they have buttons on their own library that are 28x28 🙃 I would say to try and make at least one "axis" of your button 40 or close to it. so even if the height is 20, try to make it a longer button. And if you do end up having something tappable that is a lot smaller than 40 (like an icon maybe) then at least make sure it has sort of a 40x40 tappable space around it, so don't crowd tappable items next to each other without sufficient padding. I hope that helps! ☀️🤗

@katerina4035 2 месяца назад

If you encounter an issue where the aliens do not change when you select a color, try to type the color names without using any quotation marks. Simply, type blue instead of "blue". The quotation marks will be added automatically.

@TDSunshine 2 месяца назад

🙏🏼☀️

@MaksimResolute 3 месяца назад

Seems like if I add hover over variant this method won't work. or am I missing something?

@TDSunshine 3 месяца назад

hmm yeah so if you have a hover state then the click would come from the hover and not from the original one if that makes sense. I hope that helps! ☀️

@MaksimResolute 2 месяца назад

My problem was that it was not possible to assign a boolean to the component with 3 variants. Or am I missing something @@TDSunshine

@taylork3043 14 дней назад

lol this shit is not simple. But you did an AMAZING job of explaining it. Thanks a ton!

@TDSunshine 12 дней назад

Aww thanks! 🙏🏼☀️💛

@taylork3043 12 дней назад

@@TDSunshine Do you know how to set a rule that would set a component back to a default state when a different state is active.... Think of a dropdown menu. Each row is the same component, one row is selected already then if the user selects a different row in that menu (same component different state) the previously selected row goes back to the default state. I can't figure it out and none of the other designers I work with can either. It might not even be a "rule", mouse leave is the closest proto setting I can get to what I want

@tomaszbednarczyk1706 Месяц назад

Intermediate method - this method unfortunately does't work when we have a component within a component :(

@TDSunshine Месяц назад

Nested instances are still bit buggy I agree 😭☀️

@lucasamadsen 2 месяца назад

I FEEL SO SCAMED BY FIGMA!!! I was rolling with this problem for days!!! W-T-F make the boolean variable connect thru the eye toggle??? Srly, I'm pissed... Great explanation tho! Won a sub

@TDSunshine Месяц назад

hahah I KNOW!!! i'ts such a weird place to put (hide) it! ☀️💛

@drivedata2964 14 дней назад

your keyboard voice is tickling

@TDSunshine 14 дней назад

I have a RK84 its so clicky clacky I love it! very ASMR ☀️🙏🏻💛

@ItsBabu06 4 месяца назад

I watching your video and also I visited your RU-vid channel and I saw that your content is so good. But there are lots of workspaces in your video SEO optimization area, so aren't reaching your video audience as a result video views, likes and subscribers aren't increasing. I found many issues in your channel if you wan I can share issues with you. Do you want to talk about it for a while?

@TDSunshine 3 месяца назад

thanks but no thanks 🙏🏻☀️

@another.designer Месяц назад

But Honey, What's point using variables, variants for a toggle?. I really appreciate your effort but you could've selected some other complex element to make this tutorial.

@TDSunshine Месяц назад

This video shows how to connect variables to variants in a few different way :) Most of my videos are here to teach concepts and then people can go away and use these concepts as they please and need 🙏🏻☀️