Warping Icons Animation in Adobe XD | Auto Animate | Design Weekly
Вставка
- Опубліковано 2 лют 2019
- Dribbble Invite Give Away Winner - Manan Dua (check your mail manan)
Today we are designing Warping Icons in #adobexd using the trusty #autoanimate feature. We will be using the pen tool and auto animate to animate these beautiful set of icons. I've given the download link below:
XD file Download: bit.ly/warpicons
Menu Icon: 0:30
Search icon: 4:40
Arrow icon: 9:15
Popup icon: 12:24
Add icon: 17:00
Title: Warping Icons Animation in Adobe XD | Auto Animate | Design Weekly
Music Used: Ella's Interlude by DJ Williams
Software used: Adobe XD (January Update)
Hardware used: MacBook Pro(2017-2018) and Logitech G402(mouse)
#icondesign - Навчання та стиль
Great stuff Bro! 👍
Cool
Clever!
Thank you !
Hey! Thanks for the invite ^_^
You’re most welcome!
Awesome 😀👍
Thank you! Keep watching
Yes i use purple
Great video!
Thank you!
Very useful .. thank you && keep on going !!!
Thank you for the appreciation! Keep watching
Very helpfull thank you 🙏🏽
You’re welcome! Keep watching
Keep going 😍🙌🏼🙌🏼
Thank you for the unconditional love and support
Nice job dude
Thank you! Keep watching
I REALLY LUV THIS !
(from paris^^)
Thank you! Keep watching!
Great tutorial thanks
I'm glad you like it!
Awesome but can you use those in a real project for example as a compound folder like in After Effects/Premiere/Photoshop/Illustrator?
That's an amazing course, but How can I set this warping icons animation in a web page? it is showing in different places(
Perfectoo #GreatJob
Thank you!
Thank you so much bhai
You're welcome man!
merci
You’re welcome!
can i ask a question? If we can't export animation with adobe XD, why should we create them?
Amazing! I have a question, after you animate these icons, how do you implement them in an application, website or something else?
Thanks!
I’d use these on pages where I’d like to show the animation. The developer often wants to see the animations.
Is duplicate the art boards of the app and animate that one icon. I hope Adobe streamlines this process.
I would guess that these are just unpractical. This would be a lot of work to program. And definitely would not look the same. Maybe if there is a way to have this as a gif and have it animate when the user clicks.
@@poolplayer322 Xd confuses me. It looks great for design work but when to comes to actually real world use and application Abode have dropped the ball.
@@poolplayer322 Wrong. These animations are quite easy to implement even at CSS level.
Source : I'm a Front-End Dev
Ajay M any proof would be appreciated. Please show us how this is done. I’m a developer too and know that this is not easy and is time consuming to get it to match the design. Unpractical still. Go ahead and waste your clients money.
How to implement in android studio?
Tell me just how to make that transition from one part to another to create the animation effect, what should I use?
Use Lottie for After effects. This allows you to export to android studio.
sir, how do you resize the whole icon without affecting the sizes of the individual elemnets e.g the lines, rectangles?
There is a switch on the right, called responsive resize. Make sure you turn that off for that element.
nice, but cant you get rid of the little dot you left in the first animation?
I surely could if I made the width 0px. Not sure how that'd work with a line though.
How do I use these icons in for example my navigation bar on my main website artboard ?
You will have to duplicate the entire art board to animate the icons. For example: if you’re navigating from one page to another , you will use auto animate to change the page and also change the icon. You might have to use multiple art boards
Hey bro! How to mask shape into shape. (ex - Circle into Rectangle)
Make a circle, then place a rectangle over it. After that, press CMD+Shift+M or CTRL+Shift+M. I hope this helps!
How to use them in other artboards as animated icons ?
@Taylor Younker Hello there, yes we can use animated icons while prototyping i.e once our designing is done we can import animated icons as MP4 or Lottie files within after effects and then add them where ever we want or even you can use tools like Protopie as well. Also check out my Pinterest page in.pinterest.com/Varundade/_created/ for design inspirations, kits, wireframes & more. Thanks & have a great day ahead!
Can you guide how to create Google dots motion in xd
Could you give me a link so that I know exactly what you want ?
Hello sir,
As you have used 0.08 Sec duration in most of the Animations, but my XD is not allowing numeric value less than 0.1 sec.
If I type 0.08 it gives 0 s .
Can you help please ?
This might be a problem if you're using windows. alternatively, download the xd file which I've given with the video. Hopefully the settings should remain in that file. Else, this is a problem I haven't faced yet myself. Try asking this question on the forum: forums.adobe.com/community/adobexd
te amo
You're welcome!
How to export them and use them in a project ?
Unfortunately It's an Xd only project. Exporting them would require using plugins in after effects. You can export them as gif's, Mp4's and other formats.
Brother esko use kese krenge real project m
Can I ask why the time trigger isn't showing on windows 10 version? :/ I'm still a beginner so I'm kinda clueless.
Make sure you select the artboard and not an element inside the artboard. Only then will you get the option of time.
@@PunitChawla OMG it worked~
Always welcome!
Am gunna
✌🏼👍🏻
in my adobe xd,There is no transition named time,please help me..
Make sure that Adobe XD is updated to the latest version. Then when in prototype mode, select the entire artboard for the time option. If you select an element, there will be no tile option. If this helps, do let me know.
Upgrade your adobe XD to the latest version
if i want add this animation on main menù of my app, how can i do it?
You will have to use body movin in After effects to replicate these; and then export as json file.
@@PunitChawla thank you so much!
Where can we implement these.?
Use these with modern web design or app designs. Something where line based icons can be implemented.
I'm gonna like this video, because I'm gonna use it at my job, I'm gonna thank you but please stop overusing "I'm gonna" Hahah nice video man!
Hahaha! I’m glad you found it useful
Cute
Adobe XD confuses the hell out of me. I want to create and then just export to what ever of many choosing be that to a website