Animated donut chart with odometer counter in Figma

  Рет қаралды 783

The Figma Fan

The Figma Fan

Күн бұрын

Join me for animating circles and scrolling numbers in Figma to create something beyond a static chart on the page.
Message to my viewers: Mistakes happen. I realized at 15:47, I advised you to detach the components so they remain static on Frame 1. This is bad advice because detaching the component is not necessary at all.
You can simply select the component and remove the interaction in the right side prototype panel by clicking the minus sign. This achieves the same thing but keeps the component intact if you need to make changes to the components later. Then any changes will occur globally across all of the instances of that component. Detaching will separate it from this relationship.
7:42 - Animating the numbers
10:45 - Putting the pieces together
11:43 - Animating the other direction
14:24 - Renaming multiple layers at once
15:33 - Bringing it all together for the finale

Пікірлер: 1
Icon Tooltip Hover - Fig in Five - Advanced prototyping
4:14
The Figma Fan
Рет қаралды 256
Figma Design 🔥 - Donut Charts
13:27
thejunboy
Рет қаралды 7 М.
ДЕНЬ УЧИТЕЛЯ В ШКОЛЕ
01:00
SIDELNIKOVVV
Рет қаралды 4 МЛН
Good teacher wows kids with practical examples #shorts
00:32
I migliori trucchetti di Fabiosa
Рет қаралды 12 МЛН
龟兔赛跑:好可爱的小乌龟#short #angel #clown
01:00
Super Beauty team
Рет қаралды 14 МЛН
Advanced prototyping, auto layout, animation, using variables
17:13
Interactive Chart Design in Figma (Design & Prototype)
1:24:36
Emisho Victor
Рет қаралды 961
Figma interactive components - Animating a Pie Chart
16:54
Rishi Kumar
Рет қаралды 18 М.
Easily Improve Your Web Design (With Example)
17:59
Flux Academy
Рет қаралды 113 М.
STOP doing DROPDOWNS like this - Figma variables 2023
15:35
Ricardo Costa
Рет қаралды 188 М.
ДЕНЬ УЧИТЕЛЯ В ШКОЛЕ
01:00
SIDELNIKOVVV
Рет қаралды 4 МЛН