Adobe XD Drag Tutorial - Create an Interactive Image Carousal

  Рет қаралды 180,246

DesignCourse

DesignCourse

Күн бұрын

Пікірлер: 134
@DesignCourse
@DesignCourse 6 жыл бұрын
Enjoy? Remember to subscribe and click the notification icon! ;)
@errorist7829
@errorist7829 4 жыл бұрын
Is this possible with states?
@braydenmustafa4478
@braydenmustafa4478 3 жыл бұрын
instablaster...
@defrostfun7430
@defrostfun7430 5 жыл бұрын
I think it would be better if XD will have more options on Interaction like having a Trigger of "Drag to left" and vice versa.
@Freedom-pv8bn
@Freedom-pv8bn 5 жыл бұрын
Here's the issue I'm having, hopefully you can help! - When using drag auto animation, the method you described lets you go all the way to the third image and then all the way back to the first image. A problem occurs (with the setup you have described) when you go to the second image and then attempt to return to the first. Hopefully Xd Makes an easier method for dragging between artboards? Let me know! 12:15
@WyzrdCat
@WyzrdCat 5 жыл бұрын
It's cool that you can do this, and I can see the benefits of really getting things nailed down before you start into code for bigger projects. And it's a great way to learn what you can do with Xd, so I'm not knocking the tutorial at all. But man, most of the time, it would be like 500% faster to just make an *actual* working slideshow for the prototype lol.
@richmarkese765
@richmarkese765 5 жыл бұрын
It breaks when you have more than 3 screens (actually probably even with just 3 screens), because you cannot be in the "middle" of multiple screens and go back and forth when you want. Its either go left to right ALL THE WAY then right to left ALL THE WAY, but if you want to switch directions in the middle this approach doesnt work.
@yanz_77
@yanz_77 5 жыл бұрын
that's right!
@birajg.c645
@birajg.c645 4 жыл бұрын
what do i do then ?
@richmarkese765
@richmarkese765 4 жыл бұрын
@@birajg.c645 I was able to find a pretty good solution, but still wasn't perfect. I need to dig the file back and up see what I did. If I do, Ill write back here.
@mohammadaram6644
@mohammadaram6644 4 жыл бұрын
@@richmarkese765 but look at the video, he can drag right to left !! how can he do that?
@azeli0ne
@azeli0ne 4 жыл бұрын
Rich Markese were you able to make it?? Im so confused i hope you can explain :”)
@The911watch
@The911watch 6 жыл бұрын
How do you get back from the second slide to the first without going through the third?
@kotosnet
@kotosnet 6 жыл бұрын
I think that this way of making animations is not very intuitive. It is maybe cool if you have a simple page, and what if you have 40 screens and you want to present even animations on these screens. You can easily get lost in it. Just like in your case you are repeating the screens to go back. hmmm...
@aat10Kyoko
@aat10Kyoko 5 жыл бұрын
agree. only "sell" the customer the idea, but up to the developer *and I'm not a coder so...
@stuartdoyle99
@stuartdoyle99 4 жыл бұрын
I completely agree, just to duplicate the screen in order to be dragged back is crazy. It would be good if there was even a return or reverse option instead of creating so many art boards
@jesset55
@jesset55 5 жыл бұрын
I didn't know T.J. Dillashaw also did XD tutorials. A man of many talents.
@centrumsaiyan7623
@centrumsaiyan7623 5 жыл бұрын
I learnt a lot from this tutorial. Thanks.
@vegolina8839
@vegolina8839 6 жыл бұрын
Wow your adobe xd tutorials are amazing! Keep it up. To answer the question, I use skillshare obsessively ;)
@7XStriderX7
@7XStriderX7 5 жыл бұрын
Awesome vídeo! The plugins were also really useful! Thanks!
@theakwonderland
@theakwonderland 6 жыл бұрын
I am finding XD great for prototyping microinteractions. I have began using it as a secondary tool while keeping Sketch as my primary. If I ever want to hammer in an interaction to show to someone, I import my sketch file in XD and use prototype mode to drill in the microinteractions i'm looking for in forms and what not. It also helps that I can see everything in real time on my phone as i update. just my 2 cents.
@93deadpool
@93deadpool 2 жыл бұрын
Clear as mud.
@iPlushieza
@iPlushieza Жыл бұрын
thank you so much! great tutorial !
@dianadaly5598
@dianadaly5598 5 жыл бұрын
Thank you very much! This video really helped me for the presentation of my app!! :)
@derricksoz
@derricksoz 4 жыл бұрын
Awesome ! Thanks for your video. It's really helpful.
@FeNxKroNix
@FeNxKroNix 5 жыл бұрын
Hey, for the last part with the time trigger instead of duplicating everything could you use incrustation for the little message and make it go back after some time ? Or can you only make it pop but not go back ? Love the vid see you
@kaiwangdance
@kaiwangdance 2 жыл бұрын
hi design course. do you have any course for how to apply the apps we designed. I recently will finish my own design apps by XD, but I don't know how to make it a real application for user to use it. do you teach that? thanks
@GhxstinSoon
@GhxstinSoon 5 жыл бұрын
Actually when I started Adobe XD I used KZbin and didn’t have any experience to Adobe and before but I now do
@e11world
@e11world 4 жыл бұрын
Is it possible to do a mega menu type of interaction (menu, opens up a mega menu with different hover or clicks to show different sub navs/change images on sub nav) and have other category links to go to different artboards?
@monkeyflyers
@monkeyflyers 5 жыл бұрын
Thanks, Great tutorial!! help me a lot to understand more about Adobe XD, and the most important very well explained, thanks for taking the time to teach us!!
@michaelbell2897
@michaelbell2897 4 жыл бұрын
yours has three cards, my prototype has about 10 is there any way to go back and forth in between without going all the way to the end and back? Can the drag feature distinguish between destinations depending on the direction of the swipe? Is there any workaround?
@nikyabodigital
@nikyabodigital 4 жыл бұрын
our devs will need to code this to a website. My project file gonna be messy as hell.
@jasonpbass
@jasonpbass 5 жыл бұрын
one thing i noticed is that you can not go from 1 > 2 > 3 > 2 > 3. you have to go all the way back to 1 in order to advance back to 3 from 2.
@cowsayswoof
@cowsayswoof 6 жыл бұрын
XD really stepping up their game lately
@khamphone86
@khamphone86 6 жыл бұрын
Yes, I did. udemy and skillshare :)
@deopurkar
@deopurkar 5 жыл бұрын
This tutorial helped me. Thank You. :)
@stephen3511
@stephen3511 5 жыл бұрын
Great tutorial. Thanks so much 👏🏻
@d70t
@d70t 5 жыл бұрын
Thanks for a great and easy to follow tutorial! I've done this for my own project but when I share the prototype - either thru a link or downloaded onto my phone, the Drag animation is lost. Am I not doing something or does it get lost when sharing?
@simranthadani8769
@simranthadani8769 4 жыл бұрын
Hey this really helped me out. Thanks man 💯
@pinkspot83
@pinkspot83 5 жыл бұрын
Thanks for the video! Is it possible to animate a circular movement with adobe XD? Similar to the telephones in the past with the disk in the center and the numbers surrounding them where you sticked your finger in the number and dialed rotating the disk?
@toshjmoshify
@toshjmoshify 4 жыл бұрын
THAT WAS REALLY HELPFUL .. THANKS !!!
@theelectrictouchmusic
@theelectrictouchmusic 4 жыл бұрын
so good dude thank you
@Litonfiredesign
@Litonfiredesign 5 жыл бұрын
Udemy is my preferred source
@theakwonderland
@theakwonderland 6 жыл бұрын
Thanks for the vid! I use Lynda because my work pays for it! I used team treehouse in the past. My subscription is on pause though. I also used skillshare as well but am not using it anymore.
@cyclopsli1923
@cyclopsli1923 5 жыл бұрын
lynda is good too, sadly they haven't had anything updated for xd with autoanimate.
@theonlyonetrue
@theonlyonetrue 3 жыл бұрын
Super video! I applauded for $2.00 👏
@sathishkumarp3862
@sathishkumarp3862 5 жыл бұрын
Hi I've doubt regarding Creating the any object around the circle similar to illustrator. Assume Circle is a Sun and we need to create Ray's around the circle? This type of options available is XD????????
@Chris-bn1vt
@Chris-bn1vt 5 жыл бұрын
That is a lot of duplication, to get it to work. I currently have a website consisting of eleven pages and two modals, not to mention making all of that responsive too, then there is also a carousel slider consisting of three slides (this is where this complexity would come in. well, not exactly as this, the sliding would be replaced by arrow buttons and there wont be scalling (zooming)) That would be a lot to keep tabs on and have everything work as it should. Lets put it like this, 3 pages consist of 5 sections each (a section being one viewport) one page consist of 10 sections and the rest is shorter. Through in more complexities, all but four of those pages would make use of a parralax effect giving the effect of the top page sliding away and revealing the underling page, the remaining four would use a side by side sliding parralax effect with one side comming from the top and one from the bottom. then there would also be a hover effect on the home page using CSS flex to create an accordian. But for the parallax and accordian I believe there is no way of prototyping it in XD. As for learning, I use no payed online resources, just KZbin, w3schoools, MDN, CSS-Tricks and other free oline resources. I do have a few books too, covering web development, mostly HTML, CSS and JavaScript.
@trankimquan2786
@trankimquan2786 5 жыл бұрын
This tutorial is very useful. Thank you so much
@suckerPunch5670
@suckerPunch5670 4 жыл бұрын
It may be a stupid question, but UI, UX and web design are completely new thigs for me and I'm wondering if I shoud start a course, because I just graduated as a graphic designer. So! My question is.. how do you show everything you made in a portfolio and how you send it when you apply for a job? If your work has animation in it and working code in general. I mean.. do you send different files in one rar folder or you make one site with all of your work (like a portfolio page inside) and you send the file?
@enricobonafede5108
@enricobonafede5108 4 жыл бұрын
Hi Gary, one question, how do you change the numerical values using only the mouse? (min 4:30)
@ankitgoel6634
@ankitgoel6634 4 жыл бұрын
How he can apply the drag animation from the 2nd artboard to the 3rd artboard. He has already used the 2nd artboard for the 1st artboard to backslide.
@michaelc3963
@michaelc3963 3 жыл бұрын
Fn love you dude!
@andrikwong
@andrikwong 5 жыл бұрын
How did you enable the mouse to change the text size? How come? Mine doesn't have the "double-headed arrow" to indicate this :(
@alessiodibartolomeo3529
@alessiodibartolomeo3529 5 жыл бұрын
One question. Is it possible to add another action on the picture of the first, second or third blog? If you want to open another window can I add a tap action from prototype? Thank you :)
@limytifitness1377
@limytifitness1377 4 жыл бұрын
very helpful! thanks
@titolabruniedsg
@titolabruniedsg 5 жыл бұрын
Can I create a Carroussel using overlay? I tried it putting an image overlay over my Homepage and then trying to create a slide transition on it, but it didn't work. My homepage is very long and having to duplicate it to create a Carroussel is terrible.
@moyosoreogunleye
@moyosoreogunleye 4 жыл бұрын
Hi, it's my first time on your tutorial, which I really enjoyed by the way, but this method can get confusing...especially if you're designing above 10 screens. Is there a way to simplify it? Yes, I learned on Udemy.
@andrikohedi711
@andrikohedi711 5 жыл бұрын
very useful bro thank you
@statkiller2156
@statkiller2156 4 жыл бұрын
Is there a way to just click play and it cycles through all the images ? Instead of interactive ones...
@muhammadzahran5564
@muhammadzahran5564 5 жыл бұрын
Hi, Gary I have a question here If I have for example 3 elements I can drag between them from 1 to 2 to 3 and comeback from 3 to 2 because every element has one step but I can't comeback from 2 to 1 because I used 2 to go to 3 . I did some tricks but it doesn't work . So If you have some tricks to do that can you show us . All videos show us how to drag between two art board or two elements but about more art boards or elements ? Thanks
@adamqi3899
@adamqi3899 4 жыл бұрын
same question, 4 can't go back to 3, did you solve it mate?
@premdamoor8663
@premdamoor8663 5 жыл бұрын
How to drag screen-2 to screen-1 after dragging the screen-1 to screen-2 ?
@nabilcherifdouazzane6926
@nabilcherifdouazzane6926 5 жыл бұрын
Same question ! did u get some answers on the web ? let me know plz thanks !
@revendeva5362
@revendeva5362 5 жыл бұрын
Same Question. Have you find the answer? Somebody please answer our question.
@brosio83
@brosio83 5 жыл бұрын
that's a great question...I'm curious too!
@Noans
@Noans 5 жыл бұрын
same problem... no solutions
@Noans
@Noans 5 жыл бұрын
Found a potential solution! Create into the scrolling group two half screen transparent rectangle, one left-side and one right-side. Link in prototype mode the right one to the scrolled right side artboard and left one to the previous artboard (the one scrolled left side). Obviously you need to copy these transparent rectangles in every artboard! This should work, I hope to be understandable ^^
@별사탕-j3w
@별사탕-j3w 4 жыл бұрын
Thanks so much
@tobyglass8849
@tobyglass8849 5 жыл бұрын
Am I correct in saying that you didn't create a way to go from slide 2 to slide 3 after having dragged back from slide 3 to slide 2? I tried this with 10+ slides and encountered this problem. Anyone know how to solve it?
@christianachleitner9439
@christianachleitner9439 3 жыл бұрын
nice video, i wonder how that would work on a biger artboard :)
@lisacampbell4184
@lisacampbell4184 5 жыл бұрын
How did you scale the group with only using Shift and alt? My XD won't scale proportionaly?
@Eeyee
@Eeyee 5 жыл бұрын
Omg, Thank you, So helpful :)
@cipondohtv70
@cipondohtv70 6 жыл бұрын
Thx for tutorial, it help
@Hesmart
@Hesmart 5 жыл бұрын
If I had to keep going with the drag animation foward?
@Hesmart
@Hesmart 5 жыл бұрын
Owm you told how
@Underhills
@Underhills 5 жыл бұрын
All this animation is gonna give the developer a heart attack.
@kerrispero7824
@kerrispero7824 5 жыл бұрын
Could you make the images videos or does this only work with still images?
@Doc_Animator_N
@Doc_Animator_N 5 жыл бұрын
Thank you!
@shreyasshankar4109
@shreyasshankar4109 Жыл бұрын
How do we show this kinda effect to a back end developer??
@suyashpurwar8310
@suyashpurwar8310 5 жыл бұрын
I love you man
@michaelbell2897
@michaelbell2897 4 жыл бұрын
wish there was an easy way to center one of the groups within the larger group without ungrouping
@ELP1125
@ELP1125 5 жыл бұрын
I use (paid) treehouse and Udemy. (Free) Sololearn and YT tuts
@robertfranckowiak
@robertfranckowiak 4 жыл бұрын
How about creating this animations without duplicating boards. For example by making another component statement and trigger by "drag". I dont want to duplicate boards to create animations! For example if you have many of diffrent screens and not all are same "height" like in this tutorial, You want better solutions that method in this tutorial. "
@zoeho3433
@zoeho3433 4 жыл бұрын
thanks a lot!!!
@bruceb85
@bruceb85 4 жыл бұрын
why do you need two artboards overlapping
@kinnyvergara9419
@kinnyvergara9419 5 жыл бұрын
hello, how can drag images from my pc to adobe xd, i am try but get simbol cancel or no permission. the program need some aditional configuration ?
@ilhamakbar3441
@ilhamakbar3441 5 жыл бұрын
very helpful th alot dood
@vaibhavbansal007
@vaibhavbansal007 5 жыл бұрын
What if i go to 1
@paulinebianchi4795
@paulinebianchi4795 5 жыл бұрын
what if you have a background that you want to lock ?
@sajadaldabagh1255
@sajadaldabagh1255 3 жыл бұрын
this loop is working one way from 1 to 3 but if you try to this way 1 to 2 and back from 2 to 1 it will not work
@marceloavf
@marceloavf 6 жыл бұрын
Nice tutorial, this last step of the notification could not have done with Overlay action?
@DesignCourse
@DesignCourse 6 жыл бұрын
Great question. I modified it to try and work the notification in as an overlay, and while I could make it slide up initially, I couldn't figure out a way to make it automatically slide back down and out after 1 second. So, unless I'm missing something, as I have it implemented here, no. You could use the overlay approach if you required the user to click on the notification in order to make it disappear to another artboard, but even then, no animation would be applied to it when it leaves. Let me know if you come up with a different approach that makes it work.
@DesignCourse
@DesignCourse 6 жыл бұрын
I got it to work for the most part, except it ends up looping. It will slide up, slide down, and then just loop over the sequence. I'm talking with someone from Adobe XD about it, we'll see if they have more to offer.
@DesignCourse
@DesignCourse 6 жыл бұрын
For the time being, looks like not. You'd have to duplicate the artboard.
@marceloavf
@marceloavf 6 жыл бұрын
Thanks for the investigation Gary, hope in the future we have a better solution, thank you again for the tips!
@emmanuellebura3681
@emmanuellebura3681 4 жыл бұрын
Linkedin Learning for learning coding
@BadPerson007
@BadPerson007 6 жыл бұрын
Is this to be used on a website?
@LORDSofCHAOS333
@LORDSofCHAOS333 2 жыл бұрын
well this is cool trick but how can show it as a portfolio
@priteshsuthar1297
@priteshsuthar1297 6 жыл бұрын
Whenever you export in prototype, Auto-animate and slide do not work. Its work normally fade-in and fade-out effect. Have someone realize that issue? while export in Prototype?
@maxpflegel
@maxpflegel 6 жыл бұрын
That's why I am here. Exact same issue and still looking for a solution. iOS 11, iphone 6s, win10, XD updated to the latest version.
@nourahhamad3894
@nourahhamad3894 5 жыл бұрын
Thank u 🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻
@Joshua-ot7fu
@Joshua-ot7fu 5 жыл бұрын
it is posible to drag down ?
@timothy6966
@timothy6966 4 жыл бұрын
I use Udemy -> Cristian Doru Barin at this moment. Great courses.
@GarvitJainGJ
@GarvitJainGJ 6 жыл бұрын
Anything (AMP) Accelerated Mobile Pages related?
@eldinhairic692
@eldinhairic692 5 жыл бұрын
never works with me
@insightvideos8
@insightvideos8 5 жыл бұрын
Why my adobe doesn't have drag trigger?
@saravanandurai4519
@saravanandurai4519 6 жыл бұрын
How to develop e commerce website using angular js
@Deepakkumar-ld3fz
@Deepakkumar-ld3fz 4 жыл бұрын
there was an error opening the file code 47 adobe xd
@ckayasal
@ckayasal 6 жыл бұрын
i have the latest version but couldn't find the (time) extension in the trigger menu. help
@Dragonpiece1
@Dragonpiece1 6 жыл бұрын
you have to select the artboard not the elements in it.
@abewardana5831
@abewardana5831 5 жыл бұрын
Time transition only applicable on the artboard
@adamqi3899
@adamqi3899 4 жыл бұрын
Q: screen4 can't go back to screen3....
@ranjithbabu8734
@ranjithbabu8734 5 жыл бұрын
Super
@Colbys92
@Colbys92 6 жыл бұрын
Yep Lynda 👋🏾
@yasminmatos6981
@yasminmatos6981 4 жыл бұрын
it's not working for me :(
@vijitasingh1737
@vijitasingh1737 5 жыл бұрын
coursera
@somawiragasaniscara9559
@somawiragasaniscara9559 2 жыл бұрын
very helpful, thank you very much! #subscribe
@dogan3037
@dogan3037 6 жыл бұрын
Its hard for mee
@kotosnet
@kotosnet 6 жыл бұрын
I use Lynda and Udemy
@nasawiko9495
@nasawiko9495 5 жыл бұрын
Like make a film
@g-kems
@g-kems 5 жыл бұрын
It didn't worked for me. Wtf??
@thefpsguy9416
@thefpsguy9416 5 жыл бұрын
nah.... - then my dev team said -
@knot4real
@knot4real 5 жыл бұрын
Would be a good idea ,if adobe spent more time with making there products work,and less time worrying about how much to charge every body, I’ve wasted a day thinking my brain was broken ,where in fact it’s just this dodgy program, it won’t drag back after a couple ,you would have thought we could just insert objects ie a forward and back arrow to drag on,.but oh no....let just tap .instead
Parallax Animation in Adobe XD
7:08
Jesse Showalter
Рет қаралды 114 М.
Ouch.. 🤕⚽️
00:25
Celine Dept
Рет қаралды 29 МЛН
🕊️Valera🕊️
00:34
DO$HIK
Рет қаралды 16 МЛН
Friends make memories together part 2  | Trà Đặng #short #bestfriend #bff #tiktok
00:18
бабл ти гель для душа // Eva mash
01:00
EVA mash
Рет қаралды 3,9 МЛН
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 835 М.
Three Simple Carousel Slideshows in Adobe XD
35:01
Jong-Yoon Kim. Professor Kim
Рет қаралды 10 М.
Adobe XD - Water animation in 6 minutes.
7:10
The creative technologist
Рет қаралды 702 М.
Pull to Refresh - Adobe XD tutorial [2019]
10:18
Jerrin James
Рет қаралды 24 М.
Parallax Scrolling in Adobe XD
23:08
Yes I'm a Designer
Рет қаралды 127 М.
Mastering Layouts and Grids in Adobe XD
10:11
App Design Tips
Рет қаралды 30 М.
Adobe XD | Advanced Techniques
11:23
Jesse Showalter
Рет қаралды 120 М.
Adobe XD Auto-Animate: From Beginner to Advanced
36:28
Envato Tuts+
Рет қаралды 214 М.
Adobe is horrible. So I tried the alternative
25:30
Bog
Рет қаралды 1,2 МЛН
Ouch.. 🤕⚽️
00:25
Celine Dept
Рет қаралды 29 МЛН