How to animate the Google Gemini Asset using
@LottielabHQ
My first tutorial ever, if you find this helpful or fun -do let me know cos would love to improve my outputs! 🔨
Lesson materials here:
🧵 I got early access on
@figma
's UI3, here are my early thoughts on the new look:
It’s clean and spacious, but if you're used to UI2's look, then this new look is gonna throw you off, first:
1. "Ahh did they also remove mask?" Masking is a bit harder to find. There’s no
Listing the 12 Principles of UX in Motion in
@LottielabHQ
Once you get the hang of these 12 Principles, it's like unlocking a new level in design
Remix 👉
Principles by
@UX_in_Motion
On Scroll Interactive Lottie (13KB)
[ Made with
@LottielabHQ
and
@Framer
]
Recreated
@sebrindom
's design but turned it into an animated stack illustration instead 🎞️
We just launched Lottielab's "Figma to Lottie plugin" – it's officially LIVE!
@LottielabHQ
Animate your
@Figma
designs seamlessly to Lottie, GIF, or MP4. Pixel-perfect import with gradients, masks, vector paths, and moreee
Support us on PH:
It's Friday night and you're bored + you only have a circle
The end result of being bored last night, 10 mins in and it's already looking okay
Made in
@LottielabHQ
>
@Framer
Introducing Gemini 1.0, our most capable and general AI model yet. Built natively to be multimodal, it’s the first step in our Gemini-era of models. Gemini is optimized in three sizes - Ultra, Pro, and Nano
Gemini Ultra’s performance exceeds current state-of-the-art results on
More about easings,
@GoogleDesign
easing applied in
@LottielabHQ
And oh yeah, custom easing is already in Lottielab (still making the feature highlight video for it✌️)
Recreated and animated
@sawaratsuki1004
's
@reactjs
as a Lottie in
@LottielabHQ
then implemented it in React⚛️
🌟Lottie file optimised from 82KB to 7.7KB (91% smaller) ✨thru Livelink✨
🌟Updated the asset without touching any code ✨thru Livelink✨
A
@figma
ruler concept
Though I like UI3’s simplicity, I miss UI2’s ruler placement -being closer to the content. Here’s a quick idea: keep rulers still close to the content like UI2 but make it feel like UI3
When you select something, a local ruler shows up right next to the
Last week,
@jamesm
and I worked on some slide deck visuals that turned out pretty darn neat 🤩 Going to keep polishing these a bit more to get to use them on the upcoming new Clerk website.
Sheesh this is fun.
Now live on
@LottielabHQ
: Blend Modes 🎨
Stylize your animations with Blending Modes, add textures or subtle glows and fine-tune how layers blend to achieve unique visual effects. 👁️✨
After Effects animation to Interactive animation
Interactive Lottie (18KB)
[ Animation from Telegram imported to AE, made interactive with
@LottielabHQ
]
🎁Just Added: Rename and Search!
🔖 Rename files without leaving the editor.
🔍 Find the file you need, when you need it.
We’ve added search functionality and in-editor file renaming for improved asset discovery.
We've been sitting on this for too long.
⚡️Interactivity goes live tomorrow!
Design, animate, add states/events (hovers, scrolls, etc) and hand-off in one design editor.
⬇️ Import your Figma designs, Lotties or SVGs and bring them to life!
🔔Turn on notifs:
🌟 Optimized a Lottie file from 1.4MB to 16KB (99% smaller) with
@LottielabHQ
's Livelink
🌟 Implemented it in
@framer
instantly
🌟 Updated the asset without altering anything in
@framer
(my fave)
Host, optimize, and ship Lottie animations -all within
@LottielabHQ
Animating
@FonsMans
' Glowing Vision Pro
Made with
@LottielabHQ
🥽 should I turn this into a tutorial too?
🧵 In thread:
👉 Animation in editor overview
🤟 Little
@framer
interaction
✊ Figuring out how Fons' made the entire asset in
@figma
XD
Figma to Lottielab Challenge
Been loving lately
@sepide_moqadasi
's icon redesigns 😩🫶and here's my attempt at recreating it on
@figma
the animating it in
@LottielabHQ
✨ Little
@lmsqueezy
checkout for your
@Framer
website.
Got inspired by how
@cedric_design
used a loading indicator to show that the checkout page is loading. 🤌
Tutorial + remix below: 👇
@MiranoDesigns
Damn, this is just not right.
It’s like recording a movie and distributing it without permission or credit. It disregards the hard work and creativity of the original creators. You gotta respect and give credit where it’s due. I’d be ashamed to even call this build-in-public;
2. "WHEREEE'S THE CORNER RADIUSSS, oh there it is right in the appearance" The corner radius has moved to the appearance section, so if you're used to it being next to rotation, heads up!
Breaking: Adobe and Figma are no longer merging.
Update: Adobe begins development on new product called “Ligma” that is definitely not exactly like Figma.
@Apple
iOS Concept for the Airplane Mode control, with interactions
Treating different SF Symbols as transition states. Design made in
@Figma
, Lottie made in
@LottielabHQ
and dude, still in awe with the new Figma look
It takes some time to get used to, but it still preserves Figma’s simplicity.
Oh, and
@Figma
, the cursor tilt feels a bit off, it feels to tilted to the left, and the tip is different from the default
I love how my job title changes every month XD
Dropping
@LottielabHQ
's "Figma to Lottie" plugin next week! Get ready to bring your
@Figma
designs to life like never before, it's gonna be a blast! 🤸♂️
Show us some love on PH! ❤️
🚨 Announcing… Lottielab’s "Figma to Lottie animation" challenge for all motion enthusiasts! 🎉
As the year draws to a close, what better way to end it than flexing your skills with the easiest design to animation workflow -
@Figma
and
@LottielabHQ
Steps and Prizes below 🧵:
Been using Arc for a year now and since then have become a huuggee fan of
@browsercompany
. Everything about it is just amaazzing✨, especially those tiny delights
A quick little concept for a loader 🟠🟠🟢
Animation made in
@LottielabHQ
Prototyped in
@framer
#motiondesign
Loved the GPT-4o demos and also loved this
@OpenAI
GPT-4o animation👁️
Recreated the design and animation in
@LottielabHQ
Here's an editable copy of the animation if you wanna see how it's animated 👉
We've been sitting on this for too long.
⚡️Interactivity goes live tomorrow!
Design, animate, add states/events (hovers, scrolls, etc) and hand-off in one design editor.
⬇️ Import your Figma designs, Lotties or SVGs and bring them to life!
🔔Turn on notifs:
🥁 Introducing our new docs! 🥳
Although Lottielab is so easy that you can dive right in, this docs covers the A to Z of various tools and advanced properties to help you create even more compelling Lottie animations faster!
Check it out at
Great use of Lottie
@SpotifyEng
!! Had fun reading the learnings on it! Kudos to the teamwork too!! And yeah debugging AE for Lotties is definitely jbasdkja that's why I recommend using
@LottielabHQ
for everything Lottie ✨
@Spotify
Wrapped `23 Animated in
@LottielabHQ
Each year, our design and engineering teams use animations to bring Wrapped to life. For 2023 Wrapped, they used a slightly different approach. Check it out here: