I Animated a 3D Render in Figma in 10 Minutes (Step-by-Step Tutorial)
HTML-код
- Опубликовано: 2 июн 2024
- Try Walling now to organize and share your work: walling.app/?source=arash
In this video, I'm going to show you how to animate the AirPods Pro 3D render in Figma.
Try Figma for free:
bit.ly/3LiRVEF
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/4aVc7pR
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
Arash you are doing an amazing job! Thank you for all the videos on RUclips!
Thank you so much.
Arash, I don't know if I will ever be able to thank you enough for all the cool things I have learned thanks to your videos and Udemy course.
No problem. Glad to help.
Hello Arash, this very clear step by step made it possible create. It was something I had been wanting to do for awhile, and its super easy. The only time consuming part was, the copy paste didn't work with the instance at the beginning, so I had to it manually (I did it with a test render of something using 120 png frames). Why I can't figure out for the life of me why didn't work, but anyways still super great.
Thanks dude....your course in udemy taught me alot....best tutor ever👏☺️
No problem. Glad you found it helpful.
thank you for the vid boss
No problem.
Thanks bro you are best ❤
No problem. Thanks.
@@DesignWithArash 😭😭bro ples give me food delivery app ui
Hi Arash, thanks so much for this! At the end you say it's not possible to create the scroll animation. Is there a workaround for this? I'd appreciate it. Thanks!!
No problem. Unfortunately, not in Figma but you can create it in no-code tools like Webflow.
@@DesignWithArash Are tools like Principle or Protopie a good alternative for the scroll animation ?
I am unable to copy past the whole set of varients togther. Any suggestion pls
Can you post the resources for this video,the link to download the images
Where i can get thia images
yes now its nice
Thanks.
Is it possible to then use this as a website? Ideally so it could be hosted on wordpress with the animation and any prototype transitions kept
Unfortunately, not. You can replicate it using no-code tools like Webflow.
@@DesignWithArash thank you so much for getting back to me. Within the last hour that's the exact same conclusion I came to so to have it confirmed by someone much more knowledgeable is brilliant 👍
Please can you share figma file to can take the images
hello thankyou for this amazing tutorial but i am not able to copy prototype and paste it onto all other images plz can you help me out with this
Hi. No problem. What's the issue? You should be able to select the interaction in the Interactions section and copy it.
can you make a video where i can add the text by using frames on each image for high quality because i tried the second method but unable to add text in it can you help me or else make a tutorial in it please
I'll keep that in mind.
Hello !
Does somebody know what I did wrong,when I press Present it doesn't do the animation it staying still?!
What should I change ?
Please check your connections and make sure to follow all the steps one by one.
how i can get Airpods all photos to create animation
Model it yourself and render the animated model in image sequence. No other option 😢
Is there any way to make it in scroll effect?
Not with Figma. It doesn't have the Scroll trigger.
Hi bro thanks a lot but i have a question
Question plz....
Hi. Sure. What's your question?
hi i want how to make food delivery app ui
Hi. I'm not planing to design a food delivery app at the moment but maybe one day I'll do a video on that.
Hey Arash I want to become a UX/UI designer and better my life right now I’m working 2 jobs just to pay bills could u help me
Hi. I hope my content can help you become a UI/UX designer very soon.
Thank you so much for this tutorial, but please can you share the file for the airpods image, The extension is no longer working. @DesignWithArash I would really appreciate if anyone knows any other extension that would work.
No problem. Unfortunately, for copyright issues I cannot provide you with the image but you can download them one by one as well without the extension. I know it's time-consuming but it works.
Here is the link.
www.apple.com/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/large/0000.png
You can increase the last digit of the link to get the next frame.
SIR DESIGNER KESY BTAIN K JISY PETA HO K BANANA KIA H. TOOLS TO SAB HI SEEKH LETY HN LEKIN IMPORTANT Y H K DESIGNER KO PETA HO K BANNAANA KIA H
And plz sir agr ap urdu ya phir hindi m video sekty hn sir plz bna dain is topic py
#requestvideo
This is nice, I guess, as a little party trick, but it's not actually useful because you can't actually use it to specify a scroll effect for a website that your engineering team could take away and build. Seems like a really big thing Figma just can't do. It's incredible they're sleeping on being able to handle complex animation like this ... for all the woo-woo everyone has about Figma it's still limited to building pretty basic interactions. I guess that's why so much of the internet looks exactly the same these days. Everyone's just building whatever is inside Figma's capabilities.
Yeah. I hope they add the trigger very soon.
plz can u give this to us'\
can you share the source file to practice it ? @designwitharash