Nike Spinning Animation in Figma
HTML-код
- Опубликовано: 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 
Хобби
![BETA SQUAD vs AMP FOOTBALL MATCH [OFFICIAL STREAM]](http://i.ytimg.com/vi/ChEmvP52p0U/mqdefault.jpg)
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.
THANK YOU SO MUCH!!! This is so helpful! Please do more tutorials!
I had lots of fun with it!!!
I will love more animating tutorials if u can. Thank you so much for this
This is great. Love your works keep going
damn,,, Finally I make good animation step by step! thank you so much for this video! ☺
You are so cool. Pls do more animations. Thank you.
This is cool! I love ur animating tutorial. Which is what im currently working on to bring to perfectionist. A subscriber already.
Love it
Hey, this is wonderful. Really appreciate the voiceover and the slow pace. Great design✨
Keep em coming❤
Thanks so much!
YES ! new video 😃 i've been waiting for one thank you
Hope you enjoyed it!
Ah very well paced video! I might take some inspiration from you.
omo i got it. thanks for this. ❣💯
love it
OOps i cant imagine i pulled this out ..its so amazing flawless and high class thanks man for thia
great video
THANKYOU
Really good👌👌
Tu explicación me ayudo muchisimo, gracias por dar cada detalle!
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?
Very good.
What would this wordpress creation process be like, do you do this type of work?
Meraviglia PURA!!!
This is beautiful.
How do you add it to the hero of your layout frame?
When I place mine the interaction stops working.
Thank you so much! I have learned shortcuts and technics here
Happy to 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?
Bro is the real pro
I appreciate it! But I’m still learning like everyone ❤️
Its really really too much awsome. Super 👌😇
Thank you 🤟🏼
Stunning design and tutorial🔥🔥
Thank you!
Your are awesome
Thank you 😊
NICE ONE MAN
Thank you 🙏🏼
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!
please give us tutorial about figma for biginner please please
what kind of language should I use to program it and make it look like this on the web page?
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..
witch software are editing in ?
Im at last i have done buttons arrow i cant find the shoes ones and no animation is coming help
Hey Hi... How did you remove background ? This option is not coming in my mac
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 :) 😃
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?
How to you change pic to png
Whats that window?
16:00
uu are talented mann ❤🔥 sum steps are not understanding , pls look at that at 20:37 ..
How we can apload this to a website 🤔 ?
whats the hex code for all the purples you used?
you can use instant eye dropper.
how we can save your work file.
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
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 🙏🏽
Im at last i have done buttons arrow i cant find the shoes ones and no animation is coming help PLZ TELL ME
PLZ
Hi dear,
I have doubt , how we export this animation from Figma to React
Can anyone explain me plz
same, or export it anywhere
does not work, it does not let me move to the right. Can someone help me?
Oook
Hey can you do my site for me
HEY THE FIRST SHOE IS NOT WORKING ????
FIRST !!! did I win something? :'D
Oooh maybe if Figma starts paying me lol I’ll starting giving away stuff 😂
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 😂