Figma Tutorial: Advanced Prototyping With Variables (+ Practice File)

[@DesignWithArash]

👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX

[@chandanmondal5649]

I wanna be a pro UI designer but I am not able to buy this course. 🙂

[@bolkhayegakya]

Do you have any promo code? It's too costly for an Indian student. Also, the paid videos are complexly different from the KZbin one?

[@DesignWithArash]

@@bolkhayegakya You can use the PPP offer based on your location. Please check the website, and you will see a banner if you are eligible.

[@bolkhayegakya]

You should be in the Figma educator team. You're a great teacher.

[@ChristianLarsen73]

Thanks!

[@DesignWithArash]

Thank you very much for the Super Thanks.

[@InfinityCrash]

I initially struggled with understanding how the 'After Delay' interaction worked in Figma. In the tutorial I was following, the number in the prototype increased automatically after a delay, but when I tried to replicate it, my number stayed at '0.' I realized that the issue was because I hadn't properly set up the frames and linked them with the 'After Delay' trigger. Additionally, the updated Figma interface I was using had some slight differences compared to the tutorial, which made it harder to locate the exact settings. After researching and experimenting with frame linking, variables, and prototype interactions, I was finally able to get it working. This process taught me the importance of understanding interaction triggers and how Figma’s prototyping tools work in detail.

[@sheikjaved0677]

Thank you so much Arash, I have watched many but I haven't seen any videos explaining things as easily to understand and clearly enough as you do.Keep going looking forward for great updates

[@DesignWithArash]

Thank you so much. Glad it helped.

[@attunery]

Love this, thank you! I believe at 11:56, you mention setting switch to "false", but on the screen, it shows switch is == true

[@Tatigon10]

You save me , I almost get nuts cause I couldn't do it

[@septiyanhariyanto]

what happened to this, should we setup true or false?

[@Diem-Space]

Me too, I tried so many times and realize this =))

[@atishchakma7634]

i am gonna looking for this for a long time, but finally someone make this and it's you

[@DesignWithArash]

Glad it helped.

[@elinbonab]

Perfectly clear explanation! Thank you so much Arash I’m learning a lot from you. Please keep it up! 🙏🏻🙏🏻

[@DesignWithArash]

No problem. Glad you liked it.

[@vadikkaz112]

Amazing ! Everything is clear and right to the point without any boring extra talks. Thank you much!

[@DesignWithArash]

Glad you enjoyed it!

[@zhinopiroz1194]

amazing, your teaching is understandable and easy to learn.🤩

[@fitiavanarazakandrainy8728]

So clear, so helpful video, Thank you Arash. Great video and keep going

[@DesignWithArash]

Glad you liked it. Thanks.

[@Lala-uh9dr]

Thank you very much for this tutorial. I am struggling to learn variables right now, and this video was a huge help. Thank you!!!💛

[@DesignWithArash]

No problem. Glad it helped.

[@nyros23]

Extremely helpful, and easy to follow. Just did it right now, thanks a lot! Subscribed as well

[@DesignWithArash]

Glad it helped! Welcome to the channel.

[@badermuteb4552]

Thank you Arash this is by far the video about prototyping in youtube. please make more videos

[@DesignWithArash]

Thank you so much. Glad to hear that.

[@ИринаИгумнова-е7ж]

Amazing ! Thank you so much Arash

[@DesignWithArash]

My pleasure 😊

[@the-secrettutorials]

This channel is so underrated

[@DesignWithArash]

Thank you.

[@haseebwhaid69]

Impresive Thank you for sharing this💞💞

[@DesignWithArash]

Glad you enjoyed it. No problem.

[@trade24x7]

Hi Arash, you're a genius thank you for your valuable videos. You explain in an understandable way that even people who don't know much English can also learn. videos are helping me a lot ❤

[@DesignWithArash]

Hi there. No problem. Thank you.

[@mixedproduction9647]

you are truly awesome man

[@warrensheean988]

This is great Arash! Any ideas on how you would achieve something similar with a 'slider' rather than + and - buttons?

[@edithgomis696]

A very nice tutorial, your explanation is clear. Thank you so much

[@DesignWithArash]

Glad you liked it.

[@ИринаКирьянова-о7ь]

So helpful and detailed explanation

[@DesignWithArash]

Glad to hear that.

[@Izhan-Mirza-786]

You are a Great Explainer Arash, But Why You are not Regular with Your videos on KZbin, actually I like your tutorials alot.. so it will be great if you Consistently share Your knowledge with us.❤

[@DesignWithArash]

Thank you so much. I try to be as consistent as I can but I do design projects and some projects are so time consuming.

[@olababs2048]

​@@DesignWithArash can I volunteer myself to work with u on some of your project while taking directives from you for few months?

[@dinizo]

Arash, thank you so much! ❤

[@DesignWithArash]

You're welcome. ❤

[@Protagonistiupiu7983]

Omg! Thank you so much! Your guide about variables is a hundred times better than Figma's,

[@mrtzapasrad679]

thx for making this imp video

[@travel.withmasti]

You are amazing man 😊

[@DesignWithArash]

Thank you.

[@cesarolguin9958]

ty bro nice tutorial

[@madarauchiha5433]

just found out that KZbin has this bug where you see the comment section from a previous video so I was seeing chicken Vindaloo comments and thinking wtf are people talking about

[@Mr.Kaipulla_Talks]

Clear explanation ❤

[@DesignWithArash]

Thanks.

[@arsyatft]

Thank you so muach Arash, you make me figma expert because of you 😂❤

[@bolkhayegakya]

Your teaching skill is so great. Do you have any paid course where I can signup? I want to learn all the things from scratch. Nevermind.. I found it.

[@DesignWithArash]

Thank you so much.

[@BishopTsabo]

This is great. But what if, if the checkbox has a hover state? I already looked at a lot of videos, but somehow suddenly everybody forgot about the hover state, only enabled/disabled. Is it even possible to do the same interaction with hover state between it ?

[@Bomboloification]

Probably it's because there hover state isn't a thing on smartphones, therefore in mobile application

[@TravoBoy]

you are right.. when you will work with proper design system these type of things will get more and more complicated and you will end up with mess ]

[@Benfry57]

Variables and conditionals have helped a little in making Figma prototyping better, but I still think that, if you want it done right, use a tool better suited for the job.

[@plabonmahanto]

wow Thank you boss

[@travelandfestivals]

Hey, you have a mistake at 12:00. You say set to "false" but its set to "true"

[@shanjeev_cartoonmaker]

wowww So helpfull tq

[@DesignWithArash]

Happy to help

[@sreejarathish]

Thank you

[@bishoyadel1789]

Thank you❤

[@DesignWithArash]

No problem❤

[@graphicandcodinghub]

i was thinking about cart yesterday and today i found this❤

[@MariusCheng]

thank you for share i learn much

[@DesignWithArash]

No problem.

[@somaiamahmoud4420]

Nice explanation.. but it didn't work for me in the conditional state but when I set the card variable to true in case the toggle changed to true on click and vice versa .. it works Thanks 🎉

[@sizhizou1425]

Me too, and I found his video also changed from false to true but his audio voice is still false, which make me confused

[@besseshraghi6046]

Love your videos Arash, so informative and well done. I'm having issues with this error on Figma: "Couldn't play interaction: nested instance is swapped with its parent instance". Any chance to have your help with this?

[@AKParvez-z6k]

love it your videos..

[@DesignWithArash]

Glad you like them!

[@viktorsprusis7355]

With the new Figma update and changed menu options, I cannot understand how to replicate the rectangle visibility linked with the toggle switch.

[@TechDesignHub]

thank you so much

[@DesignWithArash]

No problem.

[@mydesignhq]

thank you

[@DesignWithArash]

No problem.

[@travelandfestivals]

Is the string variable on button important because of the other states a button will usually have? i see that if you put a variable bolean on a variant that already has a bolean it will override it.

[@graphicandcodinghub]

thnakyou

[@ahmetsaidpamuk6465]

can you do header and footer tutorial in figma

[@boris6842]

hi, what is the difference between this course on KZbin and the one you offer in your paid training?

[@DesignWithArash]

Hi, My UI Design & Figma Mastery course teaches you everything you need to know to become a UI designer. It includes organized and comprehensive modules covering all aspects of UI design from scratch. Some topics, like design principles, need to be taught thoroughly, which is not possible on KZbin since I tend to keep the videos short. You will also need to get personalized feedback while you are learning a new skill like UI design, and that's another thing you will get in the paid course.

[@lilyempire]

Thanks :)

[@DesignWithArash]

No problem.

[@wazidali1702]

Please design a radio button options using variables

[@DesignWithArash]

Sure.

[@koyekfrnd]

not working toggle switch with the box visibility

[@Vergara.Jr123]

Good day to you Arash I have a problem with prototyping. the problem is, when I create a button in frame 1 and then it's time to prototype, only the button can be seen in the first frame and the images I placed are not there yet. also the position is still wrong

[@christiannavarro1154]

I keep wondering about the instance of the checkbox element, Why is it necessary to link it or add an action to it if you're doing it on the Component as well? What would happen if I need to use the same checkbox in a different screen within the same file, would I have to create another component set with its own conditions? If so I really hope Figma fixes that :P Awesome tut by the way :) love your content.

[@DesignWithArash]

Thank you. Unfortunately, that's how that works at the moment. I also hope they fix this issue.

[@rahuln917]

I discovered that we can attain the same results with an alternate way, without using conditional logic - The 'true' & 'false' states of the switch control the visibility of the rectangle, what if we attach the same boolean variable with default state as 'false' to both of them? I tried this and its working fine but I dont know about any side effects..are there any?

[@rjabrm]

Besides this COUNTER thing.. is there any other benefit in VARIABLES ??

[@DesignWithArash]

Yes, many. Please check out the dedicated videos about Variables on my channel.

[@FWeb3]

7:46

[@Misterjacobs]

The toggle to show the card does not work.

[@DesignWithArash]

Please make sure to follow the steps properly. If you miss anything it won't work properly.

[@MindzGroupTech]

There is an issue with the approach of setting the cta state from the component is that this component is now can only be used for that variable. The interaction must be reactive to the instance not to the component itself. See if it can be done. And if possible demo in an upcoming video.

[@DesignWithArash]

Yes, it can be done. In this video I just wanted to show you how Conditional and Set Variable options work. Of course you can add the interaction to the instances of your component instead.

[@MindzGroupTech]

@@DesignWithArash I know that the interaction can be added to instance... But how to do the toggle based on a single instance?

[@rigidhammer7376]

not working (variables) on free version. haha. im still on learning process and cant practice. so bad

[@srkvocals]

Hey Nice tutorial, seems its not working in free figma version

[@DesignWithArash]

Hey, thanks. Yes, as mentioned in the video you need to have paid account to be able to use these features.

[@RoshanKumar-z8h4y]

OK

[@TravoBoy]

its just complicated the things in figma. Specially when you work with design system. very hard to manage variants like this for every condition prototyping. just create 2 more screens to show this functionality i think that is much better.

[@Daniel-ui5nt]

if my product more than 10, how about it? your videos just 1 product

[@FynardyGalassia]

up this comment !

[@DesignWithArash]

You can still do it. You just need to create a separate variable for each product.

[@smilli6415]

great explanation.. worst feature in real world.. figma is turning into a real MESS... not suing figma again after this feature

[@DesignWithArash]

Thank you. Well, for prototyping complex projects it saves us so much time and money.