Adobe XD Masterclass – Episode 38

[Music] [Music] good afternoon everyone and welcome back to another adobe xd masterclass my name is howard pinsky senior xd evangelist here at adobe and i hope you're all doing well on this friday afternoon we've made it through another week in 2021 if you are tuning in live here on behance let me know in the chat who you are and where you're tuning in from we've got cody and laura and matia cara and henry on a heat parshall golden rose who else do we have in here jack is in the house abdullah great to see everyone new faces old faces hope you're all excited for another adobe xd master class if you're new to these things these are a little bit more advanced than some of the other classes especially the dcc's we've got anita from toronto hometown great to see people from canada and toronto marshall from india aubry aubry's in a creative slump well hopefully i can help with that and you know in these master classes i definitely dive a little bit deeper than i typically do in some of the daily creative challenges which i am preparing for another one next month i'm going to be hosting and i have have some fun ideas and actually maybe i might sneak a few things in today's class it's going to be a lot of fun so what do we have going on for today let's go ahead and hop over to my screen if you all miss the news xd 36 is now available not a massive update because typically the updates at the very beginning of the year are a little bit smaller we were we just came off holiday prioritizing the road map for 2021 but we did sneak in there a little bit of a prototyping feature and it's definitely definitely not going to be the only prototyping feature of 2021 we do have some fun things coming so let me go ahead and grab some water super quickly my mouth is super dry all right so the new feature in xd36 is the ability to animate dashes and gaps of your borders so here's one example that i posted on twitter right you can do like a progress meter or a progress circle going around then you can take that to another level and do something like what we're going to do today which is several progress circles right just like that and we're going to get a little bit more advanced with this if i i just posted this just a few minutes ago just to promote the master class this one here if you take a look at this blue circle the quality is not very good on twitter it kind of goes around and then there's a little bit of a shadow now by default it cannot do that right you can't go past the beginning point but there are workarounds and that's what i love about these master classes and we kind of go a little bit deeper we find workarounds we get creative and hopefully we get your creative juices flowing cara says that is fancy i agree so let's go ahead and hop over to adobe xd henry says i'm designing a fitness app there we go perfect it's like this master class was meant for you henry alright so we are in adobe xd again xd36 if you want this feature make sure to hop into the creative cloud and update and if anyone has questions throughout this hour definitely throw them in the chat i will be i will be looking over and answering some someone's asking about the dcc's next week so on discord gus posted a bit of an update that we're mixing things up a little bit i believe there's gonna be one set of two weeks of a dcc every month for xd and then the other two weeks are going to be a rerun of previous ones because many of you haven't seen some of the previous xd dccc's so you know we're going to kind of get those back into the the public eye and uh you know you can still participate in those but if you want to participate in the two week challenge live ones then you have a whole month to participate which is great all right so we're in adobe xd and we are going to start with a nice large iphone xr xs max 10 whatever you however you pronounce it and we're going to start just like this we're starting nice and blank and we're going to start by building out the container that will house the fitness application that we're working on again it might kind of hint at the dcc that i'm planning for next month so pay attention all right so on this artboard here i definitely want more of a darker feel so i'm going to start very simple i'm going to select the entire artboard and in the properties inspector to the right choose the appearance section and i'm going to set the the fill let's just go you know a really pure black not completely black but just a little bit above there we go and the heat says quick unrelated xd question is there a way to make a button go to a section of another screen as opposed to the top of the screen so i don't believe so at the moment anchor links which is probably what you're talking about goes to different sections on a single artboard doesn't at the moment go to sections on another artboard maybe in the future but not at the moment all right so we have our artboard looking pretty good and now we want to start adding some content so i'm going to grab my rectangle tool shortcut key r and drag one out right about here this is going to be the header of this you can imagine this is a profile potentially right and we might want to round out the corners a little bit to give it a little style now if i rounded the corners by pulling in one of these handles it's going to round out all the corners and you may want that in some cases let's leave it around 42 but you may also not want that in some cases so you can unround out some of these corners either within your properties inspector right here to the right you can click on this icon here and then you can enter in specific values for specific corners or for example if you want to just completely unround is that a word unround i don't know if you want to unround the corners of the top and the top top left top right right you can just hold down alt or option and drag it back just like that perfect all right gary welcome gary uh i've got a question xd mentioned some exciting prototyping features in coming in 2021 give us a hint ah gary great to see you by the way i wish i could give you some hints but i am definitely not at that level where i can follow andrew shorten on twitter all i can say i've been playing around with some of them and uh yeah it's gonna be a good year especially if you like prototyping features in adobe xd but that's all i can say i wish i could say more but you know follow us all on twitter and when the time is right we will definitely you know let you know all right so we've got our header container at the top looking nice and if i hop over to finder or explorer on windows i've got some wonderful neon images that i want to use i'm on a neon kick lately don't know what it is but neon is wonderful so i've got this fun image here i mean just look at that look at those colors right drag that directly into xd pop it into that particular container and we now have our header looking great right perfect so a few more things we might want to add in terms of you know the containers for this particular experience and we'll get to some icons at the top in a moment but right here we might want one a profile picture of this particular user and maybe down here we might want a container to fit some of the fitness activity sections or elements cornell is asking what are you creating in today's episode so we are creating this there we go so we're kind of exploring the new animated dashes and gaps in xd and we're creating this fitness tracker or challenge whatever you want to call it and we're going to look at some advanced tips and tricks as well all right so what we're going to do now is we're going to grab the rectangle one more time i feel like half of my episodes are just all using rectangles all right pop that into place let me zoom in here so we can see what's going on and i'm going to round up the corners of this as well we're going to stick with those rounded corners right about there let's go 18 pixels looks pretty nice and then for this one we might want the user's profile picture now of course we could go ahead and jump back into finder grab an image like this one and pop it into place or and i know many of you know exactly what's coming you can refer to the toy faces i i cody probably has a link for toy faces i absolutely love this set of avatars and i think that the whole entire set was ten dollars when i purchased it i think it's it might be still ten dollars but there's just some amazing colorful diverse faces and you just pop any of them directly into xd and if you're if you had them in your library they're gonna come in linked so if they do update in your library they'll update on your document now of course if you don't want that link you can always right click and press unlink thank you cody appreciate that all right so we have our user right here looking great and we may want a little bit of a border not just on the inside of this particular avatar but also on the outside you know if it's a social media application they may have borders to indicate whether or not this person has a story right and i also did post a little bit of a hint of a story feature or story design i've been working on for next month's dcc on twitter so check that out as well so i'm going to add a bit of a border on the inside of this avatar let's go ahead and set the color to black and then just drop the opacity just a little bit to give a little bit of depth nothing too crazy just a little bit and then on the outside of the border i don't want the border to be perfectly aligned with this shape so i'm actually going to duplicate this let's go ahead and turn off the fill and i'm going to enlarge it from the center now you can't see the border because the opacity is very low so i'm going to change this to a nice bright pinkish red just like that oh so henry's asking have i got my toy face yet i have henry right down here i haven't put it on my background yet but oh it's large look how big these are it's me it's me as a toy face look at that isn't that fancy i don't have my glasses where are my glasses i don't know can't find my glasses they're around somewhere but it's me i love it he did such a great job i will incorporate that at some point so i've enlarged this shape and obviously it's looking weird right and that's because the rounded corners remain the same as you're enlarging the shape and visually a larger shape needs more rounded corners to match the shape on the inside so i'm going to just grab this and bring this in a touch and that looks a little bit better i'm going to shift this up a little bit that's looking good right about there and maybe i can just bring this oops bring this in a little bit and just tweak this like that there we go everyone's loving my toy face i love it too it's wonderful all right so we've got our avatar looking pretty good it might be a little bit large we'll see i'm going to go ahead and group these two elements command control g and call this avatar wonderful all right so now right down here behind this avatar we want that main container that's going to house all the information about this fitness application right so i'm going to grab my rectangle one more time there's the rectangle again and i'm going to draw one out like this going down the artboard i'm not too worried about how long it is we can always adjust that a little bit later and i'm going to make sure that this particular container is behind our avatar so i'm going to drag it behind i'm going to name this container and i'm going to just like i did with the other elements around out those corners let's go for 24. that looks pretty good and i may want we have a lot of room up here so i may want to actually just grab these elements and bring them on up and just maybe rearrange this a little bit all right so we've got our container now of course we're going for a more darker feel we love this neon vibe right and what i want to do for this particular container which i'm going to make a little bit longer just like that is you know darken a little bit now there are two ways we can go about this one we can choose the fill set the color to black and then maybe decrease the opacity a touch right maybe we can even brighten this color just a little bit right it's okay right we want to get fancy with this because of course we do it's friday it's fancy friday as cody says let's get fancy so i have the color set to black i'm going to go ahead and enable a background blur right down here at the bottom of the proper inspector just like that and already it's looking okay looking a little bit bright possibly so i'm going to drop the brightness a little bit and i might want to bump up the blur and see what that looks like and what i love about background blurs is it takes some of the colors and some of the images and elements behind it and it brings it in but it also blurs it so that it's not too difficult to see some of the elements on top you know if i were to take this background blur the amount slider and drop it down you know it's it's okay it still looks okay but if you have text on top of it or images it might cause some issues with accessibility right so bumping that blur all the way up to 50 has this nice diffusion so it looks really nice so i might leave it at this but what i might want to do because we have a very dark container on a dark background is just add one more thing to help separate it from that background and that's going to be a border now of course you can go ahead and play around with the the color but what i like to do in this case especially when it's a dark color on another dark color set the border to white then actually bring down the opacity quite a bit somewhere around i don't know seven percent possibly there we go so someone's asking what's the best tool for designing 3d illustrations like the toy faces to be honest i don't know i know a lot of people use blender a lot of people use cinema 4d which is included with after effects um there's there's some then there's like professional grade ones things like 3d studio max or maya zbrush is also fun but probably not great for things like this but i'm not sure what he uses but maybe you can ask him on twitter i'm not sure all right so we have our container looking pretty good i may actually want to one thing you can also do is bring up the effect opacity right here at the bottom and what's that gonna what what that is going to do is bring in some of the original color from your fill so in this case i have it set to black so if i increase it it's going to bring some of that black back in of course i go if i go all the way to 100 it's going to be pure black so just a little bit just to darken it even more and that looks pretty good i might want to darken the background a little bit as well there we go maybe i'll brighten this just a touch honestly i can spend hours just obsessing over these very small values and aubrey just nailed it the little details make make such a difference and seriously i spend literally hours just like tweaking small little colors until i'm happy and then at the end of the day we're never happy right it is what it is all right so what we're going to do next is we're going to add some information about this user so with my text tool shortcut key t i'm going to type out maria make this a little bit larger by pulling on that handle and i might want to get a little bit fancy with this type face not too fancy but just a little bit fancy so we're going to go for let's say josephine songs it's a pretty fun typeface and i might want to fold both looks okay change the color to white so it's nice and visible you can also play around with the character spacing line spacing if you want to pop that there and then right below we might want one more text layer to maybe indicate where this user is from so one more text let's go for toronto ontario now because this is secondary information we definitely want this quite a bit smaller so i'm going to drag this handle down and usually on secondary information or subheaders whatever you might want to call it you drop the weight as well you probably don't want to go something like light it's gonna be a little bit difficult to see especially if you press play it's not terrible but it is a little bit difficult and let's try regular not bad and i might want to also drop the opacity a little bit you don't want to go too dark because if you do something like this then accessibility you don't want to deal with that so maybe somewhere around 50 if you press play that could work right we're going to leave it at that and we are going to move on to the good stuff actually one more thing before we move on to the actual yeah toronto i can't wait to actually travel again and go back home to toronto but uh before we get on to the actual progress circle we might just want a button at the bottom of this container that allows a user to take an action so for that i'm going to grab my rectangle tool one more time drag one out make sure it snaps into the center of this box and because we're going with rounded corners for many elements on this design i'm going to go ahead and just round them out completely and what i want to do now is start talking a little bit about assets start talking about components and states and that sort of thing so we've got our button looking pretty good and now at the top we also started to define if i dive in here some of our colors that we're going to be using throughout this project we've got this nice reddish pink color right and i may want to bring this color in to several elements so i do have this selected i'm going to go down here to the bottom to my libraries panel and this is where you're going to find not only your libraries but also your document assets which is the default view when you do go to this panel and you have your colors your character styles and your components i'm going to press the plus button beside colors it's going to add that pink directly there so now if i go down to this shape over here i can simply click on that click on it it's going to add it in it'll make it a little bit smaller like that and then for the inside we want some sort of text so you a user can perform that action so with the text tool again let's go ahead and type out challenge maria this is a call to action so i am going to bump the weight up to let's try bold see what that looks like i definitely want to make this quite a bit larger i feel like 24 might be too large it's not bad i might want to drop it just a little bit maybe 22. and what i stress every single time i'm designing because i love designing very much zoomed in as you can tell right here this button is basically in my face sometimes i'm even closer is you know you lose track of the perspective you lose perspective of what the design actually looks like so when you're zoomed in either press the play button right at the top just to kind of see everything how things are looking or command or control return that will also launch the preview uh shibley's saying it would be great if xd had the device prototyping to see how the screen looks on different devices so okay so i think what you're meaning is you know when you press play at the top you would like to see it inside of like an iphone or an android device that's definitely something i would like to see as well and i believe at one point don't quote me on this i believe at one point somebody internal was exploring that i don't know where it is in the process of being prioritized but you know there are definitely things that are more prioritized on our roadmap but it was being explored at some point but you can also you know plug your phone or tablet directly into your computer and then see on on a live device see how things are looking all right oh someone's leaving i have to go see you later great great uh great hanging out today all right so again just preview see how things are looking and you can also you know have this off to the side and then as you make changes it updates live on that preview over to the left or right wherever you put it all right so we've got our button looking pretty good what i want to do now is turn this into a component so that i can use this button across multiple screens and also be able to keep it up to date so i've gone ahead and selected both these elements i just held down my shift key and clicked on both of these layers and then in my assets right over here to the left i'm going to press the plus button beside components you can also do the exact same thing within the properties inspector to the right now once this component has been created again it allows you to keep these up to date and this over here is the main component it's the one with the solid green diamond and if you don't know where that main component is if you have an instance let's go ahead and duplicate this artboard this over here is an instance of the main component which is a hollow diamond right so you can right click press edit main component it'll take you directly to that main component and you make changes so if i did decide to unround out these corners right over here it updated that as well which is great and you can also create additional states now this is a mobile device so hover doesn't really apply but just for the sake of showing you how this works if i press the plus button i can create a new hover state right and i'll keep it very simple i'll just maybe change the color to a little bit darker and now if i go back to the default state press play and then hover we've got a hover state right and let me go ahead and create one more state which we might want to use and this might be an outline stage and for here all i'm going to do is i'm going to turn off the fill set a border color to white and then maybe increase the size just a little bit and now we have a outline state so this could be like a secondary button for example now in this particular case we may not want to use it or what we can do is maybe we can make this one smaller obviously the text has to be changed right maybe this could be challenge and then we can duplicate one over and switch over to the outline state and then you know have the secondary button there but for now we're gonna keep it as is all right so now we can get to the good stuff whoops don't need to save it right now cloud document it's saving in the background all right so right over here what we want is we want a few progress circles so that we can track you know fitness on a day-to-day basis and what i especially want is to be able to interact with this particular progress circle using components and states so i'm thinking we might have three different circles and let's go ahead and just start creating almost like this guide so right over here you know maybe we can use this yeah we'll use a different color maybe let's sample this color but also maybe we'll just pull it out a little bit just like that right and then this might be for steps i'm going to make this quite a bit smaller now since this particular typeface is a little bit more on the fancy side a little bit i'm going to actually just drop this and switch it over to poppins which is a little bit more traditional slightly more traditional and we'll go for maybe medium it also has a few extra weights in there so this might be for steps it's looking a little bit small maybe i'll bump it up to semi-bold there we go yeah it's still a little bit small all right that could do so that's for steps i'm going to make sure to group these call this steps duplicate this over and then we might want exercise and this one we're going to shift the color to more of a purple and of course we can change these colors later on as we need to and this one is going to be maybe your move goal and maybe we'll go for a nice blue for this one perfect and i'm going to change the name here and then snap it to the button right there all right let's make sure these are all aligned by hitting the distribute horizontally button right here at the top and that looks pretty good all right so now we can use these colors to start creating our progress circles right here at the top now they're going to be made up of several different elements and we're going to start with one probably the largest one which might be steps and i'm going to grab my ellipse tool i could grab my rectangle if i really wanted to but we're going to start with our ellipse and draw one out we're going to make this nice and large because we'll be having three progress circles inside of this particular section right there we go perfect now all of these progress circles are going to be simply border based so i'm going to turn off the fill and we're going to set a border we're going to go ahead and sample this color that we've been using here but what i also should do is just select these groups and in my assets just add all these colors at once right pops them in there very nicely so if i do have this shape selected and i want to apply this as a border i can simply right click on that color and apply as border i'm also going to increase this quite a bit so we have these nice thick borders perfect okay so that's the first one that we're going to be using for steps now there's going to be two for every single one except the last one we're going to talk about that in a moment but for every single one there can be basically two shapes that make it up an inactive or unfilled version and also a filled version so this one here is going to be let's say steps inactive and what we're going to do is we're going to just drop the opacity to around 30 this is the part of the circle that has not been filled in yet and this is going to be an active part so i'm going to duplicate this command and control d and set this back up to 100 i'm going to change this to active and i can grab these and put them into a group and just call this steps just to keep things organized all right so we've got our two different shapes right but of course currently the in or the active is overflowing and filling the entire thing but we want to start at a position where it's not filled in yet or it's just partially filled in and that's where the dashes and the gaps come in so down here in the properties inspector we have the size of this border set to 18. but we have the dashes and the gaps set to zero what we're going to do is we're going to increase the gap quite a bit because essentially what we want is we just want one little line that will allow it to fill in and we want basically a very large gap a gap so if i do something like 1000 it's gonna almost look like nothing right got the little tiny sliver right up there and that's exactly what we want and if we start increasing our dash i'm going to hold down my shift key and increase it like that it's going to start filling in right wonderful now because we're going with this very s you know curvy feel all the rounded corners and everything we might also want to pull that in to our dashes and our gaps right so right down here i can go ahead and round out the cap and now we have this fun looking really smooth you know progress circle that we're starting to build out perfect so steps is complete and i might er i think i'm okay with the the size of this we're gonna see once we add the other two we might want to make some tweaks now for the second one i can duplicate this entire group command control d and this is going to be exercise i'm also going to dive in here and change the names or what i can do is i can just have active and inactive i may not necessarily need the repetition of the layer names right perfect now for this one i'm going to go ahead and hold down my alt option key and my shift key and scale them both in just like that right and then in my assets i do have these colors saved so i can right click apply as border and there we go it's that simple right and we're going to do one more let me actually bring this in just a little bit more and we're going to duplicate this is going to be move perfect and we're going to bring this in assets right click apply as border so we have a few of our progress circles looking pretty good if i go ahead and press play at the top okay there they are looking a little bit large so i'm actually going to go ahead and select all of these groups maybe bring them in just a little bit just like that i can also group the entire thing and maybe bring this down to 200. oops let me turn off responsive resize in this case it might be two i don't know that might work actually possibly or do we want to go a little bit larger maybe let's go for 220. that might be a little bit better all right so we have our progress circles right and what i'm thinking is we want to get a little bit fancy with maybe one or two of them maybe the move one for example we might want it to go all the way around and then kind of overlap and you know kind of you know if you're familiar with the apple fitness tracker on your phone right if you've moved or stepped or exercised more than your goal it goes around and there's a little bit of a shadow that shows up and then it kind of keeps going so we're going to get a little bit fancy with that but before we do that i want to show you how this can animate so let me start these in a fairly low position i'm going to simply decrease the dashes right of these maybe i'll just decrease this one a little bit and this one maybe i'll maybe i'll increase it just a touch right so what we can do now is you know eventually we're going to let me move this let me delete this eventually we're going to turn this into a component but for now i'm simply going to duplicate this artboard because i don't want to turn it into a component just yet and i'm going to hop into prototype mode and let's go ahead and select the entire group of progress circles drag the handle to the second artboard we'll use a tap trigger and we're going to go for auto animate for the type ease in and out and we'll do a fairly long duration about four seconds and now if i press play and i tap what happened here what did i do wrong i did something wrong what did i do wrong that's a good question what did oh what did i do wrong i didn't uh i didn't change the gashes or the dashes that would help so when you have the second stage whether it's a component or an artboard what you'll want to do is dive back into your progress circles and increase the dashes so i'm just again holding down my shift key and using my up arrow like that and we'll do this one here there we go so now if i do this one more time and i tap look at that we've got this fancy looking progress circle but of course you know we wanted to get a little bit more fancy with this so i'm going to delete this for now now again what i'm thinking is on this particular one here this blue one it's going to go past this point here now what you're going to notice is if i increase increase the dash all the way and it gets to this point here it allows me to keep going right but you can't really see anything and even if i went to try to put like a shadow on it just like this you can't see because it doesn't really overlap on top it just kind of melds with each other so what you need to do you need to get a little bit creative and that's what we're going to do right now so this move circle is actually going to be made up of three different pieces it's a little bit confusing but bear with me so we've got our actually four pieces we've got our inactive section or our shape that's not going to change the active sections we're going to have three active ones again a little confusing but bear with me we're going to duplicate one just like that and this one is just going to go in the background so we're going to leave this one here it's gonna it's just gonna be there so that fills in behind so that we don't have these weird gaps now this second one here right we're gonna actually duplicate this one more time i'm gonna hide this just for now but this second one here is gonna be the one with the shadow so i'm going to start by adding a shadow just like this we're going to have a fairly subtle shadow we can always adjust it afterwards actually what i'm going to do is let's go ahead and move this one i'm going to rotate this just for a second just so i can see what the shadow's looking like i'm going to set the x and y values both to zero and i'm going to increase this a little bit just so i have a fairly subtle shadow and there we go all right perfect so let me go ahead and bring this back to zero great and i'm gonna have this one start at a fairly i don't know somewhere about 30 and i want to do the same thing for this one and then this one here the point of this one at the very top is to hide the shadow on the other end so when you know when this one again this is a little bit confusing but when this one goes all the way to the end and then overlaps eventually we want basically this side here to be covered again very confusing that i'm kind of talking about it out loud but i'm going to go ahead and unhide this and we're going to start this fairly low and this one here this active one this is the one that actually going to be moving and going on top i'm gonna rotate it slightly about 30 right and then make this a little bit larger okay there we go again many much of this might not make sense right now but hopefully once we actually get to animating it might possibly we'll see all right so that's looking pretty good now what we want to do we want to also add some elements that will allow us to tap and transition to another circle so what i'm going to do is over here to the left we might want an arrow so with my pen tool shortcut key p i'm going to show my grid or my guides grid yeah and then just go ahead and create an arrow just like that make it a little bit larger i'm going to set the color to white make it nice and thick and then maybe round out the caps and the joints just like that all right pop it right about there and on this side the left side it might allow you to go to the the previous day and then there might be one on the right side as well and maybe there is no day that you can go to at the moment so this one will just drop to about 30 now if we take a look it's looking okay right all right so i think we're at a pretty good spot where we can start turning this all into a component so what i want to do is i want to make sure to select the progress circles and also the two arrows so this will be next and then previous so i'm going to select all three of these elements and i want to turn all of this into a single component so you can do that in your assets or you can press the plus button beside component in the properties inspector right and then once that's done we already have our initial state created we want to create a new one so i'm going to go ahead and press the plus button one more time create a new state and this will be maybe yesterday there we go now if i dive in here because we go back to the previous state or previous day we will be able to go back to the next day so we can dive in set this to 100 just like that you can press the zero key on your keyboard and now we can start start altering the dashes just like we did before so on this one i can just hold down shift use my arrow just like that of course you can go ahead and enter a value in your properties inspector as well let's say 400 that looks pretty good now here comes the slightly confusing one the move one where we're getting a little bit creative with it and it may not work the first time we may need to make some tweaks but we're going to see what happens so i'm going to dive in here and i'm going to start by selecting the one that's actually going to move and that's the one with the shadow so i'm going to start by increasing the dash quite a bit and i'm also going to rotate it so i'm going to hold down my shift key and just rotate it around so that it can also go you know past that starting point and this is kind of why i have this extra shape in the bottom because when we rotate it we're going to have this empty slot right so this is why i just want to increase the dash on this one to fill in that slot right is there any way to outline strokes in xd not at the moment but i believe that could be being explored at the moment we'll see lots lots in the works so now now you're probably noticing why i have this extra shape at the top right is because we don't want to see this shadow right here we want to see this one because it overlaps but we don't want to see this one so for this one what i'm going to do is i'm going to increase the dash right but i don't want that shadow covered i actually want this one covered so i'm going to rotate this like that there we go all right brett says shift arrow key is a handy tip didn't know about that indeed uh speaking of shift and arrows and things like that if you want to enlarge objects let me very quickly before we get to uh animating got the square here right if you want to enlarge it maybe one pixel on the left or the bottom hold down your command or control key and use your down arrow to enlarge one pixel down or right arrow to enlarge one pixel to the left or the right right and if you hold down your shift key as well as your command or control key you can enlarge by 10 pixels at a time fun little tip all right so we've completed this right and if all went well it should work quite nicely so we have our two states we have our yesterday state and we have our default state and now we can go ahead and wire this thing up so in prototype mode we want to start by selecting the object that a user will tap on in this case it's going to be this left arrow and i'm going to simply click on the blue handle to the right this will allow me to choose a state within the properties inspector right here we're going to choose the yesterday state tap trigger is great and we'll do the same ease in and out with a duration of 4 seconds now if all went well we should be able to tap on this and not only will the steps and the exercise progress circles go to their end location but the move one should appear to go all the way to the end or the beginning and then overlap we may have some tweaks to do but let's see what happens oh it worked didn't have to do any tweaks well that's fancy that almost never happens right let's do that one more time let me see if i can zoom in so you can see what's going on oh i have to go to my actually before i do that i might as well while i'm here i'm on the yesterday state i might as well go here click and go back to our default state all right let's zoom in and see it one more time here it goes fancy right it's the little things in life that make me excited it's also the things that are not supposed to be possible but i find ways right that's what i love about xd and just like design in general this feature came out and even though technically you you can go around keep going around there's nothing visually that lets you know that that you know dash is continuing to go so you find ways of kind of getting around it now one thing i do want to also do is add a little bit more style to this now because these are borders we can't apply gradients on them so we have to find more work around so in this case what i'm going to do is i'm going to hop into the default state of the main component and i may want to create a circle just like this and this is going to help me add a little bit of shadows and highlights to our progress circles so instead of a solid color we're going to go for a linear gradient and maybe we'll go from left to right and the color on the left is going to be maybe a slightly darker color and then the color on the right can be slightly lighter we may have to alter this but we'll see and then we can go ahead and change the blend mode to let's say overlay it looks okay right now but once these actually start filling in it's going to look a little bit better because i'm editing the default state of that main component if i go to the yesterday state we can now see that that gradient is also available right here right so we can play around with this now i am editing at the moment the a state within the main component so it's not going to push the changes to the main but i'm just experimenting here but i think overlap looks pretty good and let's go ahead and yeah i think that color looks okay there dart a little bit darker maybe here a little bit darker as well and it just adds a little bit of shading to this right now again i have to add it to the main component so i'm going to simply copy this and then over here i'm going to paste the appearance perfect now you know the default state's a little bit too dark so i might alter it a little bit but we can now see as it's filling in we have right some fun looking effects and we can go back not bad now maybe in the you know initial state when most of it is not filled in we might actually want to take this gradient and maybe just drop the opacity a little bit [Music] and then in the yesterday state we can make sure that the opacity is back up to around 100 or close to it there we go looks pretty good and if you need to you can also dive in here make some changes to these oops inactive maybe i'll bump the opacity up a little bit maybe to 40 possibly and do the same thing for this one and where did it go the inactive one on move as well [Music] all right i'm kind of digging it now another thing we can do if we want to get really fancy which of course we do right is put some sort of tracker in the center maybe it's like percentage for example right so if i dive in here i can go ahead and select my text tool and let's go for let's say 42 just like that and we also want percent but we don't want to include the percentage sign or symbol with the actual text layer because we're going to use a mask and we're going to kind of animate this as well so i'm going to duplicate this over and we'll go for we'll do a percentage sign right here let's see what if we drop back to josephine sons what does that look like hmm interesting maybe bold okay that could potentially work so we've got percent and we've got 42 and of course if you want to go from let's say i don't know like 20 all the way up to 90 it's gonna take a lot of numbers but let's go ahead and dive in here and we'll do 44 45 46 47 48 we're not going to do all the numbers because that'll take way too long but we'll start with that and then we want to do we don't obviously don't want to see all these other numbers down towards the bottom so i'm going to grab my rectangle tool draw one out just like this and we're going to use this as a mask to hide everything else so i'm going to make sure to select that layer i just created also select the numbers layer i don't have to worry too much about the percentage sign but under the object menu we're going to go mask with shape that will allow me to hide all the other numbers out that are outside of that particular rectangle rotate them a bit in 3d dimension so it's an interesting point you bring up cornell uh if we were using two artboards i would be able to do that but at the moment three transforms is not supported inside of components you can rotate the entire component but you cannot rotate elements inside of the component the team behind the scenes is still trying to figure out that challenge is a little bit of an engineering challenge to get that done and working with components so they're still working on it but hopefully that'll be available at some point in the future so we've got that and you're going to notice again because i'm editing the default state of the main component if i go to yesterday those numbers are there so i can dive in here now and just grab these numbers and move this on up to let's say 48 right so we have yesterday and today it looks like that one's a little bit so let me just dive in here that's a bit better perfect so now if we played this one more time click and play and those numbers also animate as well and of course you can go up to as many numbers as you want you can animate individual numbers if you wanted to as well a lot of fun things you can do but that is looking pretty fancy we can also go back like that i just love that little gradient and the fact that this one kind of goes all the way around and it adds a little bit extra on this particular progress circle it's a fun little workaround right all right before we wrap things up i know a lot of people when i posted on twitter we're asking how i do something like this right where you have a background and you have this device here and then it kind of moves this one doesn't move in particular but this one as i'm playing it it moves so some people were asking how i do that let me show you how that's done so back over here what i want to do over to the right is create a separate artboard that i can use for this and by the way i would probably at this point add in a navigation bar let me actually cheat a little bit i'm going to grab a navigation bar from another document and pop it oops i missed something and pop it into place look at that navigation bar wonderful i can turn off the background blur increase it that looks pretty good all right so what i want to do now is over here to the right i want to create another artboard that will allow me to add in this element here so i'm going to go ahead and drag one out you know what let's go let's go square so if i'm posting on instagram or on twitter square usually works really well oops and then i might want some sort of an image in the background so if i grab my rectangle i'm going to drag out a mask just like that and back in finder let's go ahead and grab this neon image and pop it directly into place i can also drop the color a little bit so if i set the background color of the artboard to black i can just drop this in opacity a little bit i can also play around with the blend modes hard light could be interesting no not really we'll see how that looks alright so that's in place and now what we want to do is use this on this artboard here and then animate right so i'm going to what we want to do is want to select all these elements now you're going to notice if i select all of this and then bring this over it's missing this background shape so what might help a little bit is just to create a separate background shape that you're going to pop right at the very back just like that it looks identical as it did before but there's that shape there so if you do bring it over to another art board it's not going to look really strange now another tip you might want to consider is if you are wanting to keep this presentation up to date you might want to turn this entire thing into a component so i have all the elements selected no i missed one now i have all the elements selected i can go ahead and turn all of this into a single component just like that and it's letting me know that the inner components have been converted into instances which is the new behavior as of adobe max and now i can duplicate this over to this artboard here just like that and if i needed to make changes you're going to notice it's changing across both artboards which is wonderful it's exactly what we want now i may also want to round up the corners here now i could go ahead and dive in round out the corners of this shape and the other shape and also the background layer or i can also utilize a mask so if i quickly grab my rectangle draw this out just like that round at the corners a touch and then select that layer we just created and also the component object mask with shape and now we have a nice rounded device that we can use now of course the point of this is so that we can animate this and present it really nicely so let's do that so we have our first state created right here and i'm going let me actually bump this back up i'm going to duplicate this artboard over to the right and now we can make some changes so i can dive in here to this component switch it over to the yesterday's state and then also alter this entire thing so i can activate 3d transforms for example let's go ahead and bring this up bring this forward in space maybe we can rotate it a little bit there we go and now we can go ahead and wire this up so in prototype mode select this artboard we'll do a simple time trigger so i'm going to drag the handle to the second artboard in the trigger section we're going to choose time we'll give a little bit of a delay so it doesn't kick off immediately auto animate and then we'll keep ease in and out with four seconds and we press play there it goes right so we have this fun little presentation that we can use and of course we can continue getting creative with it we can rotate it just a touch if we wanted to again going back to i think what cornell was possibly asking we can rotate entire components we just can't dive in here and rotate the individual elements inside of this component you're going to notice 3d transforms is now not available so one more time look at that right and we can maybe even start this one off maybe rotate it this way and then just tweak this until we're pretty happy you know rotate it back whoops rotate it back a touch there we go and one more time here it goes right fancy and we can go back as well so from this artboard back to the first maybe it won't be four seconds maybe it'll be like point force it might be a bit too that's not bad it could work right there we go that's it that's how you work with dashes and gaps and auto animate and masks and gradients and the whole nine yards we covered a lot today but a big thank you to everyone who has joined me in today's master class i hope you picked up on something and i hope you i got your creative juices flowing a big thanks to umakorn and aubry and laura cornell marsha golden rose cody and henry uh who else is in here royal says rip developer yes something like this you know definitely not developer friendly i mean some of it is like the progress circles you see this on a lot of applications but some of the transforms and presentations and things like that simply for design purposes and having some fun so thank you everyone i will see you all next time with another xd master class stick around we've got uh kyle t webster coming up with an illustrator master cl illustration master class so stick around for that and i will see you all next time [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] foreign

Channel: Adobe Creative Cloud

Views: 7,089

Keywords: Adobe Creative Cloud, Creative Cloud, Adobe CC, Adobe Cloud, Adobe creative suite, #MakeAdobeCC, #AdobeCC, #ACCTags

Id: aZKqQCiS4Pc

Length: 57min 25sec (3445 seconds)

Published: Fri Jan 15 2021