Design Tactics #13 — Is this the future of animation?

Rive is ready to shake up the way we animate the web 🌐

At the end of last month I promised I’d share a new video walkthrough about the component properties beta…

Well, that didn’t quite pan out :)

But it’s live now so I won’t keep you waiting👇

🧠 4 strategies for the new component properties beta

Bubble properties are the game-changer. Here’s my latest video walkthrough showing how I’m using them (among other things) 👇

4 Strategies for the New Component Props Beta

🤝 How to improve the way you collaborate with engineers

Sooooo I did a thing. I wrote something on Linkedin 😳 (don’t judge lol).

I think the advice is solid though so I wanted to share it here too 👇

7 ways to improve how you collaborate with engineers

Practical strategies to become your engineering team’s favorite designer :)

🤔 Will Rive replace Lottie files?

You probably already know that I’m a huge advocate for using Lottie files to add motion to our designs…

But lately Rive has caught my attention in a big way. Here’s the founder sharing a side by side comparison 👀

Guido Rosso @guidorosso

We recreated this Lottie animation in Rive. Lottie file is 181.7 KB. Rive file is 18 KB. Lottie GPU memory: ~149 MB-190 MB Rive GPU memory: 2.6 MB Lottie JS heap: 16.9 MB Rive JS heap: 7.3 MB Lottie CPU: 91.8% Rive CPU: 31.8%

Rive also has a slickkkk integration with Framer that definitely rivals Webflow’s integration with Lottie. Each Rive animation is inherently interactive which adds a super fun element to the building process.

Ridd 🏛 @ridd_design

It's also kinda feeling like @rive_app + @framer vs. @LottieFiles + @webflow which is even further contributing to the FOMO... Because Rive looks pretttty legit

Abe has also been sharing some awesome tutorials showing how he’s using Rive + Framer to bring motion to his designs 👇

Abe Yang @abeyang

💡 Tip #2: creating sweet @rive_app icon animations and importing them to @framer Last week, I posted a Framer project that had some icon animations made in Rive. Here's a quick tutorial of how I did it. Let's go! 👇

Abe Yang @abeyang

🎉 Bonus 🎬 Tab icon animations made in @rive_app. State machine to @framer is 👌 🖌️ Sweet icons from @anronkai 🙌 Huge inspiration from @traf (browser!) and @FonsMans (ultra gradient!) https://t.co/q8GSv3FPrX

Rive is a big reason I’m considering going all in on Framer for the new Dive website. And speaking of Dive… 👇

🤿 Meet the Dive instructors

ICYMI, I recently shared a little recap video revealing the first wave of Dive instructors.

I couldn’t be more excited about this group of people :) And I’m already working on the 2nd wave of instructors!

Our mission is to make it easier than ever for people to learn specialized skills so you can grow in your career 💪

Maybe Rive/Framer will be the next course…

Meet the Dive Instructors

💁‍♂️ Practical typography tips

Being able to take something complex and ambiguous and break it down into simple, repeatable steps is a SKILL.

Dan absolutely crushes it in this thread and I highly recommend checking it out if you haven’t seen it already 👇

dan.glow @danqing_liu

Design is hard. But I’ve come to realize that laying out texts properly is 80% of what makes something look clean, and is the easiest thing you can do to make your design much nicer and more usable. Here are 10 practical tips for improving your text layout.

3️⃣ tips + use cases for "Slot" components

Slots 👏 Keep 👏 Getting 👏 More 👏 Intuitive 👏

Ridd's Academy for Figma @riddacademy

💪 3 use cases 💡 3 tips Here's how to get the most out of "slot" components in Figma 👇

💥 Random Goodness

Super cool use case for text properties

This tweet kind of blew my mind… It’s a really cool use case for components and text properties! Even if you don’t need this specific use case maybe it will spark other ideas.

Nitish Khagwal ✨ @nitishkmrk

This is how you can bind avatar initials with Figma text properties ▶️

Prototyping with sections

Miggi released a pretty rad video showing how you can use sections to remember the current state of sub-areas within your prototypes.

miggi @miggi

Updated this video on sections in prototypes for better state memory because captions were in the way. S/o to @Sketch_Talk for calling that out.

☝️ One more thing...

I want this newsletter to be something you look forward to each month. So I’d love to hear from you…

I have 3 quick questions and would love it if you’d hit me with a 30 sec reply:

—

1 — What content format do you enjoy the most?

1. Video lessons

2. Twitter threads

3. Articles

4. UI inspiration

5. Random goodness

6. Something else

2 — What topics do you want me to share more about?

Feel free to be as specific or broad as you’d like

3 — What do you want me to share less of?

Or anything else you’d like me to change?

Thank you for taking the time to reply! Your opinion really means a lot :)

— Ridd