Тёмный
No video :(

Detailed Explanation: Advanced Prototyping with Conditional Logic, Variables & Expressions in Figma 

Thefemijohn
Подписаться 15 тыс.
Просмотров 54 тыс.
50% 1

This video breaks down Advanced prototyping with conditional logic and expressions into easy steps for easy understanding. using a real-world product page example.
Advanced prototyping (part 2): Add to cart prototyping
• Advanced Prototyping i...
Get Design file in Figma Community
www.figma.com/...
ecommerce product image slider animation with interactive prototype
• eCommerce Product Imag...
Sign up for Figma using this link
psxid.figma.co...

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

 

21 июн 2023

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 163   
@yoanabekhiet7312
@yoanabekhiet7312 Месяц назад
Thank you that was very helpful and your way in teaching makes things easy❤
@femijohn
@femijohn Месяц назад
I’m happy to help
@amartinezroa
@amartinezroa Год назад
Finally someone clearly explain the efficient way to do this, thanks a lot really :)
@femijohn
@femijohn 10 месяцев назад
You're welcome.😊
@SimamkelePikelela
@SimamkelePikelela 9 месяцев назад
Thanks for this tut bro, it just helped me so much. I even got an idea to use these variables in my project, meaning watching this tutorial has met my expectations and beyond. God bless you for sharing this info 💯🙏💡
@femijohn
@femijohn 9 месяцев назад
You're very welcome! I am glad i could help 🥂
@eny_codes
@eny_codes Год назад
Thank you so much for this video. I'll always make reference to this video anytime I want. You always do justice to your interaction videos, I enjoy them
@femijohn
@femijohn Год назад
I really appreciate the kind words. You’re very welcome 😊 👍🏽
@phatbi971
@phatbi971 Год назад
Top Class Explanation. The way you teach your designs is why I followed this channel. Big up bro👊🏾🔥
@femijohn
@femijohn Год назад
Thank You, I appreciate your kind words. 😊
@ThomKozik
@ThomKozik 7 месяцев назад
Excellent tutorial. Well-paced, with appropriately detailed step-by-step instructions. Better still, you explained the use case and the desired outcome plainly, before each sequence, building upon the functionality as you go 👏👏👏
@femijohn
@femijohn 6 месяцев назад
Thank you so much for the kind compliment. I appreciate it.
@sarahigbinosa3004
@sarahigbinosa3004 Год назад
Thank you Femi. So good to have you back!!
@femijohn
@femijohn Год назад
Thank you too! I am also very happy to be back. Thank you for your patience.😊
@kingoslo7024
@kingoslo7024 Год назад
Bro u are a game changer, even the blind can see your tutorials clearly❤🎉😂... Pls still find it hard to reach u via DM
@femijohn
@femijohn Год назад
Thank You. Where did you send a msg on?
@eathtomicheal
@eathtomicheal Год назад
This video gave me so much joy 🥹
@femijohn
@femijohn Год назад
You're welcome 😊
@manojsr
@manojsr Год назад
What an amazing video and teaching style. You made a complex topic so simple. Keep going.❤️❤️❤️
@femijohn
@femijohn Год назад
Thank you so much. I appreciate your kind words ❤️🚀
@boipelomotsosi7587
@boipelomotsosi7587 Год назад
10 out of 10
@femijohn
@femijohn Год назад
Thank you 🙏
@lucillferchrollo8503
@lucillferchrollo8503 3 месяца назад
thank u for sharing your knowledge, hope you always happy and healthy!!
@femijohn
@femijohn Месяц назад
Thank you
@fredkridler4980
@fredkridler4980 11 месяцев назад
Great video! So. Many. Steps. Really appreciate you walking us through that so efficiently!
@femijohn
@femijohn 10 месяцев назад
Glad it was helpful!
@prasanthmoolethodi3152
@prasanthmoolethodi3152 8 месяцев назад
Thank you @Thefemijohn for sharing your videos with us. this tutorial helps me to improve my Figma prototyping to the next level. You are Awesome Bro :)
@femijohn
@femijohn 6 месяцев назад
You're welcome
@jermainehunter7780
@jermainehunter7780 Год назад
Thank you! I was so lost and frustrated until I saw that you had to drag the original statement into the conditional to activate it.
@femijohn
@femijohn 10 месяцев назад
Glad you were able to figure it out.😊
@hehebupbup
@hehebupbup 9 месяцев назад
Thanks for your explanation. I have understood how it should work😄Really helpfull video
@femijohn
@femijohn 9 месяцев назад
Glad it was helpful! you're welcome 😊
@ramazanguler6066
@ramazanguler6066 Год назад
Thank you for best leason about Figma 2023 new update logical
@femijohn
@femijohn Год назад
You’re welcome 😊👍🏽
@princesalman5231
@princesalman5231 3 месяца назад
one of the advance tutorial i have seen
@femijohn
@femijohn Месяц назад
You’re welcome
@vaidehiagarwalla8922
@vaidehiagarwalla8922 10 месяцев назад
This video was super good & thorough, thanks for making it!
@femijohn
@femijohn 10 месяцев назад
My pleasure!
@miraz_kabir
@miraz_kabir Год назад
Thanks for making this tutorial easy to understand.
@femijohn
@femijohn Год назад
You’re welcome ☺️
@favourmomoh9567
@favourmomoh9567 Год назад
Very insightful, Easy to understand. Thank you. 😊
@femijohn
@femijohn Год назад
Thank you 😁
@ayomideashiru554
@ayomideashiru554 Год назад
This is well done and actually very detailed !!! I just discovered your channel and man, you have got me subscribing!!! Thank you !!
@femijohn
@femijohn Год назад
You're most welcome. Welcome aboard! 😊
@jkam2524
@jkam2524 6 месяцев назад
You are great at explaining this!
@femijohn
@femijohn 6 месяцев назад
Glad you think so! I appreciate your compliments 😊
@josephsoh908
@josephsoh908 4 месяца назад
Sucha good video man, so educational...
@femijohn
@femijohn 4 месяца назад
Glad you think so! Thank you so much
@OntorBruh
@OntorBruh 9 месяцев назад
So easy and clear! Thank you!
@femijohn
@femijohn 8 месяцев назад
You're welcome! Thank You.
@gameview78
@gameview78 Месяц назад
Thank you Femi
@femijohn
@femijohn Месяц назад
You're Welcome 🚀
@cryptic_comet
@cryptic_comet Год назад
Thank you for the detailed look into this, it has been really helpful! 😄
@femijohn
@femijohn 10 месяцев назад
You're welcome
@femijohn
@femijohn 10 месяцев назад
You're welcome
@nbtimac8013
@nbtimac8013 6 месяцев назад
Thanks, buddy. That is really wonderful video and it helps actully.
@femijohn
@femijohn 6 месяцев назад
Glad it helped. You're welcome.
@jeremyjeremy9440
@jeremyjeremy9440 6 месяцев назад
Amazing, thank you, i thank figma too😁
@femijohn
@femijohn 6 месяцев назад
Thank you too! Yeah, we all thank Figma😆
@nayerehpoorjafar6233
@nayerehpoorjafar6233 11 месяцев назад
Thank you for the perfect tutorial🙏
@femijohn
@femijohn 11 месяцев назад
You’re welcome 🙏😊
@aminadavg
@aminadavg Год назад
Wow. I can't guess right click on the eye icon! thank you!
@femijohn
@femijohn 10 месяцев назад
You're welcome!
@theubrantrekker
@theubrantrekker Год назад
Thanks..very informative.
@femijohn
@femijohn Год назад
You’re welcome 🙏
@wayansusanto14
@wayansusanto14 Год назад
Hi there, thanks a lot for the clear and easy to understand video tutorial
@femijohn
@femijohn Год назад
You’re welcome 😊
@ruchirabiswas5445
@ruchirabiswas5445 Год назад
Thank you so much for this, this was very well explained and very helpful
@femijohn
@femijohn Год назад
Glad it was helpful! You're welcome.
@TheChefAine
@TheChefAine Год назад
Wow 😅😅. That so cool 😍. Thanks for sharing ❤❤
@femijohn
@femijohn Год назад
Thank you so much ❤️
@nekabarizornaata9299
@nekabarizornaata9299 5 месяцев назад
Your video's are always amazing
@femijohn
@femijohn Месяц назад
Thank you so much 😀
@hilmidwi_id
@hilmidwi_id Месяц назад
Thanks for the video
@femijohn
@femijohn Месяц назад
You’re welcome, I hope it was helpful
@paulamourad4699
@paulamourad4699 10 месяцев назад
Wonderful video!!!! Thank you so much!!! 👏
@femijohn
@femijohn 10 месяцев назад
You are so welcome!
@SalimFromATL
@SalimFromATL 10 месяцев назад
This is great and helpful - thank you!
@femijohn
@femijohn 10 месяцев назад
Glad it was helpful!😊
@sparkplug964
@sparkplug964 9 месяцев назад
Great video, I think this is the first time I have watched that explained Variables in a straight forward way to understand, but I still think Variables have not allot to do with design and are heavy related to programming and computer logic. I think Figma maybe need to look at this and try and make it easer for Designer to implement?
@femijohn
@femijohn 9 месяцев назад
Thank you. And yap, I think you’re right
@user-so5zc9km5l
@user-so5zc9km5l Год назад
Brilliant video! Thank you.
@femijohn
@femijohn Год назад
You’re welcome. I appreciate the kind words. 😊
@UCCANANDHAKUMARV
@UCCANANDHAKUMARV Год назад
You are so Great Bro 🥰
@femijohn
@femijohn Год назад
Thank you so much ☺️🥹🚀
@leyetemi
@leyetemi Год назад
I always look forward to your videos😁👏👏
@femijohn
@femijohn Год назад
Thank You, Happy to hear that!😊
@ken4275
@ken4275 Год назад
Thank you for sharing, it's cool. 🙏🏼
@femijohn
@femijohn 10 месяцев назад
My pleasure!
@chhotelalbabu4077
@chhotelalbabu4077 Год назад
Nice Video
@femijohn
@femijohn Год назад
Thank you 🙏 😊
@feelerino
@feelerino Год назад
Ok, so what if I want the cart button to be clickable only when there are items in it?
@NihalPalocaren
@NihalPalocaren Год назад
Keep up the good work!
@femijohn
@femijohn Год назад
Thanks, will do!😊
@nekabarizornaata9299
@nekabarizornaata9299 5 месяцев назад
Great video. Did you go straight to variables without creating a variant for it
@Brain_Maks
@Brain_Maks 9 месяцев назад
Thanks bro!
@femijohn
@femijohn 9 месяцев назад
You're welcome!
@clotildadaniels6453
@clotildadaniels6453 Год назад
Great tutorial as usual just need 4-7 replays 😂🎉
@femijohn
@femijohn Год назад
I’m sorry it’s so long, and a lot to process at once 🫢. Thank you 😊
@nekabarizornaata9299
@nekabarizornaata9299 5 месяцев назад
Please did you create the variants for the counter before prototyping or did you prototype directly on the counter (increment and decrement)?
@ravirajputdesigner
@ravirajputdesigner 2 месяца назад
Nice
@femijohn
@femijohn 2 месяца назад
Thanks. You’re
@GecrolAcipep
@GecrolAcipep Год назад
Wow, this was well explained 👏
@femijohn
@femijohn Год назад
Glad you think so!
@vikavik8470
@vikavik8470 4 месяца назад
Hmm. Super cool. But what if I clicking on the eye button, Figma just hides the layer as usual but does not offer variable option ? :(
@vickyvijayraj
@vickyvijayraj 6 месяцев назад
It’s really good however with Figma using this variables and conditions are not Upto the mark compared to powerful prototyping tools like AXURE RP where this function can be done clearly
@femijohn
@femijohn 6 месяцев назад
Yes, you are totally right. Axure RP have taking design prototyping to a different level. I believe with time, Figma will to. its a gradual process.
@samarbhardwaj5415
@samarbhardwaj5415 Год назад
can this be reflected in cart too, I mean if we have 6 items in the cart will we see them if we open the cart? How to do that?
@kactusotus56
@kactusotus56 Год назад
wow, this video is so helpful. nice job
@femijohn
@femijohn Год назад
Glad it was helpful!
@williamsrichard2191
@williamsrichard2191 Год назад
thanks for the videa. i see that this feature only works, if you paid. is there no way around it, if you havent paid?
@femijohn
@femijohn 10 месяцев назад
yes, some features are for paid versions only
@gracelidya1135
@gracelidya1135 9 месяцев назад
how do you use conditional to give you value between numbers?
@Cheoma_Udeze
@Cheoma_Udeze Год назад
Good video, thanks 🙏🏾
@adeoladamilola5469
@adeoladamilola5469 Год назад
Thank you so much
@femijohn
@femijohn Год назад
You're most welcome 😊
@Cheoma_Udeze
@Cheoma_Udeze Год назад
Nice video 😊
@femijohn
@femijohn Год назад
Thanks 😊
@nifemi2913
@nifemi2913 Год назад
Thank you so much 🙏🏾❤️.
@femijohn
@femijohn Год назад
You are so welcome😊
@alisabacon9535
@alisabacon9535 Год назад
Can you please add sections into this video? Makes it much easier to skip through the video to find the one part I'm looking for :)
@zidansyed
@zidansyed Год назад
The left side slider is not working properly. I was interested to have the slider properly implemented like web. Thanks for sharing :)
@femijohn
@femijohn Год назад
I am sorry about that. I didn’t notice. I just duplicated it from a previous video. You can check the video on my channel so you can fix it. You’re welcome
@megmiranda1643
@megmiranda1643 Год назад
Great video! Wondering if you could prototype an interactive ‘add to cart’ user flow for a product that has different pricing for different sizes? For example, in this video what if the size small shirt is $10 and the medium is $15 and so forth. What would the variables and prototyping look like in this instance?
@femijohn
@femijohn Год назад
Yes you can , I made another video that explains this exact prototyping logic. Please check my next video on Advanced prototyping. Maybe I’ll also add the link to that video in the description of this. It is more comprehensive.
@maskedvillainai
@maskedvillainai Год назад
Recommend way snappier explanations. I was skimming skimming
@RakeshPrajapati-sb3fc
@RakeshPrajapati-sb3fc Год назад
that's amazing and very detailed explanation. just have a question. If we have tile view that has multiple qty options, how do we segregate with the different conditions? I copied and paste and tried to implement but all options came with the same value. please help me
@user-ng4lk6nz1w
@user-ng4lk6nz1w 11 месяцев назад
Hey! Is there any way to tie up the same booleans in the different components ex - I have 2 columns , inside the column list is there and When I click a list option, is visible in the 2 column and when click on the second list's option it is visible to first list and invisible to second list. vice-versa. right now I am different boolean properties.
@chiemeriechibuzor3989
@chiemeriechibuzor3989 Год назад
Thanks for sharing🙏
@femijohn
@femijohn Год назад
You’re welcome 👍🏽
@sillysafe
@sillysafe Год назад
thanks for the video! have you ran into button states (variant interactions) issue while working with variables like this? For example, if you wanted to add a "pressed state" to the plus or the add to cart buttons and maintain the same logic as you've showed in the video. I've messed around with various combinations of "on tap" and "while press", etc as well as various groupings of items and the variant interactions seems to get stuck on whatever the last interaction state is set to.
@benditodsg974
@benditodsg974 Год назад
Thank you so much sir for this, but is this advance prototype available for regular users
@stormstudio6126
@stormstudio6126 Год назад
Is it possible to make a fully functional dropdown without a lot of variants? And with conditional logic?
@dududu5788
@dududu5788 Год назад
how about if we want to change the price as well
@femijohn
@femijohn Год назад
Thats very possible, I will be having a more comprehensive video on a completely add to cart and checkout feature utilizing variable. So please do stick around.
@dududu5788
@dududu5788 Год назад
@@femijohn awesome! appreciate it!!
@tanvirahassananik8055
@tanvirahassananik8055 Год назад
Struggling to make a functional bookmark/favorite for a product with variables.
@femijohn
@femijohn Год назад
Please check my next video on advance prototyping of an add to cart flow. It’s more comprehensive than this.
@tanvirahassananik8055
@tanvirahassananik8055 Год назад
@@femijohn Eagerly waiting
@rajdeepdey3562
@rajdeepdey3562 Год назад
Bro, THANKYOU SO SO SO SO SO SO MUCH ♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️♥️
@femijohn
@femijohn Год назад
You're welcome!! ❤️
@donatasp.
@donatasp. Год назад
Since when choosing the number of items it appears in the cart? Usually, the cart is updated after pressing the Add to cart button. But the principle of prototyping itself is good
@femijohn
@femijohn Год назад
Well, I actually saw that behavior on an e-commerce site called “jumia”. You can check it out yourself. And I can understand why you might think is not the best experience. But the video was about learning the prototyping features. Thank you 👍🏽
@ayomideashiru554
@ayomideashiru554 Год назад
@donataspupeikis2672 I really do not think anything is wrong with the logic and experience @femijohn used, because immediately you click on add to cart in an e-commerce site, it is counted as 1, so if you would like to select more, then the Qty button shows up, which begins to add or remove from cart ... So in all that is rightly done and kudos to you bro!!!!
@femijohn
@femijohn Год назад
@@ayomideashiru554 Thanks for the response, well said. 👌🏽
@khabbas7911
@khabbas7911 Год назад
Hi please reply please. How much should a freelancer charge for corporate single homepage figma design? I lost my job due to layoff and now same company is offering me to work as freelancer. And I dont know how much should I charge.
@femijohn
@femijohn Год назад
Please check my bio you’ll see my social handles, kindly send a message on Twitter or LinkedIn let’s talk better
@suryajayarajan42
@suryajayarajan42 Год назад
can you do a full website crash course with the updated features, Please !! Because I am stuck with the old designs created and I have to redo the whole again as I am a beginner.
@femijohn
@femijohn Год назад
Sure, I will let you know once its available 😊
@suryajayarajan42
@suryajayarajan42 Год назад
@@femijohn thanku so much
@user-kp3rt5qn8k
@user-kp3rt5qn8k 8 месяцев назад
I like how you say supaaah
@femijohn
@femijohn 8 месяцев назад
Thank you 😂. Hope you're not making fun of me.
@user-kp3rt5qn8k
@user-kp3rt5qn8k 8 месяцев назад
@@femijohn why’d you think that 🌝 It was a compliment, I like your accent 🥰 And the content you upload , very helpful!
@reezus_
@reezus_ Год назад
👏🏾👏🏾👏🏾
@sisanmiworitseokorodudu9425
@sisanmiworitseokorodudu9425 4 месяца назад
👊🏽👊🏽👊🏽
@chiejine01
@chiejine01 Месяц назад
👏🏾❤
@femijohn
@femijohn Месяц назад
🙏
@rabiyanoor4459
@rabiyanoor4459 4 месяца назад
I want a UI UX designer job
@femijohn
@femijohn 4 месяца назад
I you will get a very good job. You can reach me on any of my social.
@EminYusifov
@EminYusifov Год назад
it's a really interesting lesson but it's really hard to listen to your accent
@femijohn
@femijohn 10 месяцев назад
Thank You.
@nekabarizornaata9299
@nekabarizornaata9299 5 месяцев назад
You're the best @thefemijohn
@femijohn
@femijohn Месяц назад
Thank you
Далее
A Python Developers Guide to AI in 2024
12:51
Просмотров 19 тыс.
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Просмотров 1,5 млн
Муж на час 😂
00:37
Просмотров 1,2 млн
Figma Variables & Advanced Prototyping - Crash Course
31:01
Master Figma variables in 7 minutes
7:13
Просмотров 58 тыс.
I use Drag and Drop to build modern Python Apps
14:08