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

👉 Become a Pro UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
In this crash course, I'll show you how to create advanced prototypes in Figma using variables.
Get a copy of the practice file from here:
bit.ly/47GZz3L
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.

Пікірлер: 91

  • @DesignWithArash
    @DesignWithArash7 ай бұрын

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

  • @chandanmondal5649

    @chandanmondal5649

    6 ай бұрын

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

  • @bolkhayegakya

    @bolkhayegakya

    6 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

    @@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.

  • @sheikjaved0677
    @sheikjaved06777 ай бұрын

    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

    @DesignWithArash

    6 ай бұрын

    Thank you so much. Glad it helped.

  • @vadikkaz112
    @vadikkaz1124 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    Glad you enjoyed it!

  • @fitiavanarazakandrainy8728
    @fitiavanarazakandrainy87287 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    Glad you liked it. Thanks.

  • @elinbonab
    @elinbonab5 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    No problem. Glad you liked it.

  • @atishchakma7634
    @atishchakma76346 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    5 ай бұрын

    Glad it helped.

  • @nyros23
    @nyros234 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    Glad it helped! Welcome to the channel.

  • @edithgomis696
    @edithgomis6967 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    Glad you liked it.

  • @haseebwhaid69
    @haseebwhaid697 ай бұрын

    Impresive Thank you for sharing this💞💞

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    Glad you enjoyed it. No problem.

  • @trade24x7
    @trade24x75 ай бұрын

    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

    @DesignWithArash

    4 ай бұрын

    Hi there. No problem. Thank you.

  • @Lala-uh9dr
    @Lala-uh9dr22 күн бұрын

    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

    @DesignWithArash

    Күн бұрын

    No problem. Glad it helped.

  • @user-jt1nt4cj9y
    @user-jt1nt4cj9y6 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    5 ай бұрын

    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

    @olababs2048

    5 ай бұрын

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

  • @badermuteb4552
    @badermuteb45522 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    2 ай бұрын

    Thank you so much. Glad to hear that.

  • @attunery
    @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

  • @user-xl4ts1gk3e
    @user-xl4ts1gk3e3 ай бұрын

    So helpful and detailed explanation

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Glad to hear that.

  • @Mr.Kaipulla_Talks
    @Mr.Kaipulla_Talks6 ай бұрын

    Clear explanation ❤

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

    Thanks.

  • @user-eo3jz8uj9l
    @user-eo3jz8uj9l17 күн бұрын

    Amazing ! Thank you so much Arash

  • @DesignWithArash

    @DesignWithArash

    Күн бұрын

    My pleasure 😊

  • @dinizo
    @dinizo26 күн бұрын

    Arash, thank you so much! ❤

  • @DesignWithArash

    @DesignWithArash

    Күн бұрын

    You're welcome. ❤

  • @shanjeev_cartoonmaker
    @shanjeev_cartoonmaker7 ай бұрын

    wowww So helpfull tq

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

    Happy to help

  • @the-secrettutorials
    @the-secrettutorials4 ай бұрын

    This channel is so underrated

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    Thank you.

  • @Mastsho
    @Mastsho2 ай бұрын

    You are amazing man 😊

  • @DesignWithArash

    @DesignWithArash

    2 ай бұрын

    Thank you.

  • @MariusCheng
    @MariusCheng3 ай бұрын

    thank you for share i learn much

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    No problem.

  • @mydesignhq
    @mydesignhq7 ай бұрын

    thank you

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    No problem.

  • @ChristianLarsen73
    @ChristianLarsen734 ай бұрын

    Thanks!

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    Thank you very much for the Super Thanks.

  • @khushboozia1995
    @khushboozia1995Ай бұрын

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

  • @bishoyadel1789
    @bishoyadel17892 ай бұрын

    Thank you❤

  • @DesignWithArash

    @DesignWithArash

    2 ай бұрын

    No problem❤

  • @user-js4rt6li2t
    @user-js4rt6li2t6 ай бұрын

    love it your videos..

  • @DesignWithArash

    @DesignWithArash

    5 ай бұрын

    Glad you like them!

  • @TechDesignHub
    @TechDesignHub2 ай бұрын

    thank you so much

  • @DesignWithArash

    @DesignWithArash

    Ай бұрын

    No problem.

  • @khushboozia1995
    @khushboozia1995Ай бұрын

    thnakyou

  • @besseshraghi6046
    @besseshraghi60462 ай бұрын

    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?

  • @lilyempire
    @lilyempire7 ай бұрын

    Thanks :)

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    No problem.

  • @BishopTsabo
    @BishopTsabo4 ай бұрын

    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 ?

  • @ahmetsaidpamuk6465
    @ahmetsaidpamuk64656 ай бұрын

    can you do header and footer tutorial in figma

  • @travelandfestivals
    @travelandfestivals2 ай бұрын

    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.

  • @bolkhayegakya
    @bolkhayegakya6 ай бұрын

    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

    @DesignWithArash

    5 ай бұрын

    Thank you so much.

  • @Vergara.Jr123
    @Vergara.Jr1235 ай бұрын

    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

  • @wazidali1702
    @wazidali17027 ай бұрын

    Please design a radio button options using variables

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

    Sure.

  • @christiannavarro1154
    @christiannavarro11545 ай бұрын

    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

    @DesignWithArash

    4 ай бұрын

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

  • @boris6842
    @boris68426 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

    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 KZread 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.

  • @rahuln917
    @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?

  • @travelandfestivals
    @travelandfestivals2 ай бұрын

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

  • @rjabrm
    @rjabrm3 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

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

  • @MindzGroupTech
    @MindzGroupTech7 ай бұрын

    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

    @DesignWithArash

    7 ай бұрын

    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

    @MindzGroupTech

    7 ай бұрын

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

  • @madarauchiha5433
    @madarauchiha543328 күн бұрын

    just found out that KZread 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

  • @Misterjacobs
    @Misterjacobs4 ай бұрын

    The toggle to show the card does not work.

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

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

  • @rigidhammer7376
    @rigidhammer73764 ай бұрын

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

  • @srkvocals
    @srkvocals12 күн бұрын

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

  • @DesignWithArash

    @DesignWithArash

    Күн бұрын

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

  • @Daniel-ui5nt
    @Daniel-ui5nt5 ай бұрын

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

  • @user-lk7cu7wc9s

    @user-lk7cu7wc9s

    4 ай бұрын

    up this comment !

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

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

  • @smilli6415
    @smilli64157 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    7 ай бұрын

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

Келесі