Designing Adobe XD - Episode 24 - Auto Animate Tips & Tricks

[Music] hey welcome to designing Adobe XE and look there's my co-host sneaky game today welcome we're back after after a long absence we were down at Mac's and we got some exciting stuff and today we are here to talk about it so but I'm getting ahead of myself a little bit my name is Talon wodsworth I'm the lead designer for Adobe XD and oh dude Osama that that that intro is amazing we'll get that a sec so I'm Talon wodsworth I'm the lead designer for Adobe XD and here we are today on designing Adobe XD the show Friday show where we kind of give you insights into kind of how we go about designing and building Adobe XD and how we use Adobe XD and here joining me today last second it was right down to the wire when he's gonna join my good friend mr. Michael chase he's a course of Adobe live fame the man the myth the legend here we go I was just telling someone the other day about our start live streaming how you would like dial we would like call conference each other in when you were in Paris and I was here in SF yeah just to talk about the new updates for Adobe XD like the very first monthly updates just to join you the antis and you gotta be gotta be where the excitement is anymore yeah it's just not not good enough and now we have this amazing studio and this whole this whole streaming deal this I mean what I've been doing the 3-day UX lives yeah see right and all of our friends here Jarek Jason and good to see you it's amazing community we've built so yeah so here we are as I was mentioning we announced a lot of exciting things last week at max yeah and then we tell our friends on flack yes yes since we are alive oh yes yes yeah if you haven't joined the slack channel yet I will put the link in the chat or maybe I see a doobie dives into chat so we can put a link and I will explain what this is so we have open public slack channel for all of you who wants to learn more about XD and if you have questions about XD but also if you want feedback on your design yeah and sometimes we have fun with the daily creative challenge you know there was in a prompt every day so I have some news new daily creative change starting next week next week so be ready yes some slack yes and yeah I do be like will find the link so you can join the slack channel hey Peter hey Peter what's going on yeah you were awesome ah so good you made such amazing stuff an XD it's great to see it Munir how's it going man and Derek Derek Derek how's it going everyone great to see you on the chat I'm excited to be back I feel like like we've had a we have a two weeks off of the Friday habit but what happened but so many so many so many things happened including my favorite an sment ever oh my gosh G this is I've been waiting how to animate feature so animate so yeah we just wanted today to have fun without any mats it we've got no client view some tips and tricks so yes I will announce your friends that we are live on slack thanks thanks and and you want to I I have a little I have a little surprise maybe we can start there okay this little little something I whipped together this morning so it's a day yes we're gonna be talking about auto animate have you Mathias missed you as well I have you have you used auto anime if you downloaded the update yet if you haven't is just waiting there for you a little Creative Cloud download or go update so you can design along with us so have you used on animate you want to know we're gonna be walking you through the basics and showing you some really cool things that we've been doing some things that the team here the Adobe XD team themselves have been making with it lots of exciting stuff maybe you'll even talk about showcase some of the stuff we've been seeing online people in creating with with oh yeah we could yeah so if you guys haven't created anything in NXT without animate tweet it at us and we'll do our best to to pull it up and check it out so super exciting Olivia says that oh to any make trucks ah Olivier is great to see you in on the yeah it does it's amazing so I don't know last week I don't if you caught us post keynote there's so much going on Michael I we we we oh yeah we streamed I was actually deathly ill I had to go the doctor the next day no yeah you saw that bet we made through let me through talk about auto animate but Michael made a little little project they me start dining I yes the mister the mister talent app this was amazing TV works today totally totally look at that perfect it's a perfect always that's the that's the signature that's a singer that's our thing that was actually a big debate the very first time I did the designing a whe show my wife said don't wear the hat know and everybody on the live team was like you've got to wear the hat I was like alright I got a hat one hey Kate there's Kate my one of my partners in crime from the PMT the product management team from XD Chris great to see Chris on their friend of the friend of the stream as well Nick ATS great to see you Gabriel ah dude it was so rough man it was rough okay so here we go here's the animated mr. talons voice we actually this was cool because we also announced last week if you didn't see it voice support you can now prototype with voice in XD yeah it wasn't mix it was a mix so Michael had some voice prototyping going on yeah I think I need to ask for you today and then I need to ask you something else yeah can I can show anything where is Michael okay that's it okay so I'm done she won't watch I move here oh my gosh so good and to speak I need to use the press bar hey Italian how are you today maybe it's not that hey Talan how do you feel today well hey don't feel good okay I feel alright hey Italian where is Michael right there was a each playback so good okay so I need to find a transition for this okay what was that one what was the over there let's put it on your hat yeah okay so how it works now with voice you just have to say that the trigger is the voice is the voice okay and then the comment so we say hey time or are you okay and then I would say Oh to animate very important very important he's out yeah we can do a snap I like this let's snap smile I and we do it at six because you want to see yeah okay so now to prototype you press space hey turn in how are you I'm not happy but I am so happy this is either that's not a fair representation it's not a fair representation everyone so what's interesting is how do you create this also in terms of animation so also yeah important how do you make tenant speak okay so on the screen when you land on the screen you will trigger with time something at zero seconds now you have the action speech playback and you just type the sentence and that's why I sit back I'm not happy to Michael so for the moment we only have one voice but you told me that you are working we are working on voice and an mp3 support what oh sorry I'm like giving away the game there but voice and XD is a game changer this is this is huge I mean I you know like I I have I've created decks like to try and communicate like how I would design with voice for like one of the like Amazon devices or you know any of the other like even the phone and like I you know like you know how you do it you put in a slide you have some text up next to it and you're just kind of simulating but now here you can actually prototype I actually have someone else run through that prototype as well excited oh that's good that's good and someone was saying I I love you future but it's not intuitive how to make multiple comments on one screens yet so yes you have to select multiple objects it could be hidden objects - yes that's a trick is it work yeah you just put it opacity to 0% and that's the trigger for voice so you can have on the same screen like 10 different comments yeah and we'll walk through some of those tricks today too but I have a little surprise you can show how to animate a face yes yes do they also talk about how to animate today so I'm just duplicating you see the artboard what it does is that it's also duplicating all the layers with the same names so that's how it works well I was amazed to discover that I can actually animate paths that's something I no idea how it's so nice so if you say like this that's how it works like you can just like we do or do a word gets a little sad and sad and you just add you can add new points it doesn't even matter like you don't have to have even the same amount of points there you go you knew that and maybe you're so sad that you're like depressed very depressed I'm very depressed today among go because I haven't people hasn't haven't tweeted me they're cool things have been making the other animate so I'm very sad so please tweet it all the cool things are making auto animate so and that's it so now if I you go to prototype view you select an object just this once I switch to the screen we will do it on a tab this time just for the example yep use auto animate snap 0 that's 6 and that's it so Caleb had a question he wants to know actually how far you can take animating points I don't know what the limit is yet no Caleb in your computer it's like I say we have we have some really amazing engineers on the Adobe XD team and they're doing that math behind the scenes and as far as I know that there is no there's no limit to the number of points that will transform between in fact that that's it's just true path morphing in that sense so I'd love to see how far people pushed it and this is a very simple example and I have a little more complex example that I can maybe pull up here let me see if I can find it first okay that's great and and then also so one trick that you need to to understand with use to animate is that if you want an object to appear and move so it has also the subject has to be on the first Ram so let's say we want to add a drop this is also something that although some time here Darren if you haven't tried it yet go download the update yeah you should go check it out make some stuff with us it's a big drop um no I like it here I will copy paste it's too much be placed in pasted on it yeah okay and on the first screen so I will just move it up change the opacity to zero and that's it yeah yeah easy and now it'll animate between those two states it's like visual keyframes all right so the it's so slick it's so good it's so good all right actually on that I saw I found my little weird experiment here let's this is a pretty complex I actually brought this in from Illustrator oh um so what I did was I really love a lot of the warping tools inside of Illustrator so what I did was I had my lines here and you can see they're all here named inside my layers panel so I have this lines and then I have a same lines and I used the sort of path morphing like tool inside of Illustrator to create this kind of drag this sort of like like somebody ran their finger over the screen and really tugged at these lines yeah and so I brought these in from illustrator and Dynes the skin can you demonstrate how the drag feature works so I think yes yes I'm gonna use drag right now yeah so what is I have my two lines and then I've created this hidden shape here because I want I need today an XD I need to have something to drag so I'm gonna drag this circle and then over here on the other screen I had that same that same circle and I'm gonna just show it so you can actually kind of see kind of what's going on here and then I'm going to I've got a couple of things wired up here but I'm just gonna go back to this simple example real quick so what I want to have happen is when I drag you know I want it to look like almost as if it's dragging those lines so I'm going to select my circle which I'm going to turn off the opacity in a second okay and I'm gonna drag and drop of course then select drag and it's automatically gonna choose Auto animate for me they're just super slick and then I don't really need to choose any easing but we'll just do that okay so and then of course I'm gonna I want it to appear as if it's hidden so I don't actually want it there too I'm gonna turn it off so I have those two on each screen and now that one dragged so now when I pop that open yeah to my previous screen and again I have to I'm kind of hacking it a little bit yeah but you have to be under zone yep yeah there so I have to be on the zone to drag and then I'm going to drag so there you go that's set and I was really just making some weird some weird things and again I would probably go back and add on the drag from the other on the other object as well so I can drag it back and forth so it was my drag Auto animate so now I can kind of drag it back and forth nice and this is it I was actually kind talking with with our engineers about this one this is a pretty complex case and I think if I built all these lines inside of Illustrator and then I decided you know straighter but inside of XD and then and then added all the points then it would I think it would sort of smooth some of these things out being sees a pretty amazing huh oh I see what you you know I mean for you and also it's the prototype you won't just want to communicate an idea I mean I have it I have another I have another state set up here to let me let me rewire it back up drag I don't know really getting really getting weird with it so but I actually i'm really excited i have i have a little ab little surprise here oh no this is my customized Michael J's app little applet here so here's Michael here's my little my little version of Michael all drawn inside of XD Oh drunk a nice red nose yeah oh that's a good point no no no I was just being a little taking some stylistic liberties here like the crazy direction it's good yes so here's Michael inside of X hey I true all the cynics team amazing looks look at and I have a little meter down here we can make Michael very cool or we can make him very uncool so become cool I look like you we add the hats let's see what happens oh look at that okay what happens if I'm uncool okay this is all subjective it bends on bait I should probably label that but there you go also I also wired it up as a drag here on the slider oh nice I can't even slow it down and you can really see kind of what's going on that's but yeah I really like because I like the snap so just know it's my favorite there you go Thanks yeah yeah looks pretty good and I you know of course we we can do we can do maybe maybe actually we'll do a variation of this and I'll sort of walk through like you know how we can yeah and do this maybe we do and we do mad okay and here we'll do sad alright so then I will then just copy and paste my artboard and then over here for Mad Michael let's go in here and now should we be just a little bit yeah plenty I'm gonna do the same thing and then do to do to them a little bit oh yeah looks like good but you know we need to move the eyes a little I look so mad okay so let's and then let's move our okay so you move the cursor occurs and this is just a rectangle yeah this is just a situation of wine yeah slider okay so I'm gonna do that and oh that's what nobody I went there okay okay so then I go here and I'm just gonna now wire up the drag okay here when you make and then yeah that's it that's crazies that you just have to say that's it Otto I mean Derek says don't forget to show how to create a jiff okay oh yes yes I'm gonna do that it's aa real estate and to find a website there is he's very mad alright it's good on Thursday it looks so good yes now we have mad Michael chase of course we have to wire it back up on the other side as well okay drag so now I'm dragging back he's pretty happy of course then we have to go and wire up and make him sad too which is omega s in it as well so yeah so those are some of the crazy things we could do in with Otto enemy and as long as you have the same elements on each artboard and this I had no idea like I got it for shape yeah when you shrink demonstrations but when I realize that I can move like any path any points I was like okay yeah it's getting serious yeah maybe I can show you this example yeah let's give some yep somebody was asking about the drag yeah like oh if we switch to my screen okay so that's an example where we show how I did it it's actually a more complex and more organic drag because it's a two-step drag yeah it's like this but I can go back you see the elasticity here Oh No but then if I go over 50% it will switch to the next one oh I'd love you I think what really tells us to me is the little yellow thing on the bottom there you're like oh so it's so alive on there's a question about Ryan they don't have to be in the same order they just have to be named the same and in fact you can get in some really funky situations if you just name things the same thing and you use some Z order I don't think it animates to Z order but you you can end up getting some really nice effects so oh that's yeah yeah that's a really that's a really nice are you doing any time stuff do you we're doing like a timed thing yeah so that's the tricks yeah yeah if I try to cuz that's again like the auto animate is now one component if you sort of can you can combine that so we saw you can bind auto animate with voice as your trigger and you can combine auto enemy with a timed transition so not having you don't have to have any any gesture to transition from one artboard to another and and as you start combining those pieces you start being able to create these really really amazing really convincing just really high fidelity prototypes yeah so we just showed the transition between two screens so we started seeing what's going on so one mistake I've seen because so thanks to our slack channel we still have like a lot of people sharing yes they're working we're gonna share some mad stuff here pretty soon awesome and then they have questions and so the reflect that it might have is to say okay I'm here that's my first career plus your first date my second one so if I do drag it should drag everything yeah so actually nothing will happen so now if you do so we can do tap and a classic transition so this is what we yeah you can still do and do a push left for instance push left alright I know yeah push left I mean yeah very very good but then to use the drag feature actually you can also drag the transition yeah you can enjoy a transition as well but with Auto animate in this case it won't work so why see it's like just doing a fade in fade out because again like the elements like all these layers they are not in the first screen so when you have like one two three four cards and I saw this multiple time the trick is just to group everything in the first screen okay so here and we just could this make for inside the group here sided over yeah and then just group everything so now all my elements are in the screen so when I switch the second one I'm just changing the position of the group okay and now the drug will work drug without to animate now so there's no no I can control what's going on then the the question I had if you look at my first prototype yeah is when I switch here I want this to appear after yeah you see yeah I'm from what that kind of that that's a layered interaction and so to do so you need to use time transition that's the trick you need to have that in between state which I which is I notice that the first time and this is between state yeah so here once I arrive here with my group Oh even you have the one of if the one before - yeah the three of them yep and here you cannot see but I already have the elements so maybe I can make them appear but they are already on this screen yep yep and when I transition to the artboard you're actually moving and changing opacity yeah so that's that's the trick it's so slick and one more trick that I want you to share oh yeah so how to do the weird elastic stuff yes yes so it's so slick it's a two-step transition the first one here actually I do dragon oh to animate but only to 50% of my projection I judge I don't slide yeah and then when I release so when I'm on this screen I say directly move to the next one totally like move to the next one with Auto animate that is no gesture that you're tapping you're just waiting for it so how does it work if this is one two and three I am on one I'm transitioning to two if I release here if those two and three plays through that's so cool and then you did the same thing with the green now right from the government brown to the goose and send me the green there is one more trick that we like this one yeah we zoom in so you can see yeah so if I click here you can pin the scooter so it's also enough to animate feature actually although nothing is moving so I can use the transient yeah yeah but that's something also that I discovered that is super interesting without to animate is that you can animate the mask the mask says okay I'm just gonna say that that's that's one of the tips that I want to make sure we covered today is you can animate the mask so here actually the blue scooter is already here you cannot see it can't see it because it is inside your mask it's so yeah so it's somewhere here it's not this one or maybe it's this one but what I'm moving is just a mask and to move the mask so let's see if I can find a mask here the path you see yep yep I'm moving the mask now this is what I animate that's so cool so I just use like we call our stuff in Photoshop to get three PNG in the same size you just layer them and you can just fence your scooter yeah yeah that's so cool yeah there's even like like any object can really be animated right and so even if the object is hidden even if it's a mask even if it's inside of a Pathfinder like they need maybe you've done all Union so like I'm just thinking like me with me we can do just a little experiment from the ground up so let's just let's just play with something here let's just make like two shapes and I was inspired by one that I saw on Twitter so we're gonna try this out all right yeah so I'm gonna make a moon transitioning to a Sun right so what I'm gonna do I know which one yeah so I'm going to subtract those so I've got my moon okay so that's the best finder so that's the Pathfinder right and if you double-click in right you've got those two shapes those two shapes are still the right and what I want to do is when I tap the moon I want it to turn into a Sun so let's do this here and now again like I'm not going to swap different shapes I'm actually just going to animate that circle out of the subtraction now I have my son right it's still inside that masked subtraction group right so it's already hidden so let's try this out let's just see how it goes let's do let's do just prototype let's just do a tap and let's do Auto enemy and let's snap because we love this now guess we kept this enough and let's do a little longer just so we can see it happen and let's see what let's see what both see what goes down here so it's throwing everything in your ear thanks crazy it's so good and actually I want to try the windup who's actually having done the wind up in a while I'm either why nobody's the windup yeah let's so snap I get it snappy those they're just snaps in and cazilou comes back yeah so it goes ready to be over and comes like so the wind up kind of yeah I kind of like starts and then goes does that make sense okay so like camp pulls back and then better than you yeah so let's right now it's nut but do you oppose it doesn't I talked with it's hard to tell on that one that's not a great example let's let's try let's try the balance let's see what happens oh that's cool Oh bouncy school oh okay but Chrissy doesn't quite look like a son yet so let's let's add the Rays around it real quick dad some rays happening here and I saw someone in the chat was asking and I just try like can I animate gradients mm-hmm so the the gradients actually and cars and stuff they won't animate that yet but it's a really hard problem but we're gonna try and do it yeah so should add the flash team I wish it was in flash it was indeed in flash I guess but it's uh so what it does now is that it will just display the new color so if you do like red and blue you won't go through purple which is just animating right go to the next on board and show Oh what I'm signing now I'm gonna design the race here and we want the race to pop out of the Sun all these things sometimes Oh to animating in a push menu okay from hunt canvas gives us light flickering oh oh you know what um I know what that is hold on a sec I I ran into this it was double check all your transitions it might be there might be something off I'm trying to I ran into that and I'm trying to remember how I found the record well yeah well I found I found like what it's it's just like as you're juggling all the elements and all the different all the different transitions and everything like that yeah what happens is like one thing gets turned on and yeah I'm gonna remember in just a second like what what how that I fixed that the first I'm gonna do this I'm gonna animate these these Ray's popping out okay group that and I'm gonna copy that I'm gonna paste it over here now Sean sighs hey I have a new feature distribute tweets angle corporate see I was trying not to think about that even though that would have made like yeah that's a mm that's a good it's a good idea yeah anyone from the XD team if you're on the chat today code you're gonna watch this later there's we should we should have this this feature kind of like you know repeat grid instead of though it's in a circle in a circle what would you call something like that shoot as you straight or team yeah opening up old wounds so nice so nice okay yeah I played the opacity and just scaled it it's kind of it's kinda yeah it's kind of it's still hanging in there comes from tobacco yeah that's from the back it's not bad it's a good start I could there's I think there's a couple different maybe you can add like a circle a white circle yes that's right yes that's what we need to do we need masks we will just grab that I'll do that we'll put it behind here here oh yeah there it is look at that sleep slick I wanted to show you one other one that this is actually um you know like we've seen a lot of like you know like you know app designs because that's what XT was made to do is use mobile apps but what we end up doing a lot is making presentations he has a team oh and Kate he was on the stream she and I had a session at Max and we actually made a presentation he's ah he's asking can we only applied the bounce to the race and snap to the Sun so yeah not yet yeah I'm one about to another one it's not per object it's all the object but if I wanted to do that I could do some of the tricks that Michael was doing time transitions where you do first this yeah and then you time like you say okay yeah yeah Derek he moved to the side maybe you can show it yeah we can let's do it I should go back let's go check it out let's see we do okay so let's go he'd the match Michaels transition yeah Michaels transition it let's bring this okay let's bring so this you the first one yeah I mean the first movie with your layers you can catch it yeah it is this group there okay this yeah it's there but there it is and it becomes this yeah so input 0 seconds and you want to bounce so bounce for the rebounds for the raise and we're gonna do something else or snap or for this then okay let's check it that's right that's right now here we go that's pretty good easy that's that's pretty that's pretty slick I mean that's one of the things and I've talked about this before but one of the things about XT and I really had this idea like design at the speed of thought and it you're really trying to help you give you the tools you needed to do your work you know you know great design drawing motion interaction because you had them all together then that freed you up from having to jump into different applications or copy and paste a lot of elements or go back and update and come back into another app if you had all those tools together the idea was that you could push your design further faster right and you could keep just seeing kind of like oh let me try this let me try this and and that kind of goes into the details of the app as well like Pathfinder right the if you guys you notice that even like the details of the Pathfinder that it's non-destructive but those pieces are still there and they're still live for me to edit right that I don't have to go do undo undo undo or have to keep a separate copy somewhere so good right like like all of that that that sort of you know like those little things that would slow you down inside of Illustrator or Photoshop we really want to change clear the deck so you felt like oh what if we tried it this way what if we did it this way like it's just there and it's and it's ready for you to try so yeah that was really yeah so you want to - sure that you make presentations yes in your team I'm gonna do one more thing cuz I always following just you want to rotate say on a rotate it so pretty cable designers but let's see if this happens I don't know if this is gonna do it okay yeah maybe we should ask that quiz in the chat has animation background maybe maybe that's a yeah flash designer or maybe using After Effects what would you see it it was just too fast for here watch this area oh that was fast that was fast let's let's let's slow that down a little bit let's slow down a little bit let's let's do like let's have it do like six seconds so or five seconds let's see what it does Osama has a animation background here we go that's oh my gosh that's not all right sir yeah that was pretty good and again that was actually a little detail that the engineers worked really hard to do was we actually to go back in and look at how we defined rotation so that we would it be able to actually make that happen so how do you do that so now you can go all the way to 360 before in a lot of other programs you reset back to zero but now you can define 360 so that we can animate from zero degrees to 360 degrees does that make sense yeah it makes sense so the engineers would have to probably know much better but just you know just so we can do it's one we can do here we'll do two rounds watch this which could be eight okay okay yeah let me let me do yeah I don't do this and then I'll do I see what you mean you can type 360 change rotates five seconds okay here we go let's try it again good to know okay I might this is easy but that's right I said amazing yep yeah cool just keep that thing rolling just can you do it like a color spin rotation like the timer dial type of thing yeah yeah I think we I think so okay let's let's like a like a yeah like I like a the team has done this um actually the car noise yes yeah yeah the color or it's inside of a mask yeah that's the quarries inside yeah that's that's really cool too so we work you know let's do this if we could do so let's do our little like your counter bar here let's do and then we'll do a big old gradient here your ingredients this one ball a good eggs digression a good xt gradients so if i wanted to again like we can't wait to do some actually Marshallese asking if we do mac version of things d get the drag bar for values when you drag to change it on you again oh that's a good question hmm I don't know I don't think it's come up Marshall you could maybe suggest that the on user voice so yeah if you visit the be XD choose offers.com I'm sure someone's good seeing this feature so you can either join the conversation also vote for this feature and maybe the team is already talking about this so maybe it's in the backlog and ya know yeah so here I'm actually just gonna kind of trigger this so we can see it yeah here we go it's very subtle I'd have to I think it would do do some save your changes yep okay you need to work on the musk yeah we're gonna the mask and again like oh it's actually that's what we'll do well we'll animate the mask here watch this this is what we're gonna do we're actually gonna almost like it's like gonna get progressively from here cool that's that's pretty nice actually and I sort of changes gradient like as it's growing that's pretty good that's pretty good nice oh yeah so let's show I wanted to show this presentation because I didn't cool stuff with timed on this presentation I was very I was very happy about this so this is from yeah Kate and mine presentation session at max on collaboration course a big big topic that's actually the x-wing yeah so and then yeah I wanted to sort of introduce you know okay is Kate no yeah right and I had all these sort of presentation elements and then here's where the fun starts that's good they're a little talk track yeah you took a lot you can say anything that you do yeah yeah so yeah you know I'm like you can kind of and we were really using these for gun like presentations it keeps kind of like have this nice little timing and then again there's we're using some illustrations as part of it it was great yeah it turned out really nice and there are you some other really subtle thing to share also yeah your preview Zapotec yeah I can export a PDF just sure whoa okay so we were doing you know you can animate images that you bring in her masks and I'm sort of combining now a bunch of things you know traditional transitions here and I started doing some things where I actually ended up having things happen that I didn't realize and I had these elements and you can see on the screen help this subhead and this little bar here you play with a pocket well I didn't even I was just copying and pasting let's see where is it and they started animate and I didn't even bother look right there you see it like I was like oh that totally works you know we'll see it again so right I've got those there and then and I was just because I was copying and pasting and tweaking my slides and it just like you know just happened so yeah happy little accents and talking about this like watching your presentation I think you're you shown your sample mm-hmm a responsive text oh yes yes I didn't know that you could animate also this the tech side yep let me find that no that's the actually this okay so I was talking with my team about your a responsive texts you know I was talking to - some of our type team as well and I wanted to kind of illustrate kind of the rules around text and what I did was end up building this prototype to actually show like again the responsive rules around text as it goes from wider to smaller so sort of keeping good proportions scaling proportionally you know to make sure we have a good line length and and I was using Tim Brown who's amazing type designer here at Adobe using some of his words from his book and this was really inspired by his book about responsive typography and responsive layout because haven't checked it out you should go check it out on a list apart yeah so I made this little again this little visual demonstration so of those rules okay so you just changed designs so what I did here so here I have my and we'll just make it again because it's always fun so I've got my artboard here uh-huh and then what I want to do is I want to show that when you go down to a smaller size I want to show the rules on this and so what I'm doing is I'm changing the text box size uh-huh but I'm also changing the size of the type yeah that's go extreme so they can see yeah take some of that down okay and then take some of that and I was moving this up as well and then I'll take this and I'll move the bar okay so then tap Auto animates and of course use the snap because we love the snap and just for fun and also going to do it back because I love doing that so when we go mama yeah it's so good can you see the text at the inlet yep deciding on which world where where's the brake line that's cool yeah I had no idea I know and so like I'm still figuring out like like all the sort of cool things that we can do and I wanted to share if you guys haven't seen this you should check it out or in turn slash now official official higher Oh Sam what's up Sam yes he made he was something crazy amazing well he's made some amazing movie and he made that one let's see where he made this real yeah we should play the wheel we let's play the real I don't go into a full-screen mode here and you posted this on Twitter so you guys can go look at Sam Anderson's account check this out this is some of the stuff that we've created as a team using auto enemy yeah Owens crazy not this one this one oh my gosh I don't want to know before the free check oh so nice so nice that one is really is the yeah the wall it's good but a little does little those things look at those oh my gosh that's great so good maybe we should show how to share you know like we wanted to show yeah let's do that did you do that let's do it okay Michael has this really amazing yes so I did some research for you so let's say you want to share this on Twitter Instagram you can't animate the type yet but I you can do something like you're you're mentioning in that example for the clockface with masks yeah well yeah yeah yep you can have a - like two columns of text inside of a mask and you can auto animate them inside the mask we can show it I know if we don't make it today I'm is all we can post an example of that yeah Brian we can show you do we're gonna show you how to share gift yeah so there are some social networks just Behance where you can directly yeah and in a video like you don't need to create a Jif but I think that dribble is working on this but it's not the case like three well you have to applaud jiff but I think they are working on handling mp4 so it's out there they released it just I think it's just oh it's just for me ok it's just not everybody has access to it yet okay and so let's see okay it can be useful yep okay so the first thing you want to do is to record your screen so if you're on a Mac it's easy because it's part of XD if you're on Windows it's part of Windows 10 I think the shortcut is the Windows key and gee I think but you can confirm in the channel but the idea is to record your screen so on Mike it's easy I just start and when you record a preview on a Mac wait for two seconds don't do directly like I click and you start interacting because you it takes time to load the recorder so I would just click wait here we go just recall my demo and keep it short it's better to keep it under 10 seconds okay I will explain why so movie tests okay bass bat test here we go so now I have this mp4 one option so maybe I should show the old school option what do you think oh all right sure show show yeah I show the old one so in your in your opinion what is the old school one well I bet six months ago I I may be cheating because I use a gift capture program on my desktop but with Creative Cloud I don't even know where to start I would have to I think I would take it into After Effects and I would and then what export the PNG sequence and then put it in Photoshop and then export the gift that's how I've done it in the past this is a while ago now again like as anything in our programs everybody's got their own way to do things so I have a picture open right let's guess yes all right yeah it's good picture yes so what you can do x3 is trying to drop a video on Photoshop you don't have to export it let's spin when did thank you added I have no no it's very sensitive maybe eighty ok and then once you have the video so you have to save for the web so I know the shortcut where I don't know where it is in the menu I it's a following legacy legacy for all people elderly legacy people like me yep so use the save for the web legacy and then you see this this yep yep yep you're great it's doing it because you will get is a lot that's the thing is that for huge video I mean statues but like for video files like this if you as Photoshop to create an animated gif it can it will just like take a lot of resources you have a lot of control because that's what I like and control the comparison gold yes I want the blue to be the exact blue have in mind and I mean this is for video right like that's that's that's the legacy part of it not for you know all the hip UX design export needs that's the new stuff yeah so if I start playing here actually directly in Photoshop it will start moving in a minute you see so I see like each frame you can control it with him and then I save the JIT and then I was like okay is there another tool and I found something online that I really like it's terrible designs just does it for us all that for you you know hey now how's it going the worst logo ever but it works very well so video - chief Carter it's both easy easy easy easy like Kenya it's actually my nickname for my son is named Ezra yeah I call me is easy easy easy g.com and then you can say choose file and upload and that's it yeah so it will create the G for you so it's not a matter bi service but I really like it it should create it so in the cloud but what I like is all the options oh look at that so you can automatically resize it nice you can control the framerate so that's why I say keep it under ten seconds so you can keep it 25 beautiful frame rate very nice I think that to eyeball is exact and phrasing 800m and boom you convert it again and there is a cat which is super cute hey why bet we could animate that next day yeah it's not easy though I know it would take some more animation like take some work but we could totally I know how's it going today Sam rats look at the Krejci it's a jiff nice job nice let me be great and you go if you can still optimize oh you can resize so once the difference ready okay so now it's six megabytes okay and I say okay optimize it so you have different settings like low CG if you say okay optimized and again swing the cloud cat I can exporting I wouldn't be great though there was like a way to you could just get an animated gif like out of XD like of your animations even juniors are watching it the engineer well actually or go everybody right now hey who's watching them go to our user voice Adobe XD user voice calm and let's vote for that it's both that up right now if it's not there like put it on their gift export from x4 automate automate animated gif export for MXT it look the good job they are doing maybe you can connect this bad story good it could be the cloud X Oh what if we plug in oh speaking of plugins that's actually a really good idea so next week just to give a little plug next week on designing a Adobe XD we're going to be making a plug in live along the stream alright we need to so anyone who's interested and you don't have to be an engineer or coder or snow to be the first time we show that we I'm gonna bring on Peter Flynn who's one of our lead engineers and he and I are gonna make a plug in and show you how to and you guys can make it along with us show you how to make a plug in for X T and that that'll be next week same time twelve o'clock Pacific on Friday and we're gonna guess had any any good ideas of plugins like like gift exporting gift why not that could be I'm gonna bring that up I'm gonna toss that into the mix that would be amazing and then we're also gonna then post it on get so everyone can go and actually download it and install it in XD so that might would be on Friday 12 p.m. next week like every week we have this show with turning and the XD team it's time to say goodbye actually so thanks everyone for watching and stay tuned because we all miss exclusive new show today what is oh really yeah with Irene and David they're both students and they will own the show ok it will start in five minutes and they will show you how to make your photos more in Star Wars II mm-hmm using Lightroom mobile so oh that's great if you want to learn more and I stick around yeah how to create enhance your pictures on your phones Android iOS Lightroom mobile is free download it now and watch Irene and David in about yeah yeah five minutes yeah ambiance that nice - life and also reminder so next week we start a new xddd creative challenge okay it should be announced on slag you will get on joy in a second you'll be in there will give you feedback as we go exciting each what we call okay thanks stay thank you always it's always good and see you all and thanks everybody for joining us and we I mean it's Syria [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music]

Channel: Adobe Creative Cloud

Views: 29,025

Keywords: UI/UX Design, UX/UI Design, Experience Design, XD, Adobe XD, User Interface, User experience, Design, How to make an app, app design, web design, Digital design, Adobe, Adobelive, Adobe Live, interaction design, UI/UX tips

Id: RNXpEQqbWRM

Length: 58min 6sec (3486 seconds)

Published: Fri Oct 26 2018