FROM ME THIS WEEK
I am back with exciting news!
a passport with a post-it note.
I have been away for a couple months. After three back to back trips to Sendai, Vegas, and Lisbon, I am finally home. Seeing how design feels different across Asia, the US, and Europe was incredibly refreshing. My mind is full of new ideas, even if my body is still catching up from the travel.
I spent some time during my break going through your messages, and your requests actually turned into a five-week tutorial series that starts today. Seeing what you were curious about even got me building a new product behind the scenes. I’m sharing a first look at the bottom of this email.
But first, let’s see how to make type move along a curve seamlessly.
LEARN DESIGN
Text Animation on Path: Figma to Rive
Master native text on path in Figma and animate it with Rive.
Cover
🎁 Grab your starter file and follow along!
Video Tutorial is linked below.
Step 1 - The Base
Draw a wave path wider than your frame.
Go into draw mode and click "Simplify Vector" to clean up the points.
Switch your anchors to Mirror Angle and Length for a balanced curve.
Draw your wave path
Step 2 – The Path Background
Duplicate path and Offset Vector to 40px.
Remove the stroke and add a solid fill. This sits behind your text.
Keep a clean copy of your original path to the side for later.
Offset vector 80px
Step 3 – Typography
Select the Type Tool (T) and hover over the path and click to paste your text.
Align it to the Center and drag the start circle to the beginning of the path.
Keep pasting until the path is full.
Paste the quote until it fills the path
Step 4 – Moving to Rive
Copy path as SVG and paste it into Rive.
Hit Enter to edit vector points and use the Pen tool to close the loop.
Set your stroke to 80px to match your Figma design.
close the path using pen tool
Step 5 – Follow path
Paste your text into Rive. then add a "Follow Path" Text Modifier.
Set the Target to your path layer.
☝️Check the ""Auto Orient"" box so the letters rotate naturally along the curve.
check auto-orient box
Step 6 – The Infinite Loop
Set an X Position keyframe at 0.
Turn on Rulers and drag a guide to the first letter. then drag the X value until the second quote lines up with the guide.
Set playback to Loop.
drag a guide to align with the first letter
Step 7 – Tada!
✨ Result time.
That is it. You have a seamless, text animation ready for the web.
(sorry for the low-res gif)
Final result.
Watch on Youtube
Like and share the video.
Leave a comment if you got any questions!
WHAT’S COMING NEXT
Gradient Glowing Text in Figma
Cover of next tutorial
One last thing before I let you go.
Next week, I am sharing a new tutorial on gradient glowing text. It’s a technique I have been playing with to add radiant energy to hero headers without making them look messy or hard to read.
It’s that kind of effect that requires photoshop, but you know we have Photopea 😉. You got no reason to not flex this on your next client project.
See you in the next issue. Bye!
Thanks for reading and spending a bit of your day with me.
If you want to keep up with more behind-the-scenes thoughts or small design notes I don’t always send by email, feel free to connect with me on LinkedIn.
Would love to have you there:
See you in the next email.
MengChi