Pulsing animation in Figma

Рет қаралды 81,786

Жыл бұрын

3 min tutorial on how to design pulsing animation in Figma.
Pulsing animation can be used as loading indicator. It will informs the user that the system is doing something. We will create pulsing animation using a simple oval element and learn how to animate it using Ease In and Out animation with a fixed delays.
----
Twitter: / 101babich
Instagram: / 101babich
#pulsinganimation #loadinganimation #loadingscreen #loading #uidesign #ui #userinterface #userexperience #ux #productdesign #uidesigntutorial #userinterfacedesign #designinfigma

Пікірлер: 25

@babichnick 3 ай бұрын

If you're looking for a source code for pulsing animation (ripple effect), check this github.com/babichplace/LoadingAnimations

@vandinh3360 Жыл бұрын

Great tutorial, thanks so much :)

@mrvfino Ай бұрын

Thanks very straightforward.

@nguyenthithuthuy6148 8 ай бұрын

Great! Thank you so much 😍

@thinhat7175 Жыл бұрын

Great tutorial, thankyou for your video

@slartibartfast7921 Жыл бұрын

Super useful. Thanks!

@caritosoleno 11 ай бұрын

Incredibly helpful! thank you so much :)

@gokuljagannath2481 Жыл бұрын

thanks a ton man🤟

@mukulthakre5966 6 ай бұрын

Great 👍

@kubankenebaev2921 Жыл бұрын

thank you

@eswag153 Жыл бұрын

seems easier in after effects, but AE software can be so damn laggy

@yeswanthraj2140 11 ай бұрын

sir i tried it but its not working sir can u help me ??

@ghorbanmahtabi2891 3 ай бұрын

Hi, thanks for your valuable training. In endless auto scrolling, I want to do this action: when take the mouse on the endless auto scrolling, it be stop? Can one help me to do it?

@evelynh1202 2 ай бұрын

Followed this step by step and was very clear thank you! However it hasn't worked for me. When I add the finished component from the assets tab to a frame, it doesn't animate when I preview it - in the drop-down list on the layers tab, it appears that only the layers from the first frame of the component show up, and not the other 3 frames/variants or their interactions. Any help would be greatly appreciated please!

@shreyagolatkar652 25 күн бұрын

Try giving the after delay value to 1000ms instead of 1ms

@MyaraChan 13 күн бұрын

@@shreyagolatkar652 I Tried it but it still doesn't work for me :( The Turorial was very clear so I don't understand why it doesn't animate when I preview it..

@WithUsersInMind 12 күн бұрын

This is why I need to find a source that can explain how transition metrics impact the final rendition. Currently I find myself maying tweaks on the fly to get the animation Im hoping for. Also, Im not sure if you guys have noticed too. When an animation has been done a certain way, after a while if I revisit the animation it some how glitches or breaks.

@WithUsersInMind 12 күн бұрын

@@MyaraChan try making copies of the component set and trying different transition settings. If your layers are not structured well or named correctly, auto animate can behave unexpectedly. Please make sure you fix everything from the atomic level.

@MyaraChan 12 күн бұрын

@@WithUsersInMind Thank you for your advice! I downloaded Figma for windows, in the app it's somehow working. But still doesn't work in the browser 🤔🤔

@omardanial7351 3 ай бұрын

very helpful video.. I used same animation.. But i have this problem that it works fine in figma prototype but how can we export it to lottiefiles ...and save json file for developers

@josejozyachidon6609 2 ай бұрын

Wait is the json file the developers will use?

@omardanial7351 2 ай бұрын

@@josejozyachidon6609 yes