whats the need of the two duplicates of the text file?
@wyarn16 күн бұрын
wish you the best, I learned a lot from this, even clipping content and cmd+y thing! I think it'd be a lil bit better if you could add the projects in timeline. like first one starts at 1:35 etc.
@unknownentity64821 күн бұрын
Dam, im completely novice to figma, i followed everything, i even play the vid in 0.25 but unfortunately it did not work for me 😢
@unknownentity64821 күн бұрын
Never mind, it worked! So, here's what I did at 4:45: I used CTRL + C and CTRL + Z to copy and paste, which was wrong. The solution is simple-you just need to hold ALT and drag, and it worked! HAHA 😅
@Ashi-z7g23 күн бұрын
Thank you... 1. Smart Animate 2. Instant ( don't use smart Animate for both ) I spent hours here not knowing that this was the issue
@CarlaPerez-g6v25 күн бұрын
Once it hits the 4 variant, it bounce back and rotates in reversal, any idea how to make it really an infinite loop?
@epramatarov29 күн бұрын
Bro, you lost me. Just slow down a little, not everyone is a pro like you..
@jonathanwaterworth29 күн бұрын
Sorry mate, I get too excited talking about Figma 😅 will keep learning and try slow down in future videos! Thanks for your comment ✌️
@rootdeyanАй бұрын
what about dropdown with scroll option with more selections?
@jonathanwaterworthАй бұрын
Thanks for the comment! Yep totally possible, I will add it to my list to make videos about. You need to have an extra wrapper for the content and change the 'scroll behaviour' settings in the prototype tab, you can follow this kind of method to get it to work help.figma.com/hc/en-us/articles/360039818734-Prototype-scroll-and-overflow-behavior
@herastudio543Ай бұрын
Hello, at 1:28 every time i try to drag my text box to the edge of the frame, it shifts my text & icons. did you do anything for your text shape to not change? thank you
@jonathanwaterworthАй бұрын
Did you group the auto layout frame? Check your side panel layers look the same as mine
@Funnyplanet818Ай бұрын
what about fluid layout?
@jonathanwaterworthАй бұрын
what do you mean?
@michaeldavid6276Ай бұрын
It just blinking here
@jonathanwaterworthАй бұрын
Check that the layers are named the same
@jyotipoojari2340Ай бұрын
It would be great if you could upload a full video of this as it would really help beginners follow along more easily.
@jonathanwaterworthАй бұрын
Thank you for your comment, will add it to the list of videos to make 😄
@tranang1259Ай бұрын
THANK YOU SO MUCH YOU DON'T KNOW HOW MUCH THIS MEANS TO ME RIGHT NOW😭😭😭 I have been struggling and struggling with components and variants but with only a 5-min-long video of yours, my life is saved 😭😭I truly appreciate this
@jonathanwaterworthАй бұрын
Thanks so much! I'm glad I could help 😁
@GeoffroyGaborieauАй бұрын
this is great and very nicely explained. Thanks a lot for doing this.
@jonathanwaterworthАй бұрын
Glad you enjoyed it! Any other things you want to learn about Design Systems?
@juniorrpk3244Ай бұрын
ok vc fez a copia e como faz isso? horrivel essa video aula. Odiei !
@jonathanwaterworthАй бұрын
Desculpe pelo incômodo. Qual parte você achou que não fez sentido
@davejeanclerc3066Ай бұрын
Thanks so much for this simple approach to making a dropdown. If I wanted to have multiple dropdowns on the same screen, each with their own distinct options, would I just duplicate each of the three key components? Thanks again!
@jonathanwaterworthАй бұрын
Thanks for the comment, Dave! Yes, that would work. You can place the instances on your page, open them individually, and fill out the menu options for each one. Then, set them back to the default variant so that when a user opens them, they will display the correct information.
@jonathanwaterworthАй бұрын
A quick tip to avoid an issue I often run into: make sure they are the same width. If they have different widths, you might encounter a strange issue where the dropdown expands inconsistently when opened.
@sturm_wind2 ай бұрын
Day fault?
@jonathanwaterworthАй бұрын
Not sure what that means sorry?
@Khelekwen2 ай бұрын
A little more slowly with some more detail would be appreciated. I'm a Figma novice and trying to use this to learn something new for work but navigating FIgma is still difficult for me so following along at this speed was a challenge. Also, using the circles to show mouse position before click would be a tremendous help for me! You moved so fast from one thing to another that I couldn't even see what you were clicking on half the time. A bright colored cursor would also help to keep up with where you are in the menus (I use red or High Vis Yellow during presentations at work). Lastly, break out the steps more. When I was taught in elementary school how to teach or explain things, we had an exercise of teaching someone to make a peanut butter and jelly sandwich who knew nothing and only just popped into existence. You had to break down opening the cupboard, taking out the peanut butter, placing it on the counter, opening the lid by twisting it counterclockwise while holding the jar in place, opening the drawer, taking out the butterknife, etc. Simply saying "put peanut butter on one side of the bread...etc." was inadequate as they didn't know how to get the bread or peanut butter. If you take this type of mindset and speak to and point out every selection, I think it would help newbies such as myself quite a bit to learn from you. Beyond the critique, I really appreciate you making this tutorial and will watch it a few more times to try to create the menu. I've still not been successful as it seems every few steps it just isn't working for me as I see it happen on your screen and I don't quite understand why. I'm sure I'm just missing a step that you did or something isn't set up correctly but it's started to frustrate me.
@jonathanwaterworthАй бұрын
Thank you for your thorough comment. I’m always trying to learn and improve!
@VictorAlejandroOrmenoHidalgo27 күн бұрын
@@jonathanwaterworth yes man try to do it again but slower haha anyway good video
@lilou87112 ай бұрын
Super vidéo merci
@jonathanwaterworthАй бұрын
Merci d'avoir regardé !
@gloriacassidy2 ай бұрын
Thanks 🙏🏼
@jonathanwaterworthАй бұрын
Thank you!
@chind0na2 ай бұрын
Free to use while they iron out bugs😂
@jonathanwaterworthАй бұрын
This is true! I'm waiting for the email eventually saying how much it will cost as a add-on 😅
@lindamaile2 ай бұрын
this was so helpful. thank you so much!!!!
@jonathanwaterworthАй бұрын
Thank you!
@elizabethmorello-v9t2 ай бұрын
thank you very much. it is always nice to hear about books that have inspired other designers.
@jonathanwaterworth2 ай бұрын
thanks so much!
@EcstasyJPEG2 ай бұрын
Thank you big bro
@davidvicencio12932 ай бұрын
AI beta feature is being gradually released for user in the wating list. Is not available for everyone right now.
@gasparcho2 ай бұрын
This is a great tutorial but how would you get the dropdown to open without pushing the other things underneath it down if you use auto layout. i.e. I have a dropdown in a big auto layout component and when I go to the prototype and open the dropdown it pushes everything else down. I see you didn't use auto layout so do you have any suggestions on if you are.
@jonathanwaterworth2 ай бұрын
This is an annoying limitation i've found with Figma, there isn't a great way to do it within frame You can make the menu that opens position absolute, so then it doesn't push anything down BUT if it's within an autolayout frame it will go behind the items below it If this is something you need to test as example a filter menu with lots of dropdowns stacked below each other, I'd recommend not putting them all in an autolayout frame that way you can get the function of opening them and not affecting the items below
@gasparcho2 ай бұрын
@@jonathanwaterworth Yeah that is what I ended up doing. I used auto layout to get everything pixel perfect then detached that and grouped the elements together and it started to work. Thank you for the help tho!!
@jonathanwaterworth2 ай бұрын
@@gasparcho Great to hear you figured it out! Yep thats what I normally do, it's an annoying limitation of the way things 'stack' in Figma!
@LexieABr2 ай бұрын
Is it possible to link the individual items to different frames? I.e. if we select "Item 1", it takes us to "Frame - Item 1"
@jonathanwaterworth2 ай бұрын
Yep this is possible, I could make a video on how to make a menu like this, would you find that helpful?
@saleksieva2 ай бұрын
That would be awesome! Yes, please!
@LexieABr2 ай бұрын
@@jonathanwaterworth That would be very helpful! Yes, please!
@elpedomasgrande12 ай бұрын
where do i get the wrapper repeater feature. It's not there!
@jonathanwaterworth2 ай бұрын
It's all getting rolled out to users slowly within figma, so you should have it soon!
@LexieABr2 ай бұрын
Hey, thanks for the great tutorial. I am struggling with the variants - I don't think I am clipping them properly but I am not sure how to fix it.
@jonathanwaterworth2 ай бұрын
Sorry to hear, I'm happy to look at your figma file if you share it and try to help
@LexieABr2 ай бұрын
@@jonathanwaterworth All fixed - I just reloaded Figma.
@jonathanwaterworth2 ай бұрын
@@LexieABr woohoo great to hear!
@LexieABr2 ай бұрын
@@jonathanwaterworth PS. Thank you for your prompt reply!
@JahnaviEskala3 ай бұрын
I tried it multiple times till now. Why doesn't it work 😢It just doesn't move, there's no animation
@jonathanwaterworth2 ай бұрын
Oh no sorry to hear! Is there anyway I can help you with it? Can you link your Figma file below for me to look at it?
@animehubking15373 ай бұрын
It's paid tho
@jonathanwaterworth3 ай бұрын
This is true, sorry I didn't talk about the pricing, more focused on what it is. It does have a free option though Nice profile pic, have you been watching 100 year quest?
@anissa18223 ай бұрын
Hi ! thanks for the video, I managed to do everything except that my menu appears as a whole and not item by item (in a drop down style) and it's driving me crazy !! I tried everything, the interactions are set on smart animate (ease out from closed to open and ease in from closed to open)... I don't know what else to do to make it work
@jonathanwaterworth3 ай бұрын
Sorry to hear you are struggling with it! Did you set up the items within the menu correctly? Can you link a Figma file here so i can have a look at what you have done wrong?
@lewto3 ай бұрын
Thank you!!!!
@jonathanwaterworth3 ай бұрын
Thanks for watching!
@nraczynska3 ай бұрын
you saved me, thank you for sharing!!
@jonathanwaterworth3 ай бұрын
Glad you enjoyed it!
@A_sudden_stranger4 ай бұрын
Seriously Man ❤❤!!! It's what exactly I want to know
@jonathanwaterworth3 ай бұрын
Thank you!
@Manutd001-jb4 ай бұрын
pls how did you break the the text in its own box pls
@jonathanwaterworth3 ай бұрын
Hi there, do you mean seperate the words, so make a copy and then reduce each text box to one word only?
@Manutd001-jb4 ай бұрын
PLS HOW CAN I BREAK TEXT PLS ANYBODY PLS
@shifatmasud4 ай бұрын
Shift+A can help to create quick autolayout frame. ❤
@marylinestrama63664 ай бұрын
Need a full tuto 😭
@jonathanwaterworth4 ай бұрын
Will get on it! I've been slowly turning all my shorts into full length videos! Thanks for the comment!
@shifatmasud4 ай бұрын
Figma file please 🙏
@jonathanwaterworth4 ай бұрын
Oh, I hadn't thought of that! I think I can do that. Would you find that helpful to follow along with?
@shifatmasud4 ай бұрын
@@jonathanwaterworth ofcourse 😍❤
@life_Of_Bowie4 ай бұрын
Can you please make another video tutorial about this. It would be so helpful to go through this a bit slower and also show a few more examples. I tried making a frame with a shape blur gradient and wanted to pin that to the background. Then I wanted to add cards into that frame and make it responsive. Could not figure it out.
@jonathanwaterworth4 ай бұрын
Thanks for the comment! Will try to start putting together another video with more examples and make sure I try to move slowly through it 😀
@cjn21094 ай бұрын
Just found your channel and immediately fall in love with that content bro! Keep it up, I'm new here (in ui/ux world) but i would love to give myself a chance in that industry :D
@jonathanwaterworth4 ай бұрын
Thanks so much, that's very kind! It's a great industry keep learning and designing and you'll be sweet!
@diegogarcia-serna97734 ай бұрын
Didn't know about the wrapping multiple objects part! Super cool
@jonathanwaterworth4 ай бұрын
Glad I could help!
@fatjay94024 ай бұрын
Sorry this is a little bit to fast ... i did first try and it didnt work.. i found my mistake .. ( cliping was still on ) but it was 100% because of the speed.. anyway thanks i learned something
@jonathanwaterworth4 ай бұрын
Thanks for following along! Sorry, I'm still trying to find my 'teaching speed' I sometimes get a bit carried away and move a bit quickly! Thanks for the feedback 😀
@baragoziq4 ай бұрын
i didnt have this in new version
@jonathanwaterworth4 ай бұрын
I think they are rolling it out to more users soon!
@keerthanavenkatraman14714 ай бұрын
How to export as gif?? I couldn't do it
@MyNickNameIsNice264 ай бұрын
pretty easy, nice! Solved my problem since i've a divided progress bars of indicator and remaining bar with percentage inbetween.
@jonathanwaterworth4 ай бұрын
Thank you glad I could help!
@solomonakinrefon70555 ай бұрын
How to make it slower?
@jonathanwaterworth4 ай бұрын
Change the duration in the smart animate panel when you are prototyping will adjust the speed :)
@pavlinamalikova82595 ай бұрын
I lostet it when you said create component and in your Figma nothing appeared my variants show under the first one
@jonathanwaterworth4 ай бұрын
Oh no sorry, did you figure it out?
@saleema63085 ай бұрын
good but you used an outer frame to wrap the cards.
@venomousuiux5 ай бұрын
Can it do jamaican rap?
@jonathanwaterworth5 ай бұрын
🤣you send me a video of what that sounds like and i'll check