Design Tactics

Share this post
Design Tactics #13 — Is this the future of animation?
ridd.substack.com

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

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

Ridd
Nov 2, 2022
Share this post
Design Tactics #13 — Is this the future of animation?
ridd.substack.com

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

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 👀

Twitter avatar for @guidorosso
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%
6:42 PM ∙ Oct 12, 2022
4,273Likes349Retweets

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.

Twitter avatar for @ridd_design
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
Image
4:00 PM ∙ Oct 28, 2022
24Likes1Retweet

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

Twitter avatar for @abeyang
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! 👇
Twitter avatar for @abeyang
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
9:15 PM ∙ Oct 31, 2022
110Likes7Retweets

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

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 👇

Twitter avatar for @danqing_liu
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.
6:07 PM ∙ Oct 3, 2022
21,791Likes3,233Retweets

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

Slots 👏 Keep 👏 Getting 👏 More 👏 Intuitive 👏

Twitter avatar for @riddacademy
Ridd's Academy for Figma @riddacademy
💪 3 use cases 💡 3 tips Here's how to get the most out of "slot" components in Figma 👇
Image
4:00 PM ∙ Oct 13, 2022
362Likes50Retweets

💥 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.

Twitter avatar for @nitishkmrk
Nitish Khagwal ✨ @nitishkmrk
This is how you can bind avatar initials with Figma text properties ▶️
2:07 PM ∙ Oct 24, 2022
432Likes54Retweets

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.

Twitter avatar for @miggi
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.
6:12 PM ∙ Oct 26, 2022
19Likes3Retweets

☝️ 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

Share this post
Design Tactics #13 — Is this the future of animation?
ridd.substack.com
Comments
TopNew

No posts

Ready for more?

© 2023 Michael Riddering
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing