No video :(

Circular Progress Bar Animation | Figma Interactive Components

Подписаться 6 тыс.

Просмотров 42 тыс.

50% 1

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 Anima...
Dynamic Island Animation: • Dynamic Island Animati...
Dropdown Menu List: • Dropdown Menu with Scr...
Animated Modal Overlay: • Animated Modal Pop Up ...
Time Picker Animation: • Time Picker Animation ...
Animated Heart Icon: • Figma Animated Heart I...
Animated Swipe to Delete: • Figma Swipe to Delete ...
Floating Action Button (FAB): • Floating Action Button...
Pulse Loading Animation: • Figma Pulse Animation ...
Animated Like Button: • Animated Like (Heart) ...
Search Bar (Keyboard Input Animation): • Search Bar (Keyboard I...
Loading Animation: • Loading Animation | Fi...
Animated Countdown: • Animated Countdown Tim...
Interactive Star Rating: • Figma Star Rating Anim...
Interactive Slider: • Figma Slider Animation...
Interactive Button: • Figma Interactive Butt...
Radio Buttons: • Figma Interactive Comp...
Checkbox: • Checkbox | Figma Inter...
Dropdown Menu: • Figma Dropdown Menu Tu...
Input Fields: • Figma Interactive Comp...
Progress Bar: • Figma Progress Bar Tut...
Toggle Switch Button: • Figma Toggle Switch Bu...
======
Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials.

Опубликовано:

14 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@jaymcd8577 Год назад

The best tutorial of it's kind on YT bookmark this one folks!

@ChinskDesign 8 месяцев назад

Hi!😃 Thank you very much for the feedback! Comments like this motivate me to keep posting more tutorials! Share our channel with your friends🤩 Have a great weekend!

@emilyuxui Год назад

Thank you! I've been looking for this type of tutorial and this is the only one that was close to what I was trying to achieve :)

@ChinskDesign Год назад

Hi!😃 I’m glad to hear that, feedback like this makes me motivated to keep making more videos🤩 Thank you so much🙏 Which tutorial do you want to see here on the channel?😀 Have a great week!

@simonlarragy9376 Год назад

This worked out great. Thank you. I'm strating to get the hang of this

@ChinskDesign Год назад

Hi!😃 I’m glad to help!🤩 Thanks for watching! Which tutorial do you want to see here on the channel? Have a great weekend!

@georgescreates Год назад

Thank you for sharing this. I am using this type of animation for one of my videos. Thanks

@ChinskDesign 8 месяцев назад

Hi!😃 I’m glad to help! Have a great weekend!

@chiko14june 3 месяца назад

Using a mask for the first quarter ensures the component to be more flexible. The problem happens when you are asked to use a transparent or semi-transparent background

@tkinginyellow 9 месяцев назад

such a missed opportunity of using sweep animation, I mean this is the first thing I tried and was very surprised it didn't work

@ChinskDesign 8 месяцев назад

Hi!😃 Yes, so far this was the only way I tried and it worked. Have a great weekend!

@kabenla 8 месяцев назад

thank you so much!!!

@ChinskDesign 8 месяцев назад

Hi!😃 I’m glad to help!🤩 What do you want to learn next?

@kabenla 8 месяцев назад

@@ChinskDesign I don't really use swap overlay that much. Would be nice to see some cool prototypes with it :)

@ChinskDesign 8 месяцев назад

Nice!😃 I'll work on this! Have a great weekend!

@bimisha2040 2 месяца назад

hi, why is rectangle there?

@OniiHvH 2 месяца назад

4 seconds for a 1.48 Megabyte file would be horrifying

@ChinskDesign 2 месяца назад

😂😂😂 In the 2000s I already waited hours for a 5 Megabyte file 😅😅😅

@ErdemKirmitci Год назад

Thank you for sharing this tutorial but you're doing it so slow, and you don't need to shake your cursor on every single action or button you click.

@ChinskDesign Год назад

Hi!😃 Glad to help! Thank you for the feedback! Have a great week!

@akshatha.c.bharadwaj5390 Год назад

The video will be even great if u would choose to explain instead of pointing in cursor I've been following most of your contents in this platford which has good content but I'd firmly insist you to use explanation which shall be easy to grasp , Not everything would be clear just with video I'm sure U'll consider my suggestions.

@ChinskDesign Год назад

Hi!😃 I’m glad to hear that!🤩 Thank you so much for the feedback, I will work on it! Thanks for watching, share the channel with your friends! I'm working to make the channel better and share much more knowledge. Have a great week!

@AbhishekKumar-zf9bn Год назад

In your delete by swipe video tutorial I want to know that how can I delete all the messages one by one. Not in a single click. Please make a proper video on it. Please take it like a challenge.

@ChinskDesign Год назад

Hi!😃 Thank you for watching!🤩 About the other tutorial, in this case you can repeat the same step by step for each message making all possible animation combinations. But don't worry I'll do this video tutorial to help you. Have a great week!