Set variable mode interaction | Figma update May 2024

Set variable mode interaction | Figma update May 2024 | Figma Variables

Рет қаралды 4,188

Күн бұрын

🚨Follow along → www.figma.com/community/file/...
☆ 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 - • Figma Variables for be...
2. Prototype with Variables | Config Update - • Figma PROTOTYPE with V...
3. Language change with variables - • Figma variables to cha...
👋🏼 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 Intro
00:18 Change language
03:38 Change colour mode
05:05 Using component interaction
07:04 Important note!
🤗 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

Пікірлер: 58

@TDSunshine 2 ай бұрын

Thanks to @wonsunparque4788 for pointing out my toggles are flipped 🙈🙈 no idea how but I had them on a 180 degree angle 🤦🏽‍♀️ I will fix this in the practice file on Figma sorry all ☀️🙏🏼

@ravirajputdesigner 2 ай бұрын

Wow great to see this prototyping made too easy now. Thanks 💙

@TDSunshine 2 ай бұрын

You’re welcome! 🙏🏼☀️

@crisbarroswanzeler3580 Ай бұрын

✨🙌🏼🙌🏼WoooW🙌🏼🙌🏼✨ Thank you!

@TDSunshine Ай бұрын

You're welcome! ☀️🙏🏻

@santhoshkv3990 Ай бұрын

Amazing TD , very use full , thanks

@TDSunshine Ай бұрын

Thank you! ☀️🙏🏻

@AntanasGeguzinskas 2 ай бұрын

Awesome :)

@TDSunshine 2 ай бұрын

Thanks 😁☀️🙏🏻

@fabiookonolanguages 2 ай бұрын

Yayyyyy finally!! 🎉❤

@TDSunshine 2 ай бұрын

☀️🙏🏻💛

@cp3onmtv963 2 ай бұрын

Thank you SO much for this video as I was kind of struggling on what this feature actually accomplished. Well done!

@TDSunshine 2 ай бұрын

You’re welcome! ☀️🙏🏼💛

@daohanh5668 2 ай бұрын

amazinggggg!!!!!!!

@TDSunshine 2 ай бұрын

☀️🙏🏻

@BingChilling896 2 ай бұрын

Helpful!

@TDSunshine 2 ай бұрын

Thanks! ☀️🙏🏻

@user-gh1ph1in9w 2 ай бұрын

I never leave comments on videos, your channel is AMAZING!

@TDSunshine 2 ай бұрын

Aww thank you so much! 💛🙏🏼☀️

@saimoralam5647 2 ай бұрын

I was waiting for long time for this type of feature in figma thank you so much for the video

@TDSunshine 2 ай бұрын

You’re welcome! ☀️🙏🏼

@imnbmusic 8 күн бұрын

i was frustrated on how to add two interactions in one component, turns out i had overlooked the plus sign in prototype. this helped. thanks td

@TDSunshine 2 күн бұрын

hahah it is easy to miss! ☀️🙏🏻💛

@pauljessee8611 2 ай бұрын

Great video! Such an awesome update. Could you do a video creating an interactive prototype keyboard?

@TDSunshine 2 ай бұрын

Thanks! ☀️🙏🏻💛 I have one! Keyboard - kzfaq.infove4UvSGadaA?feature=share, Keypad - kzfaq.info8pYaEWAQtrc?feature=share

2 ай бұрын

Super useful update and explanation! I found really educational how you first create something and then how to improve it. I can't imagine what new features are Figma people keeping for this june event.

@TDSunshine 2 ай бұрын

Same!! Did you see the post they uploaded with the images as “clues”?? Very unhelpful 🙈🙈☀️💛

@melissaviesca2299 2 ай бұрын

Just discovered your channel- its absolutely gold!! Binging all your videos now and about to find you on IG, we love women in tech!!

@TDSunshine 2 ай бұрын

Aww thanks! And yay women in tech ! ☀️🙏🏼💛

@platinoir 2 ай бұрын

amazing, that should make prototypes way more dynamic and believable

@TDSunshine 2 ай бұрын

I know right??? ☀️🙏🏼

@user-zr2dd6oe8x 2 ай бұрын

Man i love figma, such great value for money (if you pay, and especially if you don't )

@TDSunshine 2 ай бұрын

Its great right?? ☀️🙏🏻

@playbak 2 ай бұрын

Great call on the interaction order.. Are switches backwards in the UK?😄

@TDSunshine 2 ай бұрын

Thanks! haha no they are not 😭. I have no idea how it happened and how I didn't notice but I had my switches on 180-degree rotation for some reason 🙈☀️

@levonarmenian 2 ай бұрын

This was so well described. Thanks ! Question: Is there a plugin you are using for the languages that automatically translates them? Or are you translating each word using ,Google Translate for example, and entering them in the mode descriptions?

@TDSunshine 2 ай бұрын

Thanks! I used google translate and I think some of my translations aren’t very good 🙈🙈☀️

@ValerijusJurcia Ай бұрын

Nice video! Can it be done on component instance tho?

@TDSunshine Ай бұрын

You can definitely use this feature on instances as well! ☀️🙏🏻

@wonsunparque4788 2 ай бұрын

This is great! Thanks for making the video! Super helpful! The switch, however, seems to be on the different side from the standard switch. The standard iOS switch is ON with the switch is on the right side, and OFF when the switch is on the left side. In this video, they are in reverse. It was bothering me a bit when I was watching the video.

@TDSunshine 2 ай бұрын

Omg you’re right!!! hahahaha 5:33 check out the rotation when I select the toggles. Why do I have them on 180 degree angle??? I grabbed these from my copy of the iOS library but maybe I played with it previously and forgot 🙈🙈 great catch! 🙏🏼 ☀️💛

@wonsunparque4788 2 ай бұрын

Great video nonetheless! I’ve learned a lot from your videos! Really appreciate the time you put into these. Keep up the great work! 🙂

@JamesTenniswood 2 ай бұрын

It's a shame you con't delay the variable change so it happens in the middle of the 300ms animation. You could probably make it more snappy if the 300ms is reduced (but might look a bit too fast on the toggle)

@TDSunshine 2 ай бұрын

You can for sure play around with some delays to make it even more realistic! I was just showing the basics and being lazy 🤪🙏🏼☀️

@tutukumarpanda 2 ай бұрын

Look at that it is very effective very easy very simple than regular prototyping 😂 But problem is variables are limited to the free version to practice 😢😂

@TDSunshine 2 ай бұрын

yes :/ variable prototyping is not available on the free plans ☀️🙏🏻

@areeshaafridi2697 2 ай бұрын

Off topic but would highly appreciate it if you could design a mobile app for us in detail, e.g. a food app, or an HRMS dashboard panel. I am still confused about when to use a frame for text, or apply auto layout to it, OR when to use group selection vs auto layout.

@TDSunshine 2 ай бұрын

Great idea! I'll add it to my list ☀️🙏🏻

@TDSunshine 2 ай бұрын

about the last two questions! I would say to use an Auto layout if there is a rule all the elements inside the frame need to follow or if it needs to be dynamic. ☀️

@UXMAN-s4y 7 күн бұрын

Hey! Thanks for the tutorial. I hope you can help me out because i just cannot understand why its not working for me. I am litteraly doing the exact same thing as you but my prototype only works one way. So if I click on the toggle button, it changes the button variant itself and the variable. BUT then I cannot go back. It stays in this mode and i cannot click it again to turn it off. So weird pls help me

@udita729 2 ай бұрын

How does your toggle have a audio feedback? Is that possible in figma?

@TDSunshine 2 ай бұрын

I added that in editing to help show when I’m clicking ☀️😃

@cyberfiber2873 2 ай бұрын

How do i use toggle to change font? For example if i toggle it on, it will change to Poppins. But if i turn it off it will change back to Inter. Please help

@TDSunshine 2 ай бұрын

great question! you can fake it a little so you can use a conditional - IF toggleVariable== false { change variable font to "Poppins" } I hope that makes sense ☀️🙏🏻