Animating Buttons (UI design & Prototype) - Adobe XD tutorial [2019]

[@moomanow5104]

I'm a newbie. Thank you for mentioned Auto-Animate will only work with the object with the same name. THANKS A LOT!

[@JerrinJames]

yeah, it only works that way.

[@designwizard3109]

Amazing Tutorial

[@JerrinJames]

Thank you!

[@jessicacristen2786]

You are the best teacher ever on KZbin 😍 thx

[@JerrinJames]

Thanks, this means a lot.

[@irtizabhojani5047]

SO HELPFULL LITRALLY JAAANI I LOVE YOU

[@abdelhamidmohammed9238]

so simple and so easy. go on

[@JerrinJames]

thanks

[@alterakdraws9023]

this was helpful! I see that you have some more interesting videos, so i'll stick around!

[@karemzoro999]

Wow great video I really liked the voice over. Which software did you use for the voice[text to speech]?

[@ragavan50]

Love your tutorials man, keep it up!

[@JerrinJames]

Thank you 😍

[@LibranduShot]

But its a woman speaking..😛

[@aniketjoshi7518]

Nice video , now need to update as component states arrived

[@JerrinJames]

Working on it, it would definitely be a lifesaver.

[@LibranduShot]

Awesome..clean and concise explanation...😊 Make more videos..thanks a lot

[@JerrinJames]

Thanks a lot 😄

[@iMohi]

Wow awesome Man Subscribed Thank you for this tutorials

[@JerrinJames]

You are welcome, more content coming soon

[@snfoor8071]

can you see this project please and give your opinion www.behance.net/gallery/90156093/Hamburger

[@mananvora9895]

Love the tutorials man. The robot voices are a little weird with such videos mate, but the content is great

[@JerrinJames]

Glad you like them! I am planning to switch to my original voice soon.

[@fabianaruggiero5888]

hi! I love your videos thank you so much for the help! I am pretty new to this... just curious if you can save all of this and past it onto a new project?

[@JerrinJames]

Yes of course! Honestly this is an old technique even though its just an year old. Adobe XD have some pretty cool and new features with which you can do this very easily and use it throughout all if our projects. I will soon make a video on that. Subscribe and make sure you don't is that..

[@stephen3511]

Great!

[@JerrinJames]

Thanks :)

[@varundade]

How to use them in other artboards as animated icons ?

[@adamk284]

Yea this is really bad tutorial. You want to create a component with shapes (DO NOT COPY IT), then use states for different versions, use prototype links to go from one state to another. This way you have reusable icons for your whole projects

[@varundade]

@@adamk284 Thanks for the advice man!

[@JerrinJames]

This video is one year old and at that time, this was a work around to achieve this effect. Now XD introduced Component states and you can do the same with component states. My next video will explain how to make use of component states.

[@0xgroot]

Awesome man

[@JerrinJames]

Thank you 😊

[@moxileagueshorts6622]

Very helpful. Thank you so much Jerrin. I have one question, Can you please tell me the name of the software that you are using to record this video? Thanks

[@JerrinJames]

I recorded this using open-source software called Captura. You can also use free software like OBS for screen recording.

[@vijithuae]

Simple and beautiful 😍😍

[@JerrinJames]

Thank you!

[@sulagnasil5391]

kindly make a video or say how the third one works?

[@LifeAZ]

wow... tnq u man ..

[@avivachristophe8940]

OK so I created the button...how do I save it and add it to a page?

[@noahgreen6292]

cool

[@alfredoneyra9005]

And how do you export that animation to a format (like GIF) to use in a develop ?

[@JerrinJames]

You cannot export animation to GIF inside Adobe XD. I once tired a workaround and it worked for what I had in mind. 1. Record the Prototype using Windows game bar or some third party screen recorder. 2. Time and trim the recording and export it as any video format. 3. Import that video into Photoshop for saving it as a GIF. Import the video to Ps, make sure you turn on the timeline from Windows>Timeline. You can use File>Export for web legacy and select GIF ad the output. This gives a granular level control over the export. 4. You can also use some online media converting websites to convert a video to a GIF.

[@lokiexcelsior]

Awesome...now how do I use this button on other artboards in my design?

[@JerrinJames]

You can use the same technique with any to artboards in your design

[@sazalsarkar2130]

Wow....

[@amuldhungel5060]

how can i use it in app like this interface with interaction

[@JerrinJames]

I'm sorry. I can't help you with that. There will be some way, but I'm not well versed with techniques involving front end coding.

[@romanb3350]

Hello dear! Adobe XD (auto-animate pluin is used) but when exporting to SVG, the program simply creates static images (artboards) without animation Is it possible to create an animation in XD format SVG? and how to do it right?

[@jias3251]

SVG is a format for vector shape. You need to record the animation.

[@JerrinJames]

Absolutely

[@romanb3350]

@@jias3251 --- how (what app) I can make it?

[@jdcasteldaccia]

@@romanb3350 Adobe XD.

[@LibranduShot]

@@jias3251 yes exactly... svg arts cannot have animation...

[@gleptech]

i hate how the circle is not aligned properly to the left

[@JerrinJames]

Thanks for the feedback. I too had a problem with it, since one is a rounded rectangle and the other a circle, even if they are aligned perfectly at centers, to both the circles, it looks a bot off centered. Thanks for pointing it out. :-)

[@Arddy]

All these buttons are using its own artboars. The final example had numerous animated buttons on one artboard - you didn't explain how to compile it together...

[@JerrinJames]

Hey, even though there were many buttons in the final example, it works with the same principle. As you can see, they jumped between three different states, each in its own artboard.

[@hamzaougui6751]

I can use that on a program C# ?

[@JerrinJames]

I really don't know about the programming side of things, so sorry.

[@தமிழோன்]

It's possible with XAML.

[@DomainHostingSellcom]

your screen recorder software names ?

[@JerrinJames]

In use a software called Captura. Its available in GitHub

[@dineshbhaskaran7406]

how can i convert this animation to xml code ?

[@JerrinJames]

You can't convert the animation directly to any code. There is a plug-in using which you can convert Design to static HTML code.

[@msai3934]

@@JerrinJames what's the plugin name ! brub

[@kaylaasare22]

Hello, my name is Kayla. I represent a company prototyping software that is better than Adobe XD. The company loves your content, and would like you to review or promote their software. If you are interested in this partnership, we can have the client explain the software to you as well. We just want an honest review on the software. I hope to hear from you soon, so we can work together.

[@microwavecoffee]

why do you hate your voice that much

[@JerrinJames]

Haha, you will know it soon.

[@sulagnasil5391]

kindly make a video or say how the third one works?