Figma variables to change the language using a dropdown | How to use Figma variables | Step-by-step
Вставка
- Опубліковано 5 лип 2024
- 🚨Follow along with this Figma file - 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. Auto Layout | Config Update - • Figma AUTO LAYOUT UPDA...
2. Prototype with Variables | Config Update - • Figma PROTOTYPE with V...
3. Variable Modes | Config Updates - • Figma VARIABLE MODES |...
👋🏼 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:26 What we are making
01:09 Creating the variables
03:02 Assigning the variables
04:11 Changing variable modes
04:54 Connecting variables to variants
07:18 Creating a dropdown menu
09:16 Dropdown variant interactions
11:23 Connecting the variables to the dropdown
12:45 Setting up the "current" collection
13:35 Reassigning the variables
14:54 Changing the language with prototyping
17:07 What’s next
🤗 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 - Навчання та стиль
![Dark And Light Modes Using Color Variables | Figma Tutorial [CONFIG 2023]](http://i.ytimg.com/vi/KzLlAAWfyTE/mqdefault.jpg)
I don't understand why you don't have more subscribers. Quality content here!
Thanks! 🥹 I appreciate it ❤️🙏🏼
Thanks for your explaining is very clear and slowly easy to understand, plus you give a free exercise file as well.
You're welcome! I'm glad you found it helpful ☀
Thank you so much, I was looking for how to do this for a while.
Glad I could help! ☀️🤍
Amazing!!!💥💯
🙏🏼☀️
Thanks for sharing! 😊
🙏🏼☀️
thank you for best lesson about variables, best channel
Aww thanks! I appreciate it! 🙏🏼☀️
I'd love to speak Protuguse, haha. Great video, this is exactly what I was looking for.
🙏🏼☀️
thank u so much! i need this explanatiom rn so much! Gonna try free ex file as well.
You're welcome! 🙏🏻☀️💛
Thanks so much!!! ❤
You're welcome! ☀️
Nice Content, Thank you! :)
Glad you liked it!☀️🙏🏼
Amazing :)
Thanks! 😄
This was really helpful... thank you ❤
🤔I wonder if you can use this tecnique to switch between frames?... to simulate the process of searching for a page no.
In this case, the content is not as dynamic, so not so much need for modes
Hey! I do something similar to that in this video - *Variable Modes | Config Updates* - ua-cam.com/video/fB-4ikrt3mk/v-deo.html
Kind of populating the destination frame according to the user selection
I hope that helps! ☀️
Brilliant thank you
You're very welcome! 💛☀️
This video is really helpful, thank you very much 😘
But I feel like there's usually no interface for the language to be "-select-" because it's English. I've tried instead of using "Current" adding an "English" entry on the new collection page instead and it will be in English and people will choose the new language. It will be a lot more realistic. Thank you ❤
Good idea! I guess you are right that there is no "neutral" language to use in this case 🙃
Great explanation :) thank you!
You’re welcome! ☀️
@@TDSunshine hey, I have used your tutorial and it's great :) I do have any issue when I have a few words that do get translated and some don't, I am buffled. I have rechecked the values in my table and it's all fine for all entries, do you know why some of them do not get translated? It is giving me a headache ;)
@@bbayek5573 Hey! I would say check the following 1- make sure all the interactions are set up properly (i.e set variable currentX to X). 2 - make sure the text boxes are assigned to the correct variables. I hope that helps!
@@TDSunshine Thank you! yes, all looks good, that's the problem :) but there must be something off. Maybe because it's in Beta still.
finding you is the best thing that happened to me
aww you're too kind ☀️🙏🏻💛
Thank you for the video!
I tried it like a week ago and first everything worked well, and the 'Select' was changing to the language chosen from the dropdown. However, now the 'Select' changes only to the first instance from the dropdown... seems like it does not switch between the 'language' modes anymore.
Do you happen to know what could that be?
There was a bug in Figma that made prototyping between variable modes no work very well. I think its fixed now though 🤞🏼
@@TDSunshine I am having the same problem,it has not been fixed
@@TDSunshine Also when i change the language, sometimes the title text can't keep up and remains in the previous language, which is bad
💙
igma just add a new option called by Set variable mode, would it make better this process of changing languages? Because I still did not get how to use this new variable mode.
yes!! Just uploaded a video for it today and I can see you already saw it 💛 I used the practice file for this video to test this new feature though! so great ☀️🙏🏻
Hi Thanks for sharing this amazing video. Is it possible to toggle languages with the flag icon? (instead of the dropdown interface)
or actually the scenario I'm thinking is a toggle, like toggle on and off to switch between modes
yeah for sure! you can change modes any way you want! a switch would only let you change between two modes though so it would be great for something like light/dark mode for example. ☀️🙏🏻
Can you please help me? I have no idea why mine doesn't work. Although each instance is under different layers (english, french etc.), because the component where I apply the interaction is in Auto (English), I only get English.
There is some bug going on with prototyping modes 🙈 Variables are still on beta so hopefully, we will get an update on this from Figma soon! ☀
@@TDSunshine Thanks for the reply. I've realized after many attempts that to apply interaction on a component level, one should use conditionals (e.g., "if language=="french", set currentLang to language:French) and do that for each language. OR just forget the different states of button like default, hover, clicked, and apply interaction on each instances. I don't know how you made it work as shown in the video.
Good content video. Glad to see a woman making web designing videos.
Thanks! ☀️
How to use these language variable if we have more 50 different screens??
I think the best way to do that would be to connect every single textbox to a variable (and have languages set up as modes). Then if you have all your screens ready you can duplicate them, wrap them in a section, and change the section mode to a different language. That way all the screens and textboxes inside will change to the correct language mode
@@TDSunshine ty, will give it a try and let you know.
Appreciated ❤️
Miss Spell
haha yup! I am a spelling mistake master unfortunately 🙃
I don't know why it doesn't it work!
There is some bug going on with prototyping modes 🙈 Variables are still on beta so hopefully we will get an update on this from Figma soon!