How to Design an Animated Line - Figma Tutorial

preview_player
Показать описание
👉 In this video I show you how to design an animated line with figma.

🙏 If you liked this video subscribe to the channel to not miss the next content.
  1. Luca Leone // UX-UI Designer
  2. ux
  3. user experience
  4. user experience design
  5. ui
  6. user interface
Рекомендации по теме
How to Create 0:11:08

How to Create Your First Animated Film

Let's Design: An 0:10:15

Let's Design: An Animated Series Character!

How to make 0:16:39

How to make animated videos [Tutorial for beginners]

How to Start 0:07:11

How to Start Creating Your Own Animated Series |#1|

Turn Scripts into 0:00:17

Turn Scripts into Animated Explainer Videos with One Click!

3D animated Landing 0:00:16

3D animated Landing page!

How to Create 0:04:50

How to Create Animated Cartoon Videos in Canva (Tutorial for Beginners)

How to Create 0:09:01

How to Create Animated Videos In Canva For FREE (2024) Step By Step Tutorial

I animated this 0:32:46

I animated this in 18 days... in Blender

How to Make 0:07:19

How to Make an Animated Cartoon Video With AI || AI Animation Tools

Create Any Animated 0:00:43

Create Any Animated Stroke Icon in After Effects

How to Make 0:16:57

How to Make Animated Youtube Videos

How To Create 0:07:41

How To Create Animated Cartoon Video Using AI & ChatGPT | AI Video Generator Tools

How to Design 0:01:23

How to Design an Animated Line - Figma Tutorial

Create Stunning Content 0:00:16

Create Stunning Content with Animated Illustrations

How to Make 0:08:24

How to Make an Animated Cartoon Video of Yourself in Under 5 mins? [Easiest Tutorial]

How to Make 0:08:01

How to Make Animated Cartoon of Yourself in PowerPoint

How I Create 0:16:03

How I Create 3D Animated Characters with Blender in 15 Minutes

Animated PowerPoint Slide 0:06:17

Animated PowerPoint Slide Design Tutorial

How to Make 0:05:15

How to Make Animated Videos Easily Using Canva in Mins

Create Studio - 1:45:09

Create Studio - Make Animated Explainer Videos, Fast & Easy!

Animated Loops with 0:00:30

Animated Loops with James Curran Online Course

Canva Video Animation 0:08:01

Canva Video Animation Tutorial 2024 | Create Animated Videos In Canva For FREE

Design an Animated 0:06:05

Design an Animated Sidebar Menu | Figma Tutorial

Комментарии
Автор

Straight to the the point tutorial without useless intros?...sign me up!!

sallygosbert
Автор

For those who have said, 'That doesn't work, ' please be cautious when CHOOSING VARIANT 2 IN THE DESIGN. This part was missed in the video. When you drag the component into the design, select Variant 2. After that, the animation will work.

MoteroAntioquia
Автор

it's not working...How can I do this?

sksfdrb
Автор

Hey Luca, love the quick style of the video, without pointless intros or talking. Very Helpful! Keep up the great work 🔥

iwo_sawicki
Автор

Amazing Figma tutorials I really love how easy you break down the steps in the animation 👍

johnhoang
Автор

Thanks Luca. Though, it worked only when i placed "variant 2" in the frame instead of the default one.

sunainarastogi
Автор

but how do you animate the ambient gradient color? like make it move

austinduran
Автор

Why it doesn't work when I try to do it verticaly ?

martinf
Автор

The day you will animate freely a line as a vector made from the Pentool like in After Effect will revolution the Motion design made in figma, i’m sure of it.

corvuscorax
Автор

how to create waves like this for the web page

sandyison
Автор

Hey luca, I want to animated the background animation that you are using in your first 5sec video intro.

rajprajapati
Автор

Hello man, love the tutorial. Can you show how to export this type of animation to use on a mobile app?

nilannguyen
Автор

Well, it doesn't work.. you should reduce the size of the rectangle on the default variant and set interaction from the default variant to the Variant2

bartlomiejzaras
Автор

wait it's not even the same line in the prototype

DeathGripper
Автор

stop making fake animations, where your intro and end product do not even match. This end animation is from after effects not figma. !!!!

shraddhakalita
Автор

Trying to think how I would move this to html css and JavaScript 😂

kimbapslayer