Holy crap, my progress indicator demo task has gone from impossible-feeling to easy-peasy. Thanks Dansky!
@ForeverDansky Жыл бұрын
Aha awesome! Glad to hear it Rob 😊👊
@coderarcher71224 жыл бұрын
I experimented on my own and it worked!! I'm very happy as this is my first ever animation made on XD! I created shorter segments, taking time, and it was cool!
@ForeverDansky4 жыл бұрын
Awesome! 😎
@amandeepkaur-pq1bn2 жыл бұрын
'Superb' it is so easy I always ran away from tutorials but you make learning so easy :)
@rafsan_1.6183 жыл бұрын
You don't have to make different components, Just increase the Dash size in the next artboard.
@TheMikenart2 жыл бұрын
Thanks for this!
@rafsan_1.6182 жыл бұрын
@@TheMikenart You're welcome.
@Eren891643 жыл бұрын
That was amazing 👍, love from India❤️
@FLOWTUTS4 жыл бұрын
Ohh that's really cool ❤ this inspired me to do a tutorial on it in after effects 😊
@realmeraj36814 жыл бұрын
This is my First animated making video seeing....so great
@Chreative4274 жыл бұрын
Thank you! I'm working on a thermometer mockup and this came at a perfect time
@ForeverDansky4 жыл бұрын
Aha awesome! Glad it's helpful Chreative 😃
@angelovergara4 жыл бұрын
This is so awesome! I would've never have figured this out on my own. Thank you!
@ForeverDansky2 жыл бұрын
Happy to help Angelo!
@fnonaka4 жыл бұрын
OMG I never imagined to create a ring like that! I used to substract forms + using the pen tool wtf a lot of work! Now, how to do this animation with a "ring" with gradient?
@ayo104 жыл бұрын
Thank you for this @Dansky. This just saved me a ton of time
@charlesmoses77244 жыл бұрын
Clear and precise. Congratulations, you just made a new subscriber.
@santhoshsoftware3 жыл бұрын
thats awesome Dan!!!
@theanecdotist98533 жыл бұрын
Thank you so much, my guy! This was so helpful. You've 'earned' a new subscriber today.
@lydiawere4 жыл бұрын
thank you so much Dansky, this tutorial jus made my day.
@arkoprabhobhattacharjee75474 жыл бұрын
You, sir, are very kind! What a brilliant, easy-to-follow tutorial! :)
@Anonymous-cb6by4 жыл бұрын
thanks sir i am a developer i am working on a project and it helped me a lot for creating a completing progress bar😊❤
@ahmadkhudai3 жыл бұрын
Thank you
@ForeverDansky3 жыл бұрын
You're welcome Ahmad!
@adreyy97644 жыл бұрын
I'm new here and I have one thing to say: I've seen no person but you who looks like a designer that much. I love your videos!
@ForeverDansky4 жыл бұрын
Thanks so much 😊
@Carcass255CZ Жыл бұрын
Thank you. Is it possible do this animations in one artboard?
@sarajones8337 Жыл бұрын
This is a great video! Could you auto-animate the progress bar to a scrolling text? I assume you would link to the scrolling box instead of the artboard, right?
@jordydejong29604 жыл бұрын
Great tutorial as always! One question: is it possible that the colour gradually changes as the progress bar fills up?
@ForeverDansky4 жыл бұрын
Hey Jordy, thanks so much! Yes you can change the colour and sometimes get away with it happening during the animation, although sometimes it stands out and is a bit too noticeable. Hopefully colours graduating during an animation is something the XD team will consider adding in future 😋
@harshkadyan-themanager26882 жыл бұрын
actually transforming complete colours is not possible, but you can use a gradients, with multiple colours
@avrahamnacher32234 жыл бұрын
Great stuff! Keep it up
@ForeverDansky4 жыл бұрын
Thanks, will do Avraham!
@wahidislamjoy91743 жыл бұрын
nice presentation sir
@uxninjaa4 жыл бұрын
Great trick!
@aimiliosdiakakis29324 жыл бұрын
Very good tutorial!
@ameyabuty23153 жыл бұрын
Thanks, it helped me a lot
@Alex-np5dx2 жыл бұрын
10 out of 10 marks🤩🤩🤩
@md.rahimuddin50574 жыл бұрын
Thank you sir.😍 It's perfect for me.
@Favoxhille4 жыл бұрын
Wouldn't be the same to create states in which the ellipse has different dash/gap settings instead of duplicating the ellipse component over and over?
@mehdionline13 жыл бұрын
thanks
@neutillius3 жыл бұрын
May I ask ? Where is the gradient look you've put in cover thumbler of this video.
@ForeverDansky3 жыл бұрын
I create the thumbnails in Photoshop, and the effect is mostly solid pink for the rings, with a feathered white brush on one end of the progress bar.
@neutillius3 жыл бұрын
@@ForeverDansky tahnks for reply. I'ld like to know any available videos of you includes progres bar ring animated with the gradient end.
@1raskumar4 жыл бұрын
thank you!
@ulvinomarov4 жыл бұрын
Dansky, I think u have to new and cool letter D for ur logo)))) The current is so simple)
@AhmedKhaled-ey2is3 жыл бұрын
thank you
@mrag7923 жыл бұрын
you fulfill my dreams :) thank you very very much
@Bontelucci2 жыл бұрын
Hi there Dansky, How do we export this for developers? Best way/practice? Thanks so much!
@vanhellsingniko85804 жыл бұрын
Really cool but i can't press "0" when all component are selected... I have to do this on each segment...
@Banzaiiable4 жыл бұрын
Hey ! If you haven't figured it out yet, set the rotation to any number but 0. Once the rotation is the same for all the instances, you can then set a 0 degree rotation for all components.
@GeGe-gg3zt4 жыл бұрын
Thanks!
@raveer124 жыл бұрын
Hey Dansky , Last step before prototyping, selecting all component and rotation i am giving 0, I can't select 0 in the rotation. Is it for Mac only, i have window only not mac?
@eguchiyuuki Жыл бұрын
Great
@viethahoang24094 жыл бұрын
this is so smart... why didn't I think of this before :o
@rauldanielfloresa4 жыл бұрын
Hey thanks a lot! I have a question on the background gray that you have as part of your setup, What did you used to make is to soft? Looks very nice
@UnknownUser-re6yg3 жыл бұрын
It's called neomorphism design. Look it up
@jermelpierre19943 жыл бұрын
Do you have to rotate if you are using a hexagon instead of a circle?
@SukiiHon4 жыл бұрын
super useful! how can we use this for a shape other than a circle (ex. rounded square box)?
@MrOngtrum14 жыл бұрын
how to make Sprite Sheets look like this Adobe Flash CC ?? please tell me !!!! because i think Adobe XD with very much Art Board is very tight document not good i love Sprite Sheets
@ceruleandream9724 жыл бұрын
Hi I had a question! What do you do if you want the bar to start from 0? Like blank
@jnsaba55514 жыл бұрын
Hey mate, on the last step before the prototyping phase I can't select 0 in the rotation, it just won't let me :(
@chaitanyakrishna70694 жыл бұрын
Was facing the same issue. Last resort, go to every segment and make the rotation zero. Collectively its not happening for me too.
@SemageNamalSurendra4 жыл бұрын
Excellent 😘
@mohdshahnawazalam92214 жыл бұрын
superb
@esk2k53 жыл бұрын
could this be done with a clock/timer, starting on 12, with the hand going round and as it does a solid colour follows the hand around to 12
@moseskarunia4 жыл бұрын
Hi mate, how do you cast your inner shadow? Afaik it's not possible unless I do some ugly hack.
@ForeverDansky4 жыл бұрын
Hey Moses, there isn't a native inner shadow option in XD just yet. I've got a video covering the neumorphism design style going up either this week or next, but in the meantime here's another tutorial that may be useful kzbin.info/www/bejne/pl7Gl2RvnLqrr5Y
@kasra103 жыл бұрын
very nice thanks:))))))))))
@ForeverDansky3 жыл бұрын
Thank you! Cheers!
@vincybadman8714 жыл бұрын
Why didn't you use the actually dash properties to animate instead of multiple individual circles?
@GeGe-gg3zt4 жыл бұрын
i have the same question -)
@andycreatives2 жыл бұрын
how can I loop the animation without retracting? the loop goes on in a circular loop?
@samuxui3 жыл бұрын
Please reproduce this effect in a rectangle, I am not getting the same result. A big hug!
@taimoorkhanvlogs4 жыл бұрын
Please please make tutorial of How to Create skeumorphism design plz
@chimed664 жыл бұрын
Is it possible to animate with a mask included within the component?
@akshaycreation4 жыл бұрын
Any solution for gradient border in XD
@vigneshraja2164 жыл бұрын
Awesome
@bradeaton34284 жыл бұрын
Could you do this with multiple circles loading at the same time within the same artboard?
@Mo-kq4er3 жыл бұрын
Is there a way we can do this but with a gradient?
@jigarparmar35974 жыл бұрын
Can you show a tutorial using a rectangle?
@fractalelement8574 жыл бұрын
1:32 what do you mean by press return ?
@aeeweb64643 жыл бұрын
How export it and use it in html css files ?
@laizamlathyf56314 жыл бұрын
how can you make the progress bar gradient?
@hillzdoe4 жыл бұрын
Yaaay!!! I'm early notification squad where you at? Great video once again Dansky!!!
@ForeverDansky4 жыл бұрын
Hillary Lakeman BOOM early squad! Thanks Hillary 👊
@hillzdoe4 жыл бұрын
@@ForeverDansky ayyee!!! All the love from JAMAICA 🇯🇲🇯🇲
@suburbanview3 жыл бұрын
So after u have fun with XD, what it takes to make it a real website? Let me guess. If u used DW you need to do all over again the process to connect the dots. Or hire a web developer to do the job. Unless you are not the average joe and know html or java.
@beeyoch3 жыл бұрын
nice tattoo yo
@agustincastro58134 жыл бұрын
do you know how to put ths on android studio?
@The00sk004 жыл бұрын
Adobe please add remove anchor point tool in the adobe xd without shape close
@ForeverDansky4 жыл бұрын
👍
@ivelina_vk4 жыл бұрын
You can do that by using Option + Del :)
@AmpedUpTech3 жыл бұрын
Can you teach us how to create an intro animation like you. Thanks. 🙂
@fahadsheikh15134 жыл бұрын
You are great budy! your face is same to same my big brother duplicate 😃
@ForeverDansky4 жыл бұрын
fahad sheikh Haha thanks 😂
@fahadsheikh15134 жыл бұрын
@@ForeverDansky hahaha every time i watching you i remember my brother his name is waqas he is working in dubai 😃
@SquaredbyX4 жыл бұрын
Instead of duplicating complete art boards, you duplicate the first set over so they keep the same names.
@nikyabodigital4 жыл бұрын
cant u just animate this by increasing Dash value instead of copy pasting component like what you did here?
@vasekcz4 жыл бұрын
I gave 1000 like!!!
@MateusHenrique-ne5el4 жыл бұрын
Manooooooooooooo, tu e foda
@Whitepillednazarene3 жыл бұрын
anybody know how to make this a loading bar in html/css?
@elias1410e3 жыл бұрын
Suena chistoso con el XD XD
@naina90jaiswal4 жыл бұрын
i have followed excatly what youve done... why doesnt my auto animate do the same thing ...
@naina90jaiswal4 жыл бұрын
Instead of loading in a flow... it just appears in a fade in effect
@ForeverDansky4 жыл бұрын
Hey Naina, that issue usually means there's a problem with the layers, in particular the names might not match between artboards, or perhaps one artboard has the layers grouped, and one doesn't.
@snap-n-shoot2 жыл бұрын
its supposed to be a wireframing app I thought
@JulianStiber3 жыл бұрын
Thanks, but I guess this Video is obsolete now with the last xD Update 😉
@margoumix4 жыл бұрын
Will be Nice if transformed to code :)
@fahadshakoor94513 жыл бұрын
any programmer watching?? is it hard to code?
@SPGraphics_channel3 жыл бұрын
Why made so many components, instead of just duplicate the artboard, put dash initial and final on both the components and auto animate the artboard
@dragerstudio3 жыл бұрын
I know this I'm already macked in Android alight Motion
@digikalaakaar4 жыл бұрын
मैं यह ट्यूटोरियल हिंदी में करता हूं
@dharmatreasure29194 жыл бұрын
🎩 😁 👕👍Great! 👖
@ForeverDansky4 жыл бұрын
M T M Nice! A+
@thatguywhoplayschess52834 жыл бұрын
Hating Adobe XD right now. It's so hard to come up with this kind of solution, as auto-animate is so poorly developed. This is such a counter intuitive and complex way to do such a simple task... Adobe XD should give the user a wider range of ways to animate stuff, not just "try to guess" with auto-animate. Moreover, with auto-animate the result is just the same of transition too often. The funny part is that Adobe XD is made to design UX, and itself has such a bad UX design.
@mayabitar13162 жыл бұрын
I thought it was figma man 😂
@dynamichorse97792 жыл бұрын
Too much acrobatics for a small animation, XD has to grow fast with animations
@naveenuday4 жыл бұрын
hooki dooki
@maxpower93934 жыл бұрын
Neomorphism or What you Call it... is pretty Weird and super low contrast. IMO it is useless in real applications
@moseskarunia4 жыл бұрын
The key is don't overdo it. Like this progress bar. You actually don't need the "gutter" that much, because the actual "bar" is already eye catching enough. The "gutter" is just a nice touch