Lottielab

Examples

Design in Motion

The hub for all those starting their journey in motion design…

Tutorials

Get to know the basics and foundations of Lottielab by animating…

Docs

The documentation that goes through the features of the editor and…

Blog

Team insights and updates on anything and everything about Lottie from…

Pricing

Login

Sign up

Examples

Design in Motion

The hub for all those starting their journey in motion design…

Tutorials

Get to know the basics and foundations of Lottielab by animating…

Docs

The documentation that goes through the features of the editor and…

Blog

Team insights and updates on anything and everything about Lottie from…

Pricing

Sign up

Lottielab

Lottielab

Resources

/

Tutorials

/

Figma to Interactive Animation

Figma to Interactive Animation

Figma to Interactive Animation

Figma to Interactive Animation

18 mins

Basic

Lesson Materials

Alert

No Motion

Open in editor

Static
Animated

With Motion

Open in editor

In this tutorial, we’ll cover on how you can to take your Figma designs to Lottielab, add animations, and make them interactive.

Back to Lessons

Interactive Lottie Login in React – Recreating Darin Senneff's Fun Login

Interactive Lottie Login in React – Recreating Darin Senneff's Fun Login

Interactive Lottie Login in React – Recreating Darin Senneff's Fun Login

18 mins

Intermediate

How to Recreate Apple’s "Hello" Stroke Animation Without After Effects

How to Recreate Apple’s "Hello" Stroke Animation Without After Effects

How to Recreate Apple’s "Hello" Stroke Animation Without After Effects

6 mins

Basic

How To Create a Fake 3D Rubik's Cube Without After Effects!

How To Create a Fake 3D Rubik's Cube Without After Effects!

How To Create a Fake 3D Rubik's Cube Without After Effects!

10 mins

Basic

How to animate the Google Gemini Closing Asset

How to animate the Google Gemini Closing Asset

How to animate the Google Gemini Closing Asset

8 mins

Basic

How to create a Toggle Animation

How to create a Toggle Animation

How to create a Toggle Animation

3 mins

Basic

How to create a Loading Animation

How to create a Loading Animation

How to create a Loading Animation

3 mins

Basic

Creating a Simple Loading Animation

Creating a Simple Loading Animation

Creating a Simple Loading Animation

3 mins

Basic

How to animate a Burger Icon

How to animate a Burger Icon

How to animate a Burger Icon

3 mins

Basic

Animating a Profile Mockup

Animating a Profile Mockup

Animating a Profile Mockup

4 mins

Basic

How to create a "Bouncing Ball"

How to create a "Bouncing Ball"

How to create a "Bouncing Ball"

2 mins

Basic

Animating a Flow Chart

Animating a Flow Chart

Animating a Flow Chart

5 mins

Basic

Animating a Bar Chart

Animating a Bar Chart

Animating a Bar Chart

3 mins

Basic

Bring your products to life

Bring your products to life

Bring your products to life

Bring your products to life

Get started for free

Get started for free