Circular Progress Bar Animation | Figma Interactive Components

Описание: In this tutorial, I will show you how to make an Animated Circular Progress Bar in Figma with Figma Interactive Components. Also, you will learn how to use Figma Arc Tool, Arc Sweep, Arc Ratio, Frames, Groups, Components, Figma Variants, Prototype and Smart Animate.

In this video I show you:

00:00 Intro
00:23 Create Ellipse
01:35 Duplicate
02:00 Create Progress Ring 01
02:45 Create Progress Ring 02
02:56 Create Progress Ring 03
03:05 Create Progress Ring 04
03:30 Create Frame
04:05 Create Rectangle
04:35 Create Group
05:00 Create Component
05:15 Propertie Variant
05:30 Create Variants
07:55 Prototype Circle Progress Bar
09:33 Prototype Loading Animation

======

Watch my others Figma Interactive Components tutorials:

Sound Wave Animation:    • Figma Sound Wave Animation | Interactive C...  

Dynamic Island Animation:    • Dynamic Island Animation in Figma | Protot...  

Dropdown Menu List:    • Dropdown Menu with Scroll Animation | Figm...  

Animated Modal Overlay:    • Animated Modal Pop Up | Figma Overlay Tuto...  

Time Picker Animation:    • Time Picker Animation | Figma Interactive ...  

Animated Heart Icon:    • Figma Animated Heart Icon | Interactive Co...  

Animated Swipe to Delete:    • Figma Swipe to Delete | Interactive Compon...  

Floating Action Button (FAB):    • Floating Action Button Animation in Figma ...  

Pulse Loading Animation:    • Figma Pulse Animation | Loading Screen Pro...  

Animated Like Button:    • Animated Like (Heart) Button | Figma Inter...  

Search Bar (Keyboard Input Animation):    • Search Bar (Keyboard Input Animation) | Fi...  

Loading Animation:    • Loading Animation | Figma Interactive Comp...  

Animated Countdown:    • Animated Countdown Timer | Figma Interacti...  

Interactive Star Rating:    • Figma Star Rating Animation | Interactive ...  

Interactive Slider:    • Figma Slider Animation Tutorial | Interact...  

Interactive Button:    • Figma Interactive Button Tutorial | Prototype  

Radio Buttons:    • Figma Interactive Components | Radio Button  

Checkbox:    • Checkbox | Figma Interactive Components wi...  

Dropdown Menu:    • Figma Dropdown Menu Tutorial | Prototype  

Input Fields:    • Figma Interactive Components | Input Field  

Progress Bar:    • Figma Progress Bar Tutorial | Prototype  

Toggle Switch Button:    • Figma Toggle Switch Button | Interactive C...  

======

Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials.