Thank you for the excellent job! That was very helpful. I have a question about arranging and equalizing the elements - how do you make those purple lines with measurements appear anytime you want? Do you hold any key when moving the rectangles or what?
Thanks for your kind words, when you hold alt/option key, these smart guides are shown, but when moving object hold shift key to lock the direction and show the smart guides.
@@RiskyRantung Yes that's a part of my question as well. What tools does a developer use to convert this to full website? Custom coding from scratch or any industry standard tools? Apologize for my rant, Rant! 😋
Hello brother , how to make such website in wordpress using elementor is it even possible ? What theme and plugin to use for the transition of the plants with smooth scrolling animation .. Love your video tutorials bro.. Keep it up..👍
Hey Anonymous Dude, thanks for your kind words! I'm no expert in WordPress or Elementor, but I think it should be possible. Here are my favorite WordPress instructors: ua-cam.com/users/Darrelwilsonbug ua-cam.com/users/ferdykorpershoek Contact them, if it's possible then these guys will be able to do it!
great work thank you so much ! would you please tell me how to present my website like you with the animation , like what you did at the beginning , what did u use ?
I have provided the link to the starter file in the description which has all the images. I got these images from www.istockphoto.com. The link to the images: bit.ly/2HWKkxn bit.ly/36vaEZG bit.ly/3jtu6cC bit.ly/30rgxD1.
Exporting the document with animation is not possible at the moment, but there are a couple of plugins for Adobe Xd and other platform that will help you convert you design to HTML, CSS, and React component without writing a single line of code, but they have a basic level of animation. Plugins: www.animaapp.com/ www.quest.ai/
Hi, making the animation in WordPress should be possible but I'm no expert. These guys may help you if its possible: ua-cam.com/users/ferdykorpershoek ua-cam.com/users/CreateaProWebsite ua-cam.com/users/Darrelwilsonbug
Brain will be get burned.. Everything is good, but your Voice, I don't know why you are speaking like this ( a robotic and slow-mow sound with telling every digit of the parameters), you can speak naturally bro.
Hi Gaurav, Sorry for the inconvenience, if otherwise was possible I would do it from the beginning, I tell every digit of the parameter to be precise that's what most of the beginners like the videos.
![[ Adobe XD Tutorial ] - Create Stunning Website Design Animation in Adobe XD - UX FLAME](http://i.ytimg.com/vi/kemudxeBxFU/mqdefault.jpg)
Designed by: Laura González
Check out her other work:
dribbble.com/uxdesign_laugon
www.laugon.com/
instagram.com/ux.designing/
This is the best free software Ive seen. Respect.
Let me know what do think, your feedbacks are appreciated!
A great job i really like it , keep up
Thanks mate.
I think you saw my comment, so this is an awesome work. Thtz why i wanted to remake it.❤️❤️❤️
@@kavinda_dilshan_paramsoodi thanks a lot!
Absolutely amazing ! You completely narrated every single part of the work you made into this prototype !
Upload more ! You rock buddy ❤
Thank you very much for sharing, you added the necessary images for the design, it was very useful. you did a great job!
This is an awesome animation on XD! However, I would recommend you to speak naturally instead of a computer generated voice. Good luck.
thanks for your suggestion!
just awesome. you have indicated every single work on how to flow the task.it's easy and fun to learn from you.
Glad it was helpful!
Awesome, loved your approach, easy for beginners to understand how elements works in XD. Thank You!
Glad it was helpful!
Very awesome. Please make more content like this. More tricks that could help beginner learning easier 🙏
Thank you, sure more content is coming.
its beautiful jop thank you
Great video💪🏽 Learned a lot from it
Glad it was helpful!
The design is amazing! thanks for sharing your knowledge and also for practical implementation
Thank you for the nice words.
Thank you for the nice words.
Thanks works fine. Greetings from Italy
LOVE THIS SO MUCH
Excellent way of teaching..please keep it up.. I subscribed ur video.. plz upload a lot like this with new ideas..thanku..
love your videos - thanks man
Means a lot!
Thank you for this Tutorial! You Rocks!
Thanks, mate.
Bro, it's awesome, nice video ot is very helpful.
Glad you liked it
That's very useful 😍 thank you for your efforts ❤
Glad it was helpful!
Thank you, as a beginner this is very useful
Thanks, keep learning!
Thank you for the excellent job! That was very helpful. I have a question about arranging and equalizing the elements - how do you make those purple lines with measurements appear anytime you want? Do you hold any key when moving the rectangles or what?
Thanks for your kind words, when you hold alt/option key, these smart guides are shown, but when moving object hold shift key to lock the direction and show the smart guides.
@@WebDesignGeek Lovely! Thank you so much :)
@@mihailkulov3159 You're Welcome.
This was so easy to follow....thank you for this. Also had the incredible feeling when doing the first animation transition🤍
Glad it was helpful.
amazing as usualy just wana ask where can i find isolated assets for my design ? thanks
Great tutorial, but now the important question, how to convert these animations + interactions to HTML website?
this is just the UI design, this design would be given to web developer for coding
@@RiskyRantung Yes that's a part of my question as well. What tools does a developer use to convert this to full website? Custom coding from scratch or any industry standard tools? Apologize for my rant, Rant! 😋
This is really awesome!
Thank you very much!
It's awesome. Keep it up. 🖤
thanks, keep designing!
Thank you for sharing!
Thank you very much for the tutorial, I will try !!! 😁😁✨
You're welcome 😊
thnx you are a legend brothers
Is there a way I could have the artwork froths website so I could train? How does it work? Thank you. I am loving the classes !!!
In the description
Epic presentation
If so, can you tell me how those components were added?...... (plants, pot...... etc)
thanks, use command k shortcut to make elements component.
great job !!!
The feeling when it works with the first click...
Wonderful!
Do I have to create the plant BG individually all the time? Can't I use Alt key to short the time?
Yes, if you use the shortcut to duplicate the BG, the animation won't work.
can it be done at figma/ framer? thanks for sharing more ui video please.
Yes, this is possible in Figma/Framer.
@@WebDesignGeek thanks for quick reply, next is how to use this as a real homepage using elementor for example?
@@indioarmani8209 Well, that's a whole new subject I suggest do a search, there are a lot of courses.
Hello brother , how to make such website in wordpress using elementor is it even possible ?
What theme and plugin to use for the transition of the plants with smooth scrolling animation ..
Love your video tutorials bro..
Keep it up..👍
Hey Anonymous Dude, thanks for your kind words!
I'm no expert in WordPress or Elementor, but I think it should be possible.
Here are my favorite WordPress instructors:
ua-cam.com/users/Darrelwilsonbug
ua-cam.com/users/ferdykorpershoek
Contact them, if it's possible then these guys will be able to do it!
anyone knows if there is a template for Wordpress similar or the same as this please... its urgent..
great work thank you so much !
would you please tell me how to present my website like you with the animation , like what you did at the beginning , what did u use ?
Yes, sure! I record the animation with a screen recorder.
your way it's great ... thanks a lot
Thank you!
Where did you get those plant images from? ..it would be great if you share those img files..!
BTW Awesome Tutorial.!
I have provided the link to the starter file in the description which has all the images.
I got these images from www.istockphoto.com.
The link to the images:
bit.ly/2HWKkxn
bit.ly/36vaEZG
bit.ly/3jtu6cC
bit.ly/30rgxD1.
@@WebDesignGeek Thank You .!
@@mahantsripathy7985 Welcome!
@@WebDesignGeek Are there any free images?
@@mmeghr99 These images are paid images, but there are a lot of great free websites you can use.
Cool and easy 💥 . New subscriber here
Thanks and welcome
How would the user get back to any previous plants?
just connect the last artboard to the first one.
appreciate your work man! but why don't you put the file for begginers to download?!
From where did you have download the plant pic
From Stock website.
@@WebDesignGeek thankyou so much
Awesome Bro
Thanks, mate.
@@WebDesignGeek bro i want to learn from you how i contact you
I think UA-cam is the best place
not working, if the positions and dimensions are not exactly same, would the animation not work?
thank you very much dear bro
Glad it was helpful.
Thanks very much
You are welcome
Where do you download the pictures you use as components?
The link is in the description!
Excelente!! Obrigada.
muito obrigado
very nice thank u so much
Most welcome 😊
Good one
Thanks.
I have a question, how do u convert the prototype into real websites?
You need to have experience with javascript to be able to convert the prototype.
How to capture the animation in adobe xd?
Click on the desktop preview, then click on the top right corner to record.
thank you
if I wanted to export this document with the animation how would that work, if it did? great vid btw!
Exporting the document with animation is not possible at the moment, but there are a couple of plugins for Adobe Xd and other platform that will help you convert you design to HTML, CSS, and React component without writing a single line of code, but they have a basic level of animation.
Plugins:
www.animaapp.com/
www.quest.ai/
@@WebDesignGeek Thank you so much for the link refs
i dont have that preset can i get it sowhere
Hi design part is always good
But my question is how do I make this entire animation happen on wordpress website
Bro, wordpress sites run on Themes and plugins..
This tutorial is for the design which will lated turned into html css js and many more..
Hi, making the animation in WordPress should be possible but I'm no expert. These guys may help you if its possible:
ua-cam.com/users/ferdykorpershoek
ua-cam.com/users/CreateaProWebsite
ua-cam.com/users/Darrelwilsonbug
@@gauravsri8521 brother the thing is I am able to export the entire prototype from figma but I have no idea how to do with Adobe xd
@@WebDesignGeek actually instead of coding is there any way
@@ayushkumar-zr1lp Anima plugin might help you export the whole design in HTML, CSS, and React code, but for the animation, I'm not sure it can.
super sir
Thanks.
hey man i am facing problem with asset
What kind of problem?
@@WebDesignGeek they are not downloading
i mean the page is showing error
@@facttex5830 The stock website has a problem.
can you make the link?
Hello there great tutorial, but could you please share your xd file as well?
the link to the starter file is in the description.
Sir, I just start ui ux and I am in learning stage so please give source file also
Thanks for showing interest in our video, but sharing the source file won't be possible at the moment. Happy learning!
you didnt do web export this page can u make this in web
Hey @Ragunath Designer it's should be possible with JavaScript, but I'm not a web developer.
I know tNice tutorials is an old video but I’m n
It's to loud and licky. Not nice for
Brain will be get burned..
Everything is good, but your Voice, I don't know why you are speaking like this ( a robotic and slow-mow sound with telling every digit of the parameters), you can speak naturally bro.
Hi Gaurav, Sorry for the inconvenience, if otherwise was possible I would do it from the beginning, I tell every digit of the parameter to be precise that's what most of the beginners like the videos.
Thank you very much