Тёмный
Jonathan Waterworth
Jonathan Waterworth
Jonathan Waterworth
Подписаться
Full-time UI Product Designer teaching Figma & UI


Get Two of my fonts free today! bit.ly/2Wcpwa9
Figma Variables tutorial for beginners 2023
12:18
10 месяцев назад
Inky Effect in Adobe Illustrator
7:00
4 года назад
Комментарии
@diegogarcia-serna9773
@diegogarcia-serna9773 День назад
Didn't know about the wrapping multiple objects part! Super cool
@fatjay9402
@fatjay9402 День назад
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
@baragoziq
@baragoziq 2 дня назад
i didnt have this in new version
@keerthanavenkatraman1471
@keerthanavenkatraman1471 3 дня назад
How to export as gif?? I couldn't do it
@MyNickNameIsNice26
@MyNickNameIsNice26 7 дней назад
pretty easy, nice! Solved my problem since i've a divided progress bars of indicator and remaining bar with percentage inbetween.
@solomonakinrefon7055
@solomonakinrefon7055 9 дней назад
How to make it slower?
@pavlinamalikova8259
@pavlinamalikova8259 11 дней назад
I lostet it when you said create component and in your Figma nothing appeared my variants show under the first one
@saleema6308
@saleema6308 13 дней назад
good but you used an outer frame to wrap the cards.
@venomousuiux
@venomousuiux 19 дней назад
Can it do jamaican rap?
@jonathanwaterworth
@jonathanwaterworth 15 дней назад
🤣you send me a video of what that sounds like and i'll check
@fiddlesticks000
@fiddlesticks000 20 дней назад
G'day mate you are a maniac
@arifuddin2681
@arifuddin2681 23 дня назад
I didn't understand properly
@jonathanwaterworth
@jonathanwaterworth 23 дня назад
Sorry, which bit don't you understand?
@arifuddin2681
@arifuddin2681 23 дня назад
@@jonathanwaterworth Actually I have recently started my journey on becoming a ui ux designer and have been learning figma lately from RU-vid . When u dragged down cards it automatically changed the names that's where I didn't understand how the names got changed automatically.
@jonathanwaterworth
@jonathanwaterworth 23 дня назад
@@arifuddin2681 Thanks for replying, congratulations on starting your journey! It's a feature within the newest figma update it uses ai to automatically name the items
@alirazaawan9655
@alirazaawan9655 27 дней назад
can't see bottom nav bar in my Figma
@jonathanwaterworth
@jonathanwaterworth 26 дней назад
You might not have the updated version yet, it's still getting rolled out
@marianaluna4980
@marianaluna4980 Месяц назад
With hover please!
@ratstar4102
@ratstar4102 Месяц назад
How will the Dev work on this?
@jonathanwaterworth
@jonathanwaterworth Месяц назад
Depends what they are using for development, you could give them a lottie file they could upload or they might have a solution using an animation library
@ratstar4102
@ratstar4102 Месяц назад
@@jonathanwaterworth Im really worried on how our developer will handle as he is some kind of ancient Developer and got stagnant with the old ways.
@Slimzday1
@Slimzday1 Месяц назад
Nice review my friend. I’m just getting into Figma and the one thing that drives me insane is when I want to increase for instance the size of a font by dragging instead of inputting a number. The little handle is so hard to get to appear. Not sure if they have some shortcuts for this but it’s one frustrating thing. Like I’m used to a slider or up and down arrows using other software. Other than that I’m enjoying using Figma. Again great video.
@jonathanwaterworth
@jonathanwaterworth Месяц назад
Oh man so true! That little slider is an 'easter egg' you have to explore to find it 😆 Doesn't fully help but if you click into the box you can use the arrows keys on the keyboard to bump it up or down :) or if you press 'k' that opens the 'scale' panel and you can change the size in there as well Thanks for the comment!
@Slimzday1
@Slimzday1 Месяц назад
@@jonathanwaterworth man I thank you so much for that info. It’s been a help. I’ll keep practicing and who knows maybe I will find the Easter egg 😆
@NighatSharminn
@NighatSharminn Месяц назад
Thanks a bunch Jonathan
@jonathanwaterworth
@jonathanwaterworth Месяц назад
Glad you enjoyed it
@WeeEric-cs4cm
@WeeEric-cs4cm Месяц назад
its doesn't works for me.
@jonathanwaterworth
@jonathanwaterworth Месяц назад
@@WeeEric-cs4cm did you drag a copy of the variant into your frame?
@WeeEric-cs4cm
@WeeEric-cs4cm Месяц назад
@@jonathanwaterworth yes i did put in the frame
@thepoppymallow
@thepoppymallow Месяц назад
Really great tutorial! Should have more views!!! thank you!
@jonathanwaterworth
@jonathanwaterworth Месяц назад
@@thepoppymallow thank you 😊
@rominafont5236
@rominafont5236 Месяц назад
I love the Notion template, do you have any video talking about how to create it or access to that file? I love the video thanks!
@jonathanwaterworth
@jonathanwaterworth Месяц назад
@rominafont5236 thanks, I've even building it out and refining it as I build more systems, hope to have more content about it or a finished file this year :) Are you hoping to use it to manage design system projects?
@PaulLyons-vt6rm
@PaulLyons-vt6rm 2 месяца назад
Bit misleading. That's not how radio buttons work.
@jonathanwaterworth
@jonathanwaterworth Месяц назад
Hi Paul, this is why I made this video - ru-vid.com5KzhxBirqUg?si=xBJkyemWCIOjr4Nl
@kishangautam7506
@kishangautam7506 2 месяца назад
Please make more videos like this I loved it & Congratulations for the baby
@jonathanwaterworth
@jonathanwaterworth 2 месяца назад
Thank you, This is a very kind message 😀
@farwakazmi7388
@farwakazmi7388 2 месяца назад
I have seen your profile shorts, they all are very much informative but too too fast to follow the steps.
@jonathanwaterworth
@jonathanwaterworth 2 месяца назад
Thank you, making more long form instructions at the moment, so hopefully you can have the best of both worlds soon 😀
@farwakazmi7388
@farwakazmi7388 2 месяца назад
@@jonathanwaterworth great
@farwakazmi7388
@farwakazmi7388 2 месяца назад
Very informative but too fast
@jonathanwaterworth
@jonathanwaterworth 2 месяца назад
Thank you. Would you rather if this was a 5 minute long form video?
@kiwimorado
@kiwimorado 19 дней назад
@@jonathanwaterworthyes please :)
@ganna.hanna_
@ganna.hanna_ 2 месяца назад
Thanks a lot from Ukraine!
@jonathanwaterworth
@jonathanwaterworth 2 месяца назад
Thank you 😊
@cheapthrills6660
@cheapthrills6660 2 месяца назад
do us a solid and drop the figma link
@jonathanwaterworth
@jonathanwaterworth 2 месяца назад
Get in contact, happy to share it
@kevinjohnnuluddin7069
@kevinjohnnuluddin7069 3 месяца назад
how do create a copy for preview?
@jonathanwaterworth
@jonathanwaterworth 2 месяца назад
Click the variant within the component set, right click and click copy or drag copy holding down 'option' on a mac keyboard as you have the component selected Move it into your frame to show the preview Does that help?
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
*Note* Hi all, at 3:27, when you finish setting up the prototype settings, you need to drag a copy of the default version of your component onto your screen, this is the version that the interaction will play from, not the master component
@CoClock
@CoClock 3 месяца назад
You never said that you *drag-copied the 1st variant* for the preview. I had to watch at 0.25x speed to work that shit out. I got it working. But Figma is in my opinion un-intuitive and needs more background explanation. Or at the very least list all the steps clearly. Like I can't tell you how bloody painful it was getting this to finally work. Anyway, to any others who face the same block. the last step before the successful preview is to copy the 1st Variant aka the Default Variant in the component and that references the component or something.
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
Hi mate sorry for the frustration, will try to work on in the future to make it more clear
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
Also I'm interested, with your comments around Figma, what do you use instead of Figma? And how did you try to make the interaction play without dragging a copy from the component set? (I just want to understand better so I can teach more clearly in the future)
@CoClock
@CoClock 3 месяца назад
@@jonathanwaterworth Thanks for responding. I’m a frontend developer and I've worked with designs from various tools including Adobe XD, Framer, InVision and Sketch. Each tool has its… quirks, but Figma has been particularly a PITA for me. To clarify my frustration: 1. The concept of auto-layouts in Figma feels unintuitive, especially compared to the more straightforward layer management in other tools. 2. Components in Figma often seem messy and difficult to manage (IMO), which complicates the design process. 3. I’ve seen that running prototype previews can be buggy and unpredictable at times, I might have even succeeded at this marquee before I realised it because the preview sometimes doesn’t even load the animation. I understand that every tool has a learning curve, but these kinds of issues significantly waste so much time. So, your tutorial was helpful and I don’t want to knock the current good, succinct, quality that it is, the step about drag-copying the first variant for the preview wasn't clear. Including all steps explicitly would really help others who might face the same blocks. I appreciate you actually confronting me about my fury though. In the moment I wanted to vent but now I’ve taken a breath, I hope this feedback is helpful.
@ymykha1616
@ymykha1616 3 месяца назад
I have the same problem, there is one step that i'm missing before you copy/paste or drag and drop the text box to see later the results on the preview screen... :(
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
Sorry, I didn't make it clear, you need to drag a copy of the default version of the component onto your frame, that should help
@ymykha1616
@ymykha1616 3 месяца назад
@@jonathanwaterworth thank you! i'll try this way
@TerpkeZ
@TerpkeZ 3 месяца назад
fye
@jonathanwaterworth
@jonathanwaterworth 2 месяца назад
Thanks mate
@irhmkrm
@irhmkrm 3 месяца назад
Sorry to say but it’s just the same approach with using variant, dont bother use variable then 🙏🏻 i expect to see how you utilize conditional -if 😔
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
It's been something I've been learning recently, seems very powerful once you get your head around it! Will have some videos eventually with how I've been using it
@schimenykrikets9692
@schimenykrikets9692 4 месяца назад
good, now edit it down to 30 seconds
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
I think I do have a reel with the same content :)
@begumagun
@begumagun 4 месяца назад
What is the plugins name
@munigoutham4371
@munigoutham4371 4 месяца назад
You taught me this in just a short. Cheers Mate!
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
Thanks mate!
@BrigetteEagar
@BrigetteEagar 4 месяца назад
I followed the prototyping tips and directions, but there is no scrolling on my end :(
@jonathanwaterworth
@jonathanwaterworth 3 месяца назад
Sorry for your frustration - did you drag a copy of the default version of the component variant onto your screen and still doesn't that work?
@phuongnguyen3101
@phuongnguyen3101 2 месяца назад
@@jonathanwaterworth yes, exactly my problem. do you know to change it?
@Mrchocolato
@Mrchocolato 12 дней назад
you have to duplicate it with alt+drag and not copy paste. That was the thing for me!
@macymoore6263
@macymoore6263 5 месяцев назад
Hi! I followed your directions and placed five different accordions on an overlay to act as a filter page (auto layout applied to both accordion and the overlay). The overlay scrolling is set so that the overflow scrolls vertically. But when I click any one filter accordion button open, I'm unable to scroll through to see the rest. Do you know what my issue could be? Is it because it's an overlay and not the full sized prototype?
@IsabelaRocco-ye1gm
@IsabelaRocco-ye1gm 5 месяцев назад
I am feeling like I am the dumbest girl in the world because I've already done this like a thousand times even naming everything the same but it just doesn't work
@jonathanwaterworth
@jonathanwaterworth 5 месяцев назад
Sorry to hear :( Could you try explain what isn't working and ill try help
@saadbaig7919
@saadbaig7919 5 месяцев назад
thanks a lot 😇
@jonathanwaterworth
@jonathanwaterworth 5 месяцев назад
Thank you!
@navyay8542
@navyay8542 5 месяцев назад
After prototyping the text how did that preview been selected that the third text line i'm not able to do that i get it as text scroll/ variant 3 could you please me out with this!!
@jonathanwaterworth
@jonathanwaterworth 5 месяцев назад
Sorry to hear! do you have the prototype settings the same as I did? Could you explain more which part isn't working?
@remmytonui220
@remmytonui220 6 месяцев назад
I would like to say that Im still new using figma
@jonathanwaterworth
@jonathanwaterworth 5 месяцев назад
We all start somewhere
@remmytonui220
@remmytonui220 6 месяцев назад
How does one design a mobile friendly page with Figma? Also, how does one design that to make a meeting scheduler?
@jonathanwaterworth
@jonathanwaterworth 5 месяцев назад
Oh this sounds interesting, will try design something like this for a future video
@user-sc5kf4mj8q
@user-sc5kf4mj8q 6 месяцев назад
One of the best🎉
@jonathanwaterworth
@jonathanwaterworth 5 месяцев назад
Thank you!
@julianaleshchyshyn3564
@julianaleshchyshyn3564 6 месяцев назад
Thanks a lot!
@jonathanwaterworth
@jonathanwaterworth 6 месяцев назад
Thanks so much!
@nobel187
@nobel187 6 месяцев назад
how do you break each line of words in his own text box?
@jonathanwaterworth
@jonathanwaterworth 6 месяцев назад
I showed it in the video, copy the text box and break each line into it's own text, so you should have 5 text boxes
@lukeandthings
@lukeandthings 6 месяцев назад
Thank you sir - allowing me to figma to the best of my ability 🎉
@jonathanwaterworth
@jonathanwaterworth 6 месяцев назад
You should be able to x10 your Figma now
@veronicawong9910
@veronicawong9910 6 месяцев назад
Not sure if I'm doing something wrong here, but is there a way to do this but then when you get to the point where your container is less than 250px (ie all of your blocks are now stacked vertically), remove the min width so the blocks can be completely fluid with the container width (which is less than 250px at this point) ?
@jonathanwaterworth
@jonathanwaterworth 6 месяцев назад
Thanks for the question Veronica! I'm happy to be proven wrong if it there is a way, but I don't think there is, because you need the min size for it to do the stacking, but I don't think you can remove it half way I'll try have a look, but don't think it's possible currently in Figma
@FLGDesigns
@FLGDesigns 6 месяцев назад
אחי זה היה כזה מהיר לא הבנתי לרגע
@jonathanwaterworth
@jonathanwaterworth 5 месяцев назад
סליחה חבר, אנסה לעשות עוד קצת תוכן ארוך יותר שהוא איטי יותר, השתמשתי ב-Google Translate בשביל זה אז אני מקווה שזה יגיע בסדר
@saleemnagi1676
@saleemnagi1676 4 месяца назад
Free Palestine 🇵🇸
@anahata8
@anahata8 6 месяцев назад
That was a great tip! 🎉😊 The only thing I didn’t understand is that why during the Present it didn’t work. But when I chose Preview It worked. ?! 😢
@jonathanwaterworth
@jonathanwaterworth 6 месяцев назад
Hmm that's very strange, did you the proper frame selected? Or try close Figma and open it to try again?
@anahata8
@anahata8 6 месяцев назад
@@jonathanwaterworth I refreshed Figma page and Preview page it Worked. ✨ Thanks for your answer Jonathan. 😎✌🏻
@antran1899
@antran1899 7 месяцев назад
Hi! Great content! I'm trying to get my accordion scrollable after expanding, can you make a video about it? Thank you!
@jonathanwaterworth
@jonathanwaterworth 6 месяцев назад
Thanks @antran I'm not sure if it's possible, I will try have a look