Nike Spinning Animation in Figma

[@odiakaoseaugustine1616]

The explanation is so simple and detailed. I was searching if you have a paid course. I want to learn UI/UX from simple to advance stage

[@anjali11a31]

Thankyou:)

[@apoorvamhalsekar409]

Hey, this is wonderful. Really appreciate the voiceover and the slow pace. Great design✨ Keep em coming❤

[@shmeltstudios]

Thanks so much!

[@ysislm]

developers will cry after seeing this animation

[@NGOGA_Ad]

How da hell can you create this in codes 😂

[@sherwinmontanez5481]

Will you hire me if i did this animation?

[@SaharKhan-yd2oi]

loved the tutorial. I made my first animation, Thanks to you and it's flawless! Stay Blessed :)

[@kashyap263]

Bro is the real pro

[@shmeltstudios]

I appreciate it! But I’m still learning like everyone ❤️

[@inzizhftw]

Just finished this and it's super cool!

[@luisPerez-xg2hg]

damn,,, Finally I make good animation step by step! thank you so much for this video! ☺

[@mileslegend]

OOps i cant imagine i pulled this out ..its so amazing flawless and high class thanks man for thia

[@Anonymous_1424]

16:00

[@olababs2048]

I will love more animating tutorials if u can. Thank you so much for this

[@shubhambhosale353]

Stunning design and tutorial🔥🔥

[@shmeltstudios]

Thank you!

[@mimobenslimen7035]

YES ! new video 😃 i've been waiting for one thank you

[@shmeltstudios]

Hope you enjoyed it!

[@tayloraldridge6272]

This is beautiful. How do you add it to the hero of your layout frame? When I place mine the interaction stops working.

[@ephratnegussie2983]

I had lots of fun with it!!!

[@beaconbin465]

Thank you so much! I have learned shortcuts and technics here

[@shmeltstudios]

Happy to help!

[@junkie5658]

Thank you so muchhh. Had so much fun working on this. Took me few hours but i did it. Feels so good after doing this. Thank you so much for teaching me new stufff. Loads of love.

[@AbdulrasheedSofiullah]

i love u and your design

[@researchkro]

Bro....I love the way you explained everything in this amazing animated tutorial. Keep up good work.

[@shmeltstudios]

Thank you I really appreciate it!

[@researchkro]

@@shmeltstudios I will be waiting for more amazing animated video's..

[@funkeomoogun]

You are so cool. Pls do more animations. Thank you.

[@ahsanzhabib7207]

Its really really too much awsome. Super 👌😇

[@shmeltstudios]

Thank you 🤟🏼

[@erictheeclepton]

Meraviglia PURA!!!

[@asdqwe5459]

This is great. Love your works keep going

[@7starsound]

please give us tutorial about figma for biginner please please

[@_oliviaraven]

THANK YOU SO MUCH!!! This is so helpful! Please do more tutorials!

[@khadijaalchaikhali8765]

Thank you for the tutorial really helpful for a first-time Figma user. After finishing I realized the shadow doesn't move with every image like in the tutorial, is there any way to fix this?

[@hollywoodexplaininhindi6518]

Your are awesome

[@shmeltstudios]

Thank you 😊

[@Petiit_demon]

Thank you so much for the tuto' and the time. I just wanted to point out something, while the shoes are rotating can't the shadow be taken off ?

[@shmeltstudios]

When animating the shadows become a little shaky so you can add a blurred circle underneath the shoe, just make sure they are grouped together 👍🏼 hope this helps!

[@16hs092]

Great tutorial. It'd be perfect If You didn't attach the shadows with the shoes. Scaling up&down animation for the shadow would be Perfect!

[@olababs2048]

This is cool! I love ur animating tutorial. Which is what im currently working on to bring to perfectionist. A subscriber already.

[@KennethFromSkarpt]

Ah very well paced video! I might take some inspiration from you.

[@sammramasood9435]

love it

[@Testingthewaters-bt1tx]

NICE ONE MAN

[@shmeltstudios]

Thank you 🙏🏼

[@muhammadvirgi870]

THANKYOU

[@KhaledMoAdel]

great video

[@priyanshpatel1293]

Love it

[@hmmasud171]

Really good👌👌

[@rafaeloliveira-ou5ws]

Very good. What would this wordpress creation process be like, do you do this type of work?

[@AdebayoHaliah]

omo i got it. thanks for this. ❣💯

[@pankajbhati3011]

witch software are editing in ?

[@intelliwareStudio]

what kind of language should I use to program it and make it look like this on the web page?

[@sainayak8524]

uu are talented mann ❤‍🔥 sum steps are not understanding , pls look at that at 20:37 ..

[@SarahC-bd1cw]

How do I resize the frame without the content on windows?

[@SaharJaved-w1x]

Hey Hi... How did you remove background ? This option is not coming in my mac

[@melihekingolu9545]

I am a beginner and I asking myself how you can purchase a product how can you create a link? can a client purchase a product from my website by Figma? and how do you make a webshop on Figma?

[@anand543.]

How to you change pic to png Whats that window?

[@zeenattabarak5854]

Im at last i have done buttons arrow i cant find the shoes ones and no animation is coming help

[@kishorekumarseenivasan]

Great tutorial but it would be even more helpful and time saving if you had used components and variants :) 😃

[@TOONTREK_9999]

how we can save your work file.

[@oussamaworld2788]

How we can apload this to a website 🤔 ?

[@phantomgod722]

WHEN I PRESS CTRL AND DRAG IMAGE STRETCH HOW TO SOLVE

[@mileslegend]

i would have gave you 1oooo likes unfortunately i can only give one thanks man

[@mrmalik1085]

Im at last i have done buttons arrow i cant find the shoes ones and no animation is coming help PLZ TELL ME

[@mrmalik1085]

PLZ

[@jobtrixznr8780]

I'm a beginner trouble to understand circle part can you please share this tutorial .fig file 🥺

[@juliadelicato]

I also didn't know why so I asked chat gpt and now I know :) "Adding hidden circles or other shapes in Figma, or any other design or prototyping tool, is a technique often used to create seamless animations or transitions between different frames or screens. This approach is commonly referred to as "masking" or "clipping" and can serve several purposes: Seamless Transitions: By overlaying shapes like circles, squares, or other masks on your frames or components, you can create smooth transitions between different states. These shapes can act as a visual bridge, ensuring that elements move or transform in a visually pleasing way, making the animation appear seamless and natural. Guides for Animation: These hidden shapes can act as guides or boundaries for animating objects. For example, if you want an object to slide or scale within a specific area, you can use a hidden shape as a guide for the start and end positions. This ensures that your animation stays within the desired bounds. Complex Masking: If you have elements with irregular shapes or complex animations, you might use hidden shapes as masks to control what's visible and what's not. This can be particularly useful when you want to reveal or hide parts of an object or image during an animation. Layering and Stacking: Hidden shapes can help you control the layering and stacking order of elements. For instance, you might want an element to appear as if it's coming from behind another object. By using a hidden shape to define the boundary, you can ensure that the illusion works smoothly. Easing and Timing: You can also use these hidden shapes to help define the easing and timing of animations. By specifying the path or boundaries that an object should follow, you can fine-tune the easing curves to achieve the desired visual effect. In summary, adding hidden shapes like circles in Figma (or similar design tools) is a strategy to enhance the quality and precision of animations, transitions, and interactions in your designs. They serve as visual aids and control elements, making it easier to create fluid and polished user experiences."

[@jobtrixznr8780]

@@juliadelicato thank you so much madam for your immense support and idk why I forget chat gpt thank you so much madam god bless you 💗 now I clearly understand about this method 🙏🏽

[@fazalbasha910]

Hi dear, I have doubt , how we export this animation from Figma to React Can anyone explain me plz

[@raphaeleskandar1715]

same, or export it anywhere

[@vasuparmar2990]

whats the hex code for all the purples you used?

[@obscure045]

you can use instant eye dropper.

[@Rahim-p4h]

could you please me , spinning isn’t working

[@nicolasbrun9795]

does not work, it does not let me move to the right. Can someone help me?

[@hassanaligull3911]

HEY THE FIRST SHOE IS NOT WORKING ????

[@Flawlessdabarber]

Hey can you do my site for me

[@maxwell-mk]

At 4:50 I did not understand how you did it

[@shmeltstudios]

Grab your shoe and the shadow layers and press Option Cmd G and that will put them into a frame

[@maxwell-mk]

@@shmeltstudios what is the keyboard shortcut on windows 10?🥲

[@shmeltstudios]

@@maxwell-mk Ctrl + Alt + G

[@varshinishankar2792]

what is that command drag? if I drag, the shoe size is also compressing@@shmeltstudios

[@matioz9125]

Oook

[@marieltorres2873]

Tu explicación me ayudo muchisimo, gracias por dar cada detalle!

[@frenchzer4787]

FIRST !!! did I win something? :'D

[@shmeltstudios]

Oooh maybe if Figma starts paying me lol I’ll starting giving away stuff 😂

[@victormawanda6322]

yoo mate, you borrowed Bob Ross's technique for a calm voice and siphonic music to keep audiences watching for ages

[@OMGaneshOmanoor]

Easy to do in Figma, not in coding 👎

[@TheWiseOwl-fp8ez]

Hahaha just say you're a grouchy developer 😂