ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Figma Scrolling Text Animation Tutorial: Step-by-Step Guide
ฝัง
- เผยแพร่เมื่อ 12 ส.ค. 2024
- Unlock the captivating world of animation with our Figma Scrolling Text Animation Tutorial! This step-by-step guide is your gateway to crafting mesmerizing looping text animations effortlessly. Whether you're a novice or seasoned designer, our comprehensive tutorial will walk you through the process, unveiling the secrets behind each smooth scroll. Elevate your design game and breathe life into your projects with this easy-to-follow Figma tutorial.
The Forge Type Co Font's (my font shop)
creativemarket.com/JonathanWa...
What I use to build custom websites
bit.ly/2Z9b4PO
Jonathan Waterworth Twitter
/ jonowaterworth
Jonathan Waterworth Instagram
bit.ly/2UdjBit
The Forge Type Co Instagram
bit.ly/2UdHUNi
Links in the description are typically affiliate links that let you help support the channel at no extra cost.
*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
Really great tutorial! Should have more views!!! thank you!
@@thepoppymallow thank you 😊
How to export as gif?? I couldn't do it
Great easy to follow tutorial. Thanks Jonathan
Thanks so much :) Let me know if there are any things in Figma you want to learn?
This one is useful. Thank you very much.
Thank you 😊 let me know if you have any Figma or design questions?
Thanks a lot!
Thanks so much!
I followed the prototyping tips and directions, but there is no scrolling on my end :(
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?
@@jonathanwaterworth yes, exactly my problem. do you know to change it?
you have to duplicate it with alt+drag and not copy paste. That was the thing for me!
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!!
Sorry to hear! do you have the prototype settings the same as I did? Could you explain more which part isn't working?
how do create a copy for preview?
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?
hi! for some reason my text is fading out instead of scrolling. any suggestions to fix it so that it scrolls? thanks!
Hmm thats weird, can you check:
- that you have the settings the same as me for prototype
- That the layers are named the same thing within each variant of the component
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... :(
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
@@jonathanwaterworth thank you! i'll try this way
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
Sorry to hear :( Could you try explain what isn't working and ill try help
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.
Hi mate sorry for the frustration, will try to work on in the future to make it more clear
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)
@@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.
its doesn't works for me.
@@WeeEric-cs4cm did you drag a copy of the variant into your frame?
@@jonathanwaterworth yes i did put in the frame