Inky Effect in Adobe Illustrator
7:00
Пікірлер
@gasparcho
@gasparcho 58 минут бұрын
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.
@LexieABr
@LexieABr 3 күн бұрын
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"
@elpedomasgrande1
@elpedomasgrande1 4 күн бұрын
where do i get the wrapper repeater feature. It's not there!
@LexieABr
@LexieABr 5 күн бұрын
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.
@jonathanwaterworth
@jonathanwaterworth 5 күн бұрын
Sorry to hear, I'm happy to look at your figma file if you share it and try to help
@LexieABr
@LexieABr 4 күн бұрын
@@jonathanwaterworth All fixed - I just reloaded Figma.
@jonathanwaterworth
@jonathanwaterworth 4 күн бұрын
@@LexieABr woohoo great to hear!
@LexieABr
@LexieABr 3 күн бұрын
@@jonathanwaterworth PS. Thank you for your prompt reply!
@JahnaviEskala
@JahnaviEskala 11 күн бұрын
I tried it multiple times till now. Why doesn't it work 😢It just doesn't move, there's no animation
@jonathanwaterworth
@jonathanwaterworth 8 күн бұрын
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?
@animehubking1537
@animehubking1537 16 күн бұрын
It's paid tho
@jonathanwaterworth
@jonathanwaterworth 15 күн бұрын
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?
@anissa1822
@anissa1822 23 күн бұрын
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
@jonathanwaterworth
@jonathanwaterworth 14 күн бұрын
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?
@lewto
@lewto 25 күн бұрын
Thank you!!!!
@jonathanwaterworth
@jonathanwaterworth 22 күн бұрын
Thanks for watching!
@nraczynska
@nraczynska Ай бұрын
you saved me, thank you for sharing!!
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Glad you enjoyed it!
@A_sudden_stranger
@A_sudden_stranger Ай бұрын
Seriously Man ❤❤!!! It's what exactly I want to know
@jonathanwaterworth
@jonathanwaterworth 22 күн бұрын
Thank you!
@odebunmitobiloba8876
@odebunmitobiloba8876 Ай бұрын
pls how did you break the the text in its own box pls
@jonathanwaterworth
@jonathanwaterworth 22 күн бұрын
Hi there, do you mean seperate the words, so make a copy and then reduce each text box to one word only?
@odebunmitobiloba8876
@odebunmitobiloba8876 Ай бұрын
PLS HOW CAN I BREAK TEXT PLS ANYBODY PLS
@shifatmasud
@shifatmasud Ай бұрын
Shift+A can help to create quick autolayout frame. ❤
@marylinestrama6366
@marylinestrama6366 Ай бұрын
Need a full tuto 😭
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Will get on it! I've been slowly turning all my shorts into full length videos! Thanks for the comment!
@shifatmasud
@shifatmasud Ай бұрын
Figma file please 🙏
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Oh, I hadn't thought of that! I think I can do that. Would you find that helpful to follow along with?
@shifatmasud
@shifatmasud Ай бұрын
@@jonathanwaterworth ofcourse 😍❤
@Mateo_Bowie
@Mateo_Bowie Ай бұрын
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.
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
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 😀
@cjn2109
@cjn2109 Ай бұрын
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
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Thanks so much, that's very kind! It's a great industry keep learning and designing and you'll be sweet!
@diegogarcia-serna9773
@diegogarcia-serna9773 2 ай бұрын
Didn't know about the wrapping multiple objects part! Super cool
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Glad I could help!
@fatjay9402
@fatjay9402 2 ай бұрын
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
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
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 😀
@baragoziq
@baragoziq 2 ай бұрын
i didnt have this in new version
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
I think they are rolling it out to more users soon!
@keerthanavenkatraman1471
@keerthanavenkatraman1471 2 ай бұрын
How to export as gif?? I couldn't do it
@MyNickNameIsNice26
@MyNickNameIsNice26 2 ай бұрын
pretty easy, nice! Solved my problem since i've a divided progress bars of indicator and remaining bar with percentage inbetween.
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Thank you glad I could help!
@solomonakinrefon7055
@solomonakinrefon7055 2 ай бұрын
How to make it slower?
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Change the duration in the smart animate panel when you are prototyping will adjust the speed :)
@pavlinamalikova8259
@pavlinamalikova8259 2 ай бұрын
I lostet it when you said create component and in your Figma nothing appeared my variants show under the first one
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Oh no sorry, did you figure it out?
@saleema6308
@saleema6308 2 ай бұрын
good but you used an outer frame to wrap the cards.
@venomousuiux
@venomousuiux 2 ай бұрын
Can it do jamaican rap?
@jonathanwaterworth
@jonathanwaterworth 2 ай бұрын
🤣you send me a video of what that sounds like and i'll check
@fiddlesticks000
@fiddlesticks000 2 ай бұрын
G'day mate you are a maniac
@arifuddin2681
@arifuddin2681 2 ай бұрын
I didn't understand properly
@jonathanwaterworth
@jonathanwaterworth 2 ай бұрын
Sorry, which bit don't you understand?
@arifuddin2681
@arifuddin2681 2 ай бұрын
@@jonathanwaterworth Actually I have recently started my journey on becoming a ui ux designer and have been learning figma lately from KZbin . 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 2 ай бұрын
@@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 2 ай бұрын
can't see bottom nav bar in my Figma
@jonathanwaterworth
@jonathanwaterworth 2 ай бұрын
You might not have the updated version yet, it's still getting rolled out
@marianaluna4980
@marianaluna4980 3 ай бұрын
With hover please!
@jonathanwaterworth
@jonathanwaterworth Ай бұрын
Thanks I'll try make a hover one in the future!
@ratstar4102
@ratstar4102 3 ай бұрын
How will the Dev work on this?
@jonathanwaterworth
@jonathanwaterworth 3 ай бұрын
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 3 ай бұрын
@@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 3 ай бұрын
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 3 ай бұрын
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 3 ай бұрын
@@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 3 ай бұрын
Thanks a bunch Jonathan
@jonathanwaterworth
@jonathanwaterworth 3 ай бұрын
Glad you enjoyed it
@WeeEric-cs4cm
@WeeEric-cs4cm 3 ай бұрын
its doesn't works for me.
@jonathanwaterworth
@jonathanwaterworth 3 ай бұрын
@@WeeEric-cs4cm did you drag a copy of the variant into your frame?
@WeeEric-cs4cm
@WeeEric-cs4cm 3 ай бұрын
@@jonathanwaterworth yes i did put in the frame
@thepoppymallow
@thepoppymallow 3 ай бұрын
Really great tutorial! Should have more views!!! thank you!
@jonathanwaterworth
@jonathanwaterworth 3 ай бұрын
@@thepoppymallow thank you 😊
@rominafont5236
@rominafont5236 4 ай бұрын
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 3 ай бұрын
@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 4 ай бұрын
Bit misleading. That's not how radio buttons work.
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
Hi Paul, this is why I made this video - kzbin.info5KzhxBirqUg?si=xBJkyemWCIOjr4Nl
@kishangautam7506
@kishangautam7506 4 ай бұрын
Please make more videos like this I loved it & Congratulations for the baby
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
Thank you, This is a very kind message 😀
@farwakazmi7388
@farwakazmi7388 4 ай бұрын
I have seen your profile shorts, they all are very much informative but too too fast to follow the steps.
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
Thank you, making more long form instructions at the moment, so hopefully you can have the best of both worlds soon 😀
@farwakazmi7388
@farwakazmi7388 4 ай бұрын
@@jonathanwaterworth great
@farwakazmi7388
@farwakazmi7388 4 ай бұрын
Very informative but too fast
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
Thank you. Would you rather if this was a 5 minute long form video?
@kiwimorado
@kiwimorado 2 ай бұрын
@@jonathanwaterworthyes please :)
@ganna.hanna_
@ganna.hanna_ 4 ай бұрын
Thanks a lot from Ukraine!
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
Thank you 😊
@cheapthrills6660
@cheapthrills6660 4 ай бұрын
do us a solid and drop the figma link
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
Get in contact, happy to share it
@kevinjohnnuluddin7069
@kevinjohnnuluddin7069 5 ай бұрын
how do create a copy for preview?
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
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 5 ай бұрын
*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 5 ай бұрын
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 5 ай бұрын
Hi mate sorry for the frustration, will try to work on in the future to make it more clear
@jonathanwaterworth
@jonathanwaterworth 5 ай бұрын
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 5 ай бұрын
@@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 5 ай бұрын
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 5 ай бұрын
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 5 ай бұрын
@@jonathanwaterworth thank you! i'll try this way
@TerpkeZ
@TerpkeZ 5 ай бұрын
fye
@jonathanwaterworth
@jonathanwaterworth 4 ай бұрын
Thanks mate
@irhmkrm
@irhmkrm 6 ай бұрын
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 5 ай бұрын
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 6 ай бұрын
good, now edit it down to 30 seconds
@jonathanwaterworth
@jonathanwaterworth 5 ай бұрын
I think I do have a reel with the same content :)
@begumyilmazagun
@begumyilmazagun 6 ай бұрын
What is the plugins name