Nike Spinning Animation in Figma
ฝัง
- เผยแพร่เมื่อ 4 เม.ย. 2023
- For those who are starting to learn about animation in Figma, we are designing a seamless spinning Nike animation. This is an excellent project to get started with, as it will enable you to learn more about how to create animations in Figma. 2023
BEBAS FONT: fonts.google.com/specimen/Beb...
👇Get the Studio Pass
bit.ly/49COJNQ
👇 Try Figma for FREE
bit.ly/figfree
👇Download Figma For Pros
bit.ly/fig-pro
🚀 Subscribe for more Tutorials
bit.ly/3T22qMZ
📥 Buy Design Files & Merch
bit.ly/3WuUl6D
🌎 Find Me on Social Media
Tiktok: bit.ly/3U7TdnQ
Instagam: bit.ly/3fF9hyf
Facebook: bit.ly/3ML5axg - แนวปฏิบัติและการใช้ชีวิต
![[#SHORTS CLIP] ครูอึ้ง กรรมการอึ้ง ฮ่าๆ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/qeBTuMJs4t0/mqdefault.jpg)
Hey, this is wonderful. Really appreciate the voiceover and the slow pace. Great design✨
Keep em coming❤
Thanks so much!
You are so cool. Pls do more animations. Thank you.
I will love more animating tutorials if u can. Thank you so much for this
This is great. Love your works keep going
THANK YOU SO MUCH!!! This is so helpful! Please do more tutorials!
YES ! new video 😃 i've been waiting for one thank you
Hope you enjoyed it!
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.
Ah very well paced video! I might take some inspiration from you.
damn,,, Finally I make good animation step by step! thank you so much for this video! ☺
I had lots of fun with it!!!
This is cool! I love ur animating tutorial. Which is what im currently working on to bring to perfectionist. A subscriber already.
Love it
developers will cry after seeing this animation
How da hell can you create this in codes 😂
Will you hire me if i did this animation?
omo i got it. thanks for this. ❣💯
OOps i cant imagine i pulled this out ..its so amazing flawless and high class thanks man for thia
Really good👌👌
great video
Bro is the real pro
I appreciate it! But I’m still learning like everyone ❤️
love it
THANKYOU
Its really really too much awsome. Super 👌😇
Thank you 🤟🏼
Very good.
What would this wordpress creation process be like, do you do this type of work?
NICE ONE MAN
Thank you 🙏🏼
Your are awesome
Thank you 😊
Meraviglia PURA!!!
Thank you so much! I have learned shortcuts and technics here
Happy to help!
Stunning design and tutorial🔥🔥
Thank you!
This is beautiful.
How do you add it to the hero of your layout frame?
When I place mine the interaction stops working.
Tu explicación me ayudo muchisimo, gracias por dar cada detalle!
Bro....I love the way you explained everything in this amazing animated tutorial. Keep up good work.
Thank you I really appreciate it!
@@shmeltstudios I will be waiting for more amazing animated video's..
what kind of language should I use to program it and make it look like this on the web page?
16:00
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
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!
witch software are editing in ?
please give us tutorial about figma for biginner please please
Im at last i have done buttons arrow i cant find the shoes ones and no animation is coming help
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?
Hey Hi... How did you remove background ? This option is not coming in my mac
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?
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 ?
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!
How to you change pic to png
Whats that window?
How do I resize the frame without the content on windows?
Great tutorial but it would be even more helpful and time saving if you had used components and variants :) 😃
whats the hex code for all the purples you used?
you can use instant eye dropper.
How we can apload this to a website 🤔 ?
how we can save your work file.
Hi dear,
I have doubt , how we export this animation from Figma to React
Can anyone explain me plz
same, or export it anywhere
Im at last i have done buttons arrow i cant find the shoes ones and no animation is coming help PLZ TELL ME
PLZ
uu are talented mann ❤🔥 sum steps are not understanding , pls look at that at 20:37 ..
I'm a beginner trouble to understand circle part can you please share this tutorial .fig file 🥺
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."
@@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 🙏🏽
WHEN I PRESS CTRL AND DRAG IMAGE STRETCH HOW TO SOLVE
i would have gave you 1oooo likes unfortunately i can only give one thanks man
Hey can you do my site for me
does not work, it does not let me move to the right. Can someone help me?
Oook
FIRST !!! did I win something? :'D
Oooh maybe if Figma starts paying me lol I’ll starting giving away stuff 😂
HEY THE FIRST SHOE IS NOT WORKING ????
At 4:50 I did not understand how you did it
Grab your shoe and the shadow layers and press Option Cmd G and that will put them into a frame
@@shmeltstudios what is the keyboard shortcut on windows 10?🥲
@@maxwell-mk Ctrl + Alt + G
what is that command drag? if I drag, the shoe size is also compressing@@shmeltstudios
yoo mate, you borrowed Bob Ross's technique for a calm voice and siphonic music to keep audiences watching for ages
Easy to do in Figma, not in coding 👎
Hahaha just say you're a grouchy developer 😂