ฝัง
- เผยแพร่เมื่อ 29 ธ.ค. 2022
- Up your typography game in your UI designs! Learn this simple technique, and try it out in Figma.
DISCLAIMER:
QuickJam is a fast-paced mini-series that aims to deliver information quickly to other designers, to let the designers follow their intuition when designing, rather than spoon-feeding them every single step. We hope this method helps make the designing process much more fun & intuitive rather than rigid & boring.
If you enjoy jammed content, please don't hesitate to subscribe so you don't miss any of the new content, also share the video with people who could benefit from it to support my channel, and leave your suggestions down in the comments!
Subscribe to jammed:
/ @jammedesign
Buy me a coffee:
paypal.me/jammedesign
Download free jammed design resources:
jmmd.gumroad.com/
How to Import a Transparent Video in Adobe Xd:
• How to Import a Transp...
Instagram:
/ jammedesign
Music Credits:
Track: Feel - Land of Fire [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Feel - Land of Fire | ...
Free Download / Stream: alplus.io/feel
Are you enjoying UI animation-related Quickjams? Let me know your thoughts below & leave recommendations!
Watch how to design icons the right way:
th-cam.com/video/BiHlq3ssuAE/w-d-xo.html
I tried the animation but it didn't work on my side ...is there a way I can reach out to you for more clarity ?
@KeezyPm Helloo, sure thing.
You may reach me out by mail on my about page. 👌
@@jammedesign Okay , I sent you a private message on your Behance account sir ...I can't find a mail link on your bio
Quick and simple, here's a man who knows his stuff. Thank you for this super quick and easy tutorial Mr Jammed.
Thank you, Mr Lawless.
Thank you so much !! I've been trying to understand variables for a while now, much clear clear now !
You're amazing! Thank you for the simple, straight to the point tutorial. It helped so much.
That’s the best video i have seen on this! it was so easy 🙏🏻
Excelent tutorial! Quick and simple. i didn't know it was possible to do that in figma. Thanks!
Thank you so much for this tutorial its very detailed, easy to understand appreciate this !!
Works perfectly. Thanks!!
Thanks! I've been looking for this for a long time!
Welcome!
It works and I’m so shocked. Thank you so much. May you be rewarded abundantly ❤️
Thank you! Glad it worked. :)
I could not figure out why the animation wasn't working...had to refresh - thanks so much!!
Thank you for the quick and simple tutorial. At first the animation wasn't working, I refresh Figma and then it worked. It's weird though because every time I open Figma it doesn't work, I have to always refresh by pressing R. It's probably a Figma problem.
Loved your tutorial!
Thanks so much! It was very helpful!
Thank you so much for this! ♥
Thank you, useful! Just what i need.
You're a genius bro!! You've helped me to solve one problem that I've been having hahaha. Thank u so much.
@@melaniedesigner Welcome! Good luck 🤞
Great one !!
thank you so much for this, i am definitely subscribing immediately
Thanks bud!
this was simple and helpful. thank yoou
Very easy! Thank you❤❤
Thanks man)
you are the best
You da best! Thanks a bunch!
Fantastic!
AWESOOME THANK YOU SO MUUUCH
This is really helpful.. thank you
Awesome thanks alot!
Superb tutorial! Thank you!
Appreciate it!
Thank you!
Thank you! :)
Wonderful and very helpful!
Thanks! Glad you found it helpful.
For all those wondering why their proto doesn't work: you need need to set the flow starting point and pull lines from each of your frames to the next. If you only have one frame, select it -> prototype -> Flow staring point.
Don't work...
Thank you so much!!
Welcome so much!! :D
Thanks so much!
Welcome!
Thank you for the tutorial! Is it possible to make the marquee text in a slope? I tried and it is not working, the texts are flashing up and down.
hii , i did exactly what you showed but mine isnt working
Once I change the Interaction details to after delay instead of click, the animation section disappears and I can't select the linear and smart animation. Any idea what's causing this?
Thank you
Welcome!
Is it possible to stop the scrolling on mouse hover and resume when on mouse leave, in Figma Prototyping? you may use variables and modes, if required.
hi, lovely tutorial! i tried it and it works but my only concern is that theres a tiny pause (im guessing 1ms) in the animation when the scroll in the second variant is about to switch to the first variant. this does not make it smooth and seamless like yours. is there anything i can do to fix this?
Thanks for reaching out! I think this is just as good as it gets in Figma prototyping.😅 At the end of the day, it's just a prototyping tool that is used to test or show a concept to others, so I wouldn't worry much about the 1ms delay.
However, one thing you could do is recheck the start and end positions and make sure they are lining up properly and that the 2nd animation is set to after delay 1ms with "Instant" instead of smart animate.
I'm glad you found the video helpful! Cheers.
how do we copy the variant?
Hi did Figma changed something? Because I've tried it step by step but it doesn't work my text fades out but doesn't move 😕
I had the same issue. The thing I was doing wrong was moving the text in the variant instead of the frame containing the text. That solved it for me
Try checking if your animation style is set to "Smart Animate," and if that doesn't fix it, the answer above might do.
Hi thanks for the cool video! I was having difficulty with this exercise, I noticed a few items from my visual that don't match your output.
1. I cannot move a frame within a variant like you did. Checked the Figma document and it mentions that a frame cannot be moved independently within a variant.
2. when I added the interaction, my arrow connector was pointing all the way on the right side of the variant. Yours are connected in the middle of the component. Unsure if that is a deal breaker, but I find that odd.
3. I tried everything you demoed, all I see is a very small animation that is trying to complete the text string. There is no looping occurring. :(
Hope you can provide some pointer. Thanks a ton.
Hey there! I'll try to provide help with each point individually:
1. You should be able to move frames with ease within variants, it's the anatomy that matters when building animations in Figma. Just make sure that the frame that you would like to move (which contains all of the other elements) is placed inside another frame (which is just there to act as a wrapper that wraps around the elements that move). So the variant itself should be a simple frame that wraps around another frame within that should be animated.
2. I don't think it matters where the arrow is coming out or going into, as long as the interaction is set to "Change to." Figma has been releasing a lot of updates recently and it might look a little different from the video.
3. For the looping, you will need to reconnect from the last variant to the first variant again. Sometimes you might need to restart the prototype for it to work.
Hope this was helpful! Good luck
@@jammedesign Thank you so much! It worked! The first item was the main reason I couldn't make it work. I missed one frame!
Hi, great tutorial thank you!
I have one question... I'm using this to insert around 17 different logos, so I have duplicated them linearly to be able to create the animation. Only thing is that with 10,000 ms the animation is super fast and then slows down.
Is there any way to solve this? Thank you!
Thank you! Yes, you could have the animation slightly slower by adding more 10000ms steps inbetween each animation. So, instead of having a 1 step 10000ms, divide the animation into 4 variants or more to have it look slower at 40000ms. It will need some maths to have it look perfect though. Good luck!
i did exactly as you told and it's not working...
Is there way to slow down the Marque text even more? I have my linear smart animate time set to 10000ms as shown in the video, but when I look at the prototype its going way too fast.
I think in figma, the slowest animation is 10000ms. However, you can try to slow it down by reducing the overall length of your line. Hope this helps. :)
@@jammedesign Thanks for the advice, I'll give it a try
Hi, unfortunately I can't get it to work. I tried to set everything exactly like in the video, but nothing.
same happening with me
Check the name once again. Move the content with holding shift and mouse keys to keep it inside the frame else it will run out and the smart animated won't work.
Hi, thanks for your valuable training. In endless auto scrolling, I want to do this action: when take the mouse on the endless auto scrolling, it be stop? Can one help me to do it?
Hey! Thanks for your feedback. I know the effect you're trying to achieve, however, I think it's not possible to achieve through pure figma prototyping.
You can do it in a slightly hacky way though by making a third state that's not connected to either, and connect the other 2 states to it with the "while hovering" selected.
Another way is to simply import an autoplaying video that's constantly scrolling, and create an interaction to pause on hover. That would look better in prototype.
Hope this helps!
For some reason, it does not work anymore. I've followed it entirely
my component was working and then it stopped, any advice? ive been trying to recreate it following the exact same thing i did before with no luck
Same here
I'm not able to Move text pls help
for some reason the Fixed position is not working with this method. I need the marquee fixed on top of the screen, but it moves with the scroll although I placed it into the Fixed area :(
To have it fixed in a specific position, you will have to put the marquee component inside another fixed frame, not the marquee itself. Maybe try putting the component in a new auto-layout, fix its position, and refresh your prototype view a few times. I've tried it and it works fine as it seems for me. Hope this helps.
Can we reverse the flow like currently the texts are moving from right to left of the screen. Is there a way to make them move from left to right?
Yes definitely! Just reverse the order of the prototype from bottom to top and it should work seamlessly.
@@jammedesign thank you it worked
CAN THIS ONLY BE DONE TO THE LEFT AND RIGHT?
Any direction works, as long as the motion is linear and could be repeated in sequence.
Hey mine is working in one frame but on other frame it is stopping in middle is this figma problem?
Hello, I think sometimes you just need to restart the prototype (close and reopen) in order for it to work properly on all screens. Hope this helps you out.
Great ! But... On my figma it works in preview mode but it does not work in present mode (?). Strange...
If u restart the presentation, it should work perfectly 👌 thanks for your comment!
how can you export the scrolling animation into a gif?
I don't think this is a built-in feature in Figma. However, you might want to look at plugins that do it for you.
I try same as you and not working but when i do on click its work .. only after delay not working
I think in these instances, you might want to close and reopen the prototype for the animation to take effect. Let me know if that helps!
is it possible to reverse the rotations?
Yep, should be easy to do. Just reverse the order of the prototype and it should work as expected.
Is there any way to make the transition more slower, 10000ms is still very fast for me. 😐
Fortunately, yes. You could make more steps mid transition. So instead of having 1 step as shown in the video, you could have 4 x 10000ms, which makes 40 second speed. Try it out and let me know if it works!
@@jammedesign, I'd love to see your do a video on this. I need a slower transition too but can't figure out how to do this. Thanks.
Heyy the animation works really well but in my case the text is duplicated in the background and its opacity is increasing from 1 to 100 in 10000ms
nevermind i had duplicated it and its opacity had somehow turned to 0 and then it had been animated XD
@kartikkalbande5938 Haha, I love how you just replied to yourself. Thanks for commenting! 😃
Yes it's quick and simple step by step nothing happens I give up! 🙄
I'm sorry that you're facing difficulties following the video. It's a more complex animation style, so I would understand why it might be a little difficult. If you're just starting with animation in UI, this video might not be best suited for you.
Please let me know which step you find yourself getting stuck at so that I can assist you perhaps. Otherwise, try to make sure that the group of elements that you're trying to move is the group within the component frame and not the component itself. Double-click or check from the layers panel to make sure you're moving the right frame. Thank you.
@@jammedesign Hi thank's for getting back to me it's not complex my text isn't moving but thank's for your advice I appreciate it 👍
@@j4ckfl4ash33 Ok this problem could be fixed either by extending the amount of repeated text within the frame, or by making sure that you're selecting the elements within the frame and not the component itself. Hope this helps.
@@jammedesign Figured it out!! 😅 Finally so A question why is it stops then restarts after the last text ?
@J4ck Fl4ash It's to keep the whole thing looping and give the infinite loop feel.
Yes it not happening I tried it exactly
Note: IF NOT WORKING
sol: move one frame of the component to the left and 2nd one to the right. So from where the one frane will stop working the other will start working and this is how you going to achieve the marque effect
You have to make the component very carefully (I'm attaching the link from where i got the solution)
th-cam.com/video/bMCI7dZQMxM/w-d-xo.htmlsi=GTxlHvz4cH0nlF5i
Tried it with pictures didn’t work 😢
Make sure that you're using smart animate and that your layers are named the same between the variants to ensure that the animation works properly. Let me know if that helps. :)
No, It's not working.
200IQ Animate Lol..
АТДУШИ
So fast its impossible to learn
The video is too fast😂
Try slowing it down :D
@@jammedesign 😂
But Jamm
Can you solve this for me
What do I do
Other INTERACTIONS aside "change to" are not working in my figma
Can use, overlay...and the likes
@@hankerboot571 That is because for components you can only change from one component state to another, however, if you try prototyping something outside the component set, it should have all of the properties available. Hope this was helpful. :)
@@jammedesign I will try look into it again... thanks much