Add 3D Animations in Your UI Projects! | Adobe Xd, Figma & Sketch | Design Weekly
HTML-код
- Опубликовано: 7 авг 2024
- Today we will add some real 3D animations to your UI designs with any tool (Adobe Xd, Figma or Sketch). There are some plugins and cool resources which allow you to add 3D objects and animations inside any UI screens.
Tools used in this video:
1. Figma: www.figma.com/
2. Framer(web): www.framer.com/
3. Sketch Fab: sketchfab.com/
Other 3D resources I ❤️:
1. UI8: ui8.net/category/3d-assets
2. LS Graphics - www.ls.graphics/
3. Shapefest: www.shapefest.com/
Timestamps:
0:00 Introduction
0:40 Method 1
03:50 Method 2
07:45 Method 3
For Sponsorship: punitwebdeveloper@gmail.com
Join Facebook Design Group -- / punit. .
Channel Sponsors:
1. LS Graphics - www.ls.graphics/
2. Blush: blush.design/
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.net/punitweb
#uidesign #3danimations #designtools 
Хобби
Sorry guys, forgot to put the results in the first method. But rest should work just fine as displayed. Thanks for understanding!
Hi punit, please can you kindly respond to my mail, LinkedIn messages and twitter too
Thanks
No problem sir🔥
Please punit sir...
Can you make a video of how to download figma file into PSD format??
@@motivationaldude9083 It is impossible
Yes, you didn't show the output of the first method, and also, it's not working (talking about the first method).
The fact I can watch all of your videos for free is beyond me !
Thanks a million man !
THANK youuuu so much Punit..... You are the best and helping me for becoming Best UI Designer
Amazing, thanks for sharing!
thankssssss!! Please do more on animation, really helped :)
I have so many to learn from u!! 👍👍👍
Wow, good job 👍
great punit sir
appreciate your work very help ful
it really helpful, thank you!
Thank you and i am new in this design and i found your chanel.Amazing👏🙏
i cant find the "public packages" in method 3, when i click on insert
Loved the tutorial ❤
This is awesome... Thank you for sharing this...
Glad you liked it!
Big fan Sirji ...Keeeeep doing and posting new things...will keep supporting you.❤️
Thank you so much Yash!
@@PunitChawla welcome sir💕
Huge thumbs up!
This is dope
Your tutorial always so informative,thanks!
Lucky to find this channel
Supperb ❤
the third method of animation didn't work for me. The girl didn't appear
Thank you!
Thank you so much for the video! Do you know why I can't see the the animation when I do it in framer? I do everything like in your video step by step but for some reason it never show the animation in the end. Just usual rectangle which I had as a bg. Thank you!
This is diamond!
Hey man this is great
😄
This is Good
Damn you are too good
Make unbelievable designs
And make developers lives hard af
(Jk)
😂
git gud
Frontend guys hates these joke 😂😂😂😂
What if i hover over the area, can the 3D model do a small transition then ?
Or what if I scroll down, can I make the 3D rotate ?
hey Punit I'm always watching your video so helpful your tutorials but I can't export from framer file , hopefully, you help me how can get export from framer file...thank you
Thank you for such videos
Glad you liked it!
@@PunitChawla keep posting more 🔥🔥
Hello Sir, when I'm importing files from figma it's showing me, first authenticate with figma. After authentication, as soon as I paste URL it shows "Authentication Expired, Re-authenticate with Figma" in Framer. Help please!
Realy helps
sir.... can you pls make a video on how to make a 3d animated mockup using figma by making the use of the ANIMA plugin... 🙏 🙏
Please add link for plugins in the description, its bit hard to find it for beginners in figma. I am not getting packages to install in framer, I downloaded desktop version of framer.
Amazing video. I have to ask, what's the name of the intro song? It sounds awesome
Ab great hoo yarr...mera ek sawal haa kia app designer app mein functionality add kr skhtaa haa ya ye kam sirf developer hi krta haaa...?????
In the new version of framer, there is no option of public packages :(
I am curious to know how it works on figma. In my attempt nothing happened .
Hello great video
But is there a way to transfer your framer changes back to figma
Hello! Where did you get the brain 3d model from?
sir import option in not shown in framer only insert option is there.
Hi, I think is a great way to solve the prototype. But the real app you do it like this?
Bro the first method of 3d animation cannot be seen :/ need some help!
How to add SVG animations in Xd or figma..?
how could i export the final resours in the figma app????
I didn´t undertand the first part. I did everything but where the animation?
Is it the second part the complement of video or anoher way the make the animation?
The first option doesn't work.
Yes, it doesn't work for me either
sir i didnt see the result from first planet animation remaining else is stunning video
mantapp
Org india penyelamat para mahasiswa Indonesia wkwk
How to implement this animation in flutter app ??
QUICK QOESTION !!
which method is easy nd likes the most !!
Hi Punit, I am big fan of yours and thanks for sharing the information with us. I please do some more videos about anima embed code with three.js. There always an error I get..... I hope you will consider my request.
is this can use to xd ?
Can these animations be used in websites as it is , especially in WordPress websites ?
Admin answer for this question
Quick question: How do we export these for developers to implement?
Yeah kinda nightmare
Exactly my question too. If these cant be exported for Devs, its pointless.
Codepen method doesn't work :(
framer dont show option to import 3d
:(
I am planning to buy a gaming pc today and i have noo idea what gpu i need to create cool stuff like this. My options are gtx 1650 4gb, gtx 1650 ti 4gb, gtx 1660 ti 6gb
PLEASE if anybody knows tell me asap
Hmm.. why not just save time and use a 3d Gif version if you don't use the controls?
How can i link xd with framer?
You will have to export as png or pdf
dude i cant rlly see the 3d animation in the first method
Can u suggest me how to learn or where to learn all the things in UI/UX
Any tutorial ? Please suggest me🤗
Hey,
Did you start learning?
As I'm also looking for someone to guide me but still I'm searching but also I'm learning from RUclips videos.
If you found anyone who guides you please let me know.
Thank you!
@@kananpatel4486 Abhinav Chikara his community 10k designers hope you have found it till now.
Mine anine is not working
Dude in the first method where did the amazing animation get incorporated ..it's invisible
Nevermind the video was amazing
man you didn't show us how things work at first time please do another video to complet that first one
Could you please write the actions 7:13 I couldn't get all of them. Thanks
"quickly click here"...why quickly?
How to add 3D to Figma, XD or Sketch? Use Framer instead.
Ничего не понял, но очень интересно
I didn see the first animation at all in the video...
No longer it is working in Framer
Provide Adobe XD tutorial. I use XD only.
these methods are not working as on date, look it
we DID NOT learn those at school
any of the method doesn't work now they are older !!! Disappointed!!
Hi Puneet
I have subscribed ur channel by seeing some of your works.
but comes to the practical nothing is working out.
Straight to the point method 1 is not executing that's the reason why u haven't shown the result.
Just am unsubscribing ur channel
2023 Framer has a totally different interface :'(
I cant agree with the 2nd method. You are stealing the 3D artists works. Please have some respect for the 3d artists' hard work.
As a 3D animator I totally agree this triggers me
@@animallewis1 As a counterview, I think this is great promotion of 3d content to non-3d professionals. 3D model stores are a marketplace mainly for 3d developers, but this expands it to designers as well. There's no resale here - it's a tutorial. No different from using comping stock photos in a tutorial. As a general point, I think 3d developers and all creative artists need to focus more on expanding their reach rather than protecting and hiding their work. If a million people see your work instead of just a few thousand, the likelihood of more sales is much higher.
@@alcinnovations yeah all valid points, the potential reach with marketing your 3D Models like stock photos sounds great but I feel like stock images/videos etc just get used and abused to the point where nobody really pays attention to the creator, because I myself rarely check which is equally bad.
@@alcinnovations if all anyone does is promote work, who will pay for it? This creates a culture of exploitation, leveraging unfocused marketing for free use of goods. If your goal is to share it, then share it. But it’s uncourageous to steal work to benefit yourself, and justify it by saying it’s marketing. You can still pay for it and it will have the same reach as if you didn’t pay for it, but it’s more ethical and creates a better environment for creative professionals.
Abe clickbait....i was herr for Adobe XD
FAKE!!!!!!!!