Getting Started in Adobe XD with Howard Pinsky - 1 of 2

[Music] good afternoon everyone I don't even know what I'm talking about it's not even the afternoon maybe for some of you but for me it's incredibly early in the morning and clearly I haven't had enough coffee I hope you're all doing well my name is Howard Pinsky I'm a senior XD evangelist here at Adobe and a big good morning afternoon or evening to everyone joining me live on Behance if you are tuning in let me know who you are and where you're tuning in from we already have Edith and Halle and Jack and lamb and vipin and Tappan and Andre and I'm gonna butcher this one I apologize in advance Oh Leon you possibly probably not I do apologize but hello everyone if you are tuning in live yeah let me know where you're tuning in from Jack says the bed the fitness background is a great touch I agree because today we are getting our Fitness on but not we're not really getting to physical will say that for exercise maybe one day we'll do like a like a peloton style bike Adobe XD design thing that could be fun I don't know I've been biking too much lately but we are gonna be designing a fitness application using Adobe ex-team focusing on getting started users so if you're brand new to XD this is gonna be a perfect opportunity to dive in learn something new pick up on some tips and if you're a veteran like Jack and Tim and various others who are in the chat right now who knows you might pick up on something as well it's gonna be fun I hope you've all grab some coffee I have a nice fresh cup right now and I'm into this I am into this so what do we have going on today well we have a lot going on today actually here's a schedule we got me getting started Doby XD 7:30 in the morning it's very early but if you're in if you're in India like Vipin it's 8 o'clock p.m. it's not too bad Photoshop daily create a challenge with Kathleen is coming up in at nine o'clock just after me we've got Photoshop compositing with Lisa and my good friend hey Zeus at 9:30 the illustrator daily creative challenge with Julia at 11:30 and we've got graphic design with Nick followed by Adobe XD daily credit challenge with Jessi Kyle Webster good friend good colleague at 2:30 for his draw along classes if you have kids take them to that class it's fantastic and then my head's in the way but we've got a design design off with Voodoo val and panda to wrap up the day at 3 o'clock very cool stuff we have a lot of fun stuff coming up I'm gonna hop over to my screen and we are going to get going so we've got carlos from jordan it's 5:30 p.m. I believe and Alberto's in the house and Melina's in the house from Poland welcome everyone Japan is asking about the background it is from Adobe stock I love Adobe stock good stuff there I'm gonna be using some stuff from stock as well now since this is a getting started class in Adobe XD I very wanted very quickly I'm still recovering from sleep direct you too let's XD calm a lot of great content maybe a little bit biased I put together most of the content but if you are just getting started we have a lot of different sections on let's XD it's including good friend Danny Beaumont put together a getting started course and you can go through all these videos here and then once you feel a little bit more comfortable in XD there's a lot of different stuff on there so after the stream if you have some time also follow along with the daily creative challenges they're good stuff but yeah there's just a ton of content you can go through and have a good time so thank you Tim for posting that in the chat but today we're gonna be diving in to Adobe XD for the first time possibly if you are brand new to XD let me know in the chat I will be looking for questions but we're gonna be designing out a Fitness based application it's gonna be a mobile application this time of course you can design for web and design for desktop whatever pleases you and so I'm going to go ahead here's what XD is going to look like when first launched it up might even go ahead and choose an iPhone 10 R 10 s max artboard you're free to choose any mobile design that you want there's a lot of different presets to kind of get you going right away but let's go ahead and dive in to that here we go all right so here is your first artboard and much of this might look very familiar to you you've got an artboard in the center you've got your tools over to the left you've got your layers over here down here at the bottom oops down here at the bottom which we'll get to shortly you also have your assets and your plugins we're definitely going to be exploring some of that and over the next two days we're gonna be diving into prototyping we're gonna be diving into masking a lot of cool things we've got Sean Newby in the house milena totally new to this I'm glad you joined me and after these two days if you feel a little bit more comfortable on Friday at 2 o'clock Pacific time I host master classes so we dive a little bit more deeper a lot of cool stuff coming up a lot of by the way before I dive into things I took a look at some features that we're working on good stuff the whole like it's all I can say I like T some people hey Rufus is in the house my good friend also my boss don't judge me Rufus all right so what do we have planned so let me hop over to my notes and usually when I'm ever I'm planning out an application I just like to open a notepad and just go crazy I just throw in all ideas I possibly can about this application what screens might I need what the user experience might look like I know some people like to grab a notepad a physical notepad I know people still write on paper it happens I do it from time to time sometimes just that pen on paper feel it works right but other times I open the notes application on my Mac and I just throw all the ideas down in no particular order whatever comes to me you know I have been using a bunch of these fitness applications lately so you know I included some that I might some features that I might like some features I might want right so yeah and yeah a she a lot of coffee today I agree all righty so these first few screens are going to act as the onboarding flow you know when you open up an application it shows you a few splashy images it shows you some information about the application and this is where I would love some of your help to get some ideas on what this application could contain so I'm gonna start by grabbing my rectangle tool it's this little guy over here to the left it's a tool I probably use the most often in Adobe XD rectangles are great I'm gonna drag out a rectangle across my entire artboard now you're probably asking yourself why are you doing that I'm also going to change the color just so you can see this rectangle against the background and you're asking why am i drawing a rectangle across the entire artboard what's the purpose of that here's the purpose for this particular screen I want nice full width images right that kind of encompassed the entire artboard and if I were to simply hop over to finder right I've got this great image here this one over here right she looks incredibly in shape I'm very jealous if I were to simply drag it in to XD not into the rectangle yeah I agree VIP and always the rectangle if I replace it here it's an Adobe stock image so it's incredibly large super high-resolution and yeah look at the size of that image compared to that rectangle not idea right so because I'm using a rectangle and shapes in XD can be used as masks all I have to do now is grab the image pop it into the rectangle you're noticing it's highlighting a blue to let me know it's on top of there and there we go it just masks it for me which is super nice and super simple and super quick and I can very easily double click on this rectangle to access that mask so if I need to move it around a little bit if I needed to enlarge it I can do that oops I missed it if I have to enlarge it right so you can do all these things and you don't have that overflow that you had a moment ago all right so next on this artboard because we know we're gonna have some text right you know you might be thinking maybe you can grab the text tool and just start typing something out but the problem is because this image has so many different colors you know there's she's wearing a black shirt there's a white towel there's a blue bottle there's a blue background it's gonna be very difficult to choose a text color that works well and the last thing you want to do I'm gonna talk more about shadows a little bit later the last thing you want to do is add a shadow to text you probably want to avoid that so what we're gonna do we're gonna create a container that goes over top of part of this image that will allow us to house text so it doesn't get distracted by the background right so I'm gonna grab one more time my rectangle I should do a stream where all I design with is rectangles then Agana that's probably every stream so I'm gonna drag a rectangle across this artboard just like that now there's a few ways to get creative with this rectangle we could go ahead if you take a look let me zoom in on the inside of our rectangles we've got these little dots right we've got of course the outside of nodes that allow us to resize rectangles we also have these little dots on the inside and if you're brand-new to Adobe x2 you might be wondering what are these little dots well if you drag them look at that you can round out the corners very easily you can also hold down your alter option key to drag individual corners back like that right and you can continue rounding out this corner and you're probably also noticing that inside of the properties inspector over to the right you have individual values so you can adjust all the corners at once using the first button or you can adjust individual ones using the second one right so I have zero seventy two zero and zero right and that looks pretty fun but it might want to get a little bit more creative with this rectangle I want this to be a fun application right very colorful very curvy right so what I'm gonna do is I'm gonna double click on this rectangle to access its path and I might want to add a point somewhere right about here right click now when you initially add a point to a shape and you move it around it's a very sharp and that's definitely not what we want we want nice curved lines so in that case I'm gonna double click on the point and it's gonna give me that nice curved line and that will allow me to grab this point over here I can move it on up just like that and I can start adjusting some of the curves like this and now I've got this really nice looking shape that I can use to how some of the text on this application or at least the onboarding flow right and that looks pretty good so now that I have that done let's go ahead and start adding some text so with the text tool over here to the left hey M MT as welcome I'm gonna grab the text tool I'm gonna simply click once and let's go ahead and start typing something out let me change the color let me click whoops let's go for a get fit and stay fit I'm gonna change the color let's go for a nice red like a pinkish red now the text at the moment is a little bit too large so very similar to the little point on the rectangle where you can pull it in or out point text has the same thing so you just grab this drag it inwards to make it a little bit smaller you can make a little bit bigger if you wanted to just like that and that looks pretty good right now in terms of the styling for this text there's many different ways we can go about this first of all I want to make sure that it's Center so I'm gonna press the center button right there now the typeface you know Helvetica is not a bad font but of course if you want to get really creative you can get go for papyrus No okay don't go for papyrus but something like Sofia Pro is a pretty good font if you're designing for mobile which we are Apple San Francisco fonts are pretty good a veneer next is a great font there's a lot of different ones you can possibly use and vipin is saying when do we use grids why eight pixels is widely used so tap on and say no no papyrus that's a big question so let me go for let's go for bold that looks pretty good alright so in terms of grids there's a few different reasons you would want to use grids right so there's a few you can drag on some guides and let's go ahead and do that actually so over to the left and up at the top you can drag out guides from the left side of the screen let's go for a let's say 24 pixels Alberto says Sofia Pro is Howard's BAE it's pretty good it's a nice font it has some nice touches to it you're noticing like right here the F kind of blends in with the eye really nicely it's nice it works POPPINS is another good one that I've been using quite a bit so yeah we dragged out some guides we've got 24 on the Left 24 on the right and you know Tim points out because most screens most screen dimensions are divisible by 8 and he's totally right so it just makes a little bit easier if you're using you know eight pixel grid of course you don't need to you can use a 10 pixel grid if you want to and that makes it easier you can also if you select the entire artboard over in the properties inspector you can activate your grid right you have a square grid and a layout grid so if I turn on a layout the layout grid again I need more coffee you can control your gutter with your column with a lot of different things within this grid to really help you organize your content for now I'm gonna keep this off we might go a little bit diet might dive a little bit deeper into this tomorrow but I think for now the 24 pixel guides that I dragged out are gonna help me keep some content aligned may not be necessary on the onboarding screens than we're doing now but it may be on the home screen and we're gonna get to a little bit later all right so we've got our title going on looks pretty good now you know I'm liking this red it's like a reddish pinkish color it's got a little bit pink in there it kind of works and I may want to use this specific color throughout my application so what I want to do is explore the assets panel so right down here at the bottom of your interface you're gonna click on this button right here this will open up your assets panel and because this is a specific color that we want to save I'm gonna go ahead and press the plus button beside colors there we go and it's gonna add this color directly into my assets panel I can go ahead and name this if I wanted to I don't know what which I named this red Red's a great name for a color that looks like red if anyone has better suggestions for this red color let me know I can also add the color character style so I can go ahead and let's say onboarding header right and the benefit of this as you'll see in a few moments is that if you have several different artboards you'll be able to change these colors or character styles once and it'll change throughout all of them which is great so we've got that set now under here we may want a little bit of a description of what this exactly what what this app is right what is this Tim says pink see yes Tim so I'm gonna go ahead and drag out with my text tool instead of clicking I'm gonna drag out an area text and this will allow me to confine text inside of this container right so I'm gonna go ahead and type out this is a description help stuff like it's spelled properly right now obviously this is way too big so a lot of people are saying some people saying rink and pink see hot red ruby I'm gonna go for Ruby let's go for Ruby Ruby is a good color Ruby there we go hey Rafael good morning all right so obviously this text is way too big because you know it's thinking of the hierarchy you want this header at the top to kind of be the main point and then you want the description to fall back a little bit so in that case there's a few things we're gonna do one we're gonna drop the weight let's go for medium and then two we're gonna drop the size 24 might work and then we're gonna drop the color so instead of that red color we're gonna go for a little bit of a darker color so it's very similar to like a paragraph text and I'll go ahead and just add a few more lines this of this application get fit right and we'll worry about actual copy a little bit later but for now we've got three lines which is probably the most we're gonna have in this situation you can also adjust the line spacing if you wanted to over here within your properties inspector and you're noticing because the text kind of exploded outside of that area that we set that last line is kind of missing now what you can do as of a recent version of XD is you can simply double click on this point at the bottom and it'll bring all that text back into view which is really nice it works the same way the opposite as well if your area Texas larger there we go perfect alright so we've got our title we've got our text which I should probably fill out a little bit more but we're gonna leave it at that and let's go ahead and and draw out some page indicators because in you know in a perfect world there would be a few different areas that we can swipe between so what I'm gonna do I'm gonna grab my ellipse tool not my rectangle this time of course you could do with a rectangle and just rounded up those corners but I'm gonna grab my ellipse tool draw out a little circle just like this right now this one is gonna be the active one because this is the first page so I'm gonna go ahead and sample one of these Reds I can do that or I can simply click on it in my assets panel very quick access to those colors we can turn off the border and this is gonna be the active page so what I'm gonna do is I'm gonna duplicate this ellipse over to the right and maybe I'll just drop the opacity to about 40% and I'll do one more there might be three screens right I'll select all those I'm holding down the shift key and clicking on all three of them and then inside of my layers panel I can go ahead and make sure these are grouped so I can either excuse me it's the coffee I can either command or control G to put them into a group I can right click I can go to group there's also an object there's a group option under the one of the menus at the top but let's go ahead and name this page indicator or indicators it's probably plural and I'll just make sure this is nicely centered and if I want to really make sure it's centered up at the top right hand corner of XD you can just press this button right here which is going to align the center there we go alright so things are looking pretty good right now in addition to some of this information there maybe one more thing that we might want on this particular screen you know you've got your header you've got your description you've got your page indicators which I'm going to you know spaced out just a little bit right just selecting all these deselecting these and just moving them a touch take a quick coffee break you know what Richard I think that's a good idea we may want you know for users who maybe have used this application before but they're not currently logged in we may want an area that they can sign him so here's what we're gonna do we're gonna get a little bit creative with this we're basically gonna duplicate this section so I'm gonna duplicate this let's go ahead and actually group these in a nameless container table Hana welcome I'm gonna group all this I'm gonna name this description right oops make a smile I agree now I'm gonna duplicate that container I'm gonna paste it I'm gonna move it down now you can't see it right now because the white is the same color as the container in the background but if I hop over to my assets I can apply that red very quickly and I can use this exact same shape for the sign-in experience you're probably wondering it doesn't look like anything how is anyone gonna sign-in in this area and this is where we're gonna get a little bit creative right so I'm gonna start very simple I'm going to grab the text tool I'm going to type sign in and change the color to white I might want to increase the size a little bit maybe I'll increase the weight to about semi bold because it will be a call to action and I'm going to Center it just like that now we are designing for a newer iPhone iPhone 10 10 s 10 s max 11 I don't know there's a bunch of different numbers so we have to keep in mind that at the bottom of the interface there is a home indicator and per the Apple's guidelines you can't have anything down there so anything that you need to tap on you just have to avoid that area so in that case I want to make sure that the sign-in button which is going to be tapped on is a little bit higher right something like that that should work just want to make sure to line up all these items and that looks pretty good now of course we need when someone taps on this sign-in button down at the bottom we need something to happen so you know in my mind I kind of want this section here to fly up and there'll be some additional information in this area that will allow a user to sign in so what I'm gonna do with this already in place I'm gonna just grab some of this stuff move it up to cover it up and we're gonna start designing that area and I can double click on this section to make this a little bit larger right just like this there we go and we've got sign-in now there's a few things in this section here that we might need we might of course need some text fields we may need a button to actually sign in maybe a text link if we forgot our password so let's go ahead and create some of that stuff I'm gonna grab my rectangle I'm gonna turn back my turn on my guides and you can do that with command or control and then the semicolon that's the one or you can go to the View menu down to guides and then you have all your guide controls right here I'm gonna go ahead and draw out a rectangle across this document just like that I'm out were to round out the corners just a little bit just a touch you don't want to go too crazy with this because this one will be a forum field I'm gonna talk a little bit more about this in a second but essentially if you have completely rounded corners for the formfield right and you have completely rounded corners down here for the button users might get a little bit confused as which is the form field which is the button what do I click on or tap on right so we're gonna stick with very subtle rounded corners and because this is a white box on a red background we probably don't need a border we might want to do just to get a little bit creative is that a tiny bit of a shadow right and when I say tiny bit of a shadow I mean a tiny bit of a shadow I see a lot of designers especially newer designers do some like this don't do this right I know the purpose of a shadow is to separate one element from another but in most cases especially if you don't need a shadow you don't want to do this so what you're gonna do gonna drop the opacity quite a bit you're gonna grab the blur which is this value here and you're gonna increase it quite a bit let's go for like 24 pixels maybe the Y value will be about 8 sticking with that 8 pixel grid not necessary for shadows but you want a very subtle right and if you want to get really creative you can also add a little bit of color in this and you can definitely start to see that it's very subtle right here's without the shadow and here's with the shadow very very subtle again probably not necessary but it just adds a little bit of fun to this application so we've got this one text box subtle shadows are beautiful yeah please no deep shadows yeah so we've got this looking pretty good now inside of this this will be lets say the email field so I'm gonna go ahead and type out email address oops I have my text set to white that's not good let's go ahead and go for a nice dark color I'm gonna drop the size a little bit just like that right and then we're going to go for let's go for medium let's see what that looks like you'll drop it a little bit more just so people know that this is a placeholder that they can tap into let me zoom out you know what I'm thinking is I'm thinking even though we have those 24 pixel guides on the left and the right it probably doesn't have to be right up up at those sides right so I'm gonna hold down my alt or option key and just drag this back a little bit let's go for about 42 pixels possibly maybe 38 we'll see we can always experiment and because we're gonna be using components in a moment if we need to change all of them we can do it all right so we've got email address looking pretty good but of course we now need some sort of an icon to indicate that this is the email field now there's a many different ways we can go about doing this one thing we can do is we can use plugins so I'm gonna go down here to the bottom of my interface click on the plugins section and I do have the icons for design plug-in installed but if you don't have plugins installed hit the plus button at the top and you're gonna get your plugins manager right here you can go ahead and search for icons for example and there it is right there it's a great plugin and it gives you access to open source icon so I can go ahead and type out email for example I've got some you know great icons here if you want to type an envelope or message or chat or anything like that you can do that as well this one looks pretty fun it's it's not an envelope but it's a little bit different which could work so I'm gonna go ahead and click on that it's gonna load it directly into XD and make a little bit smaller and for the color I can you know it can do a few things I can choose Ruby for example that looks pretty good I think that could work make sure it's centered let's go for 24 pixels from the left-hand side and we'll go for about 16 pixels that looks pretty good right make sure it's nicely visually centered there we go all right beautiful so we now have our first field created right we've got our icon here we have email address and we have our background now we may want additional text fields obviously we're gonna need one for password and the last thing we want to do is have to update this over and over and over again if changes are needed so to make our life simple we're going to utilize components I'm gonna go ahead and select all the elements that make up this section so this rectangle here the email address text and this icon I've got all them selected in your assets panel you can go ahead and press the plus button beside components you can also do that over to the right within your properties inspector you can use the commander control K shortcut there's a lot of different ways you can make your component but there we go go ahead and name this text field now this will allow you to do a few different things one it'll allow you to just drag one out and pop one here now what you're going to notice is on the original text field that we created this original component there is a diamond at the top left hand corner this lets you know that this is the master component right this is the original you want to keep this one don't hurt it right and then on this one here there is a hollow diamond this is called an instance so it's essentially a duplicate of the master we're gonna get deeper into components a little bit later but the rule of thumb is if you need changes to spread and distribute amongst all of your components all the instances you'll want to edit the master the one with the solid green diamond this one right here if you want overrides you'll edit an instance and what's nice about overrides on components in Adobe XD is he gonna write override just about anything so you can dive in here right I should make sure you're noticing on this instance I have the text Center justified probably don't want that so in my master I'm gonna make sure to left justify it and if at any point you don't know where that master is maybe it's not on your document maybe it's just hiding somewhere you can right-click and then edit master component it'll take you right to it right so I might want to just go for password password just like that I can also override this icon so if I go back to my plugins panel I can just type out let's say lock for example and let's go for there's a lot of different lock icons oh boy this is a big decision Metro looks pretty good a big fan of the Metro icons feather has some pretty good icons them of course the question is do you want solid icons do you want stroked icons right let's go for let's go for this one I'm gonna make sure all to set the same color make a little bit smaller right so even inside of an instance to make sure this lines up I'm very particular with my alignment and I can delete the mail icon just like that so even though this is an instance of this master component I got rid of that email icon I replaced it with a lock icon I change the text but it still maintains its link back to the master so if at any time I decided I mean maybe I do want those completely rounded corners you can definitely do that or maybe if you wanted the text over here you can do that and it updates right so it still maintains that link which is really nice we're just said wow I never noticed that between the component diamonds green means a component and white means an instance it does and one more cool tip is you're noticing now that that hollow diamond on the instance now has a dot inside of it what does that mean well that just means it's been overridden so some changes have happened inside of this instance but again it still maintains that link back to our good old master component up here all right so we've got our email address section we've got our sign-in or our password text field now we need a button right so tappan is asking is advisable to have a master art board for all screens I'm not sure exactly what you mean by master art board are you talking about component but clarify that and I'll I'll take a look at it so we've got our two text fields and now we need some sort of a button to actually sign in so I'm gonna grab my rectangle one more time draw one out just to make sure everything lines up perfectly all the smart guides are helping me out throughout this process this one I'm going to completely round out the corners and going back to what I was talking about earlier this creates that separation between text fields which is up here and buttons so if if these ones right we're completely rounded all of a sudden all of these look very similar so a user might not know that this is a text field this is a button so there's a few ways you can kind of create that separation all right so we've got this down here I'm gonna move it down just a little bit you know thicken it up just a touch and it might also want to change the thickness of these text fields a little bit and you're noticing because I'm editing the master component right it edits on all of them which is super nice perfect all right here I'm going to type out sign-in I'll go ahead and sample this red color in the background and this is a call to action so let's go ahead and fold that and make a little bit larger and there we go that looks great so we have our sign-in button right now just like we did for the text fields we may also want to turn the sign-in button into a component as well because we may use additional buttons throughout this process so just like we did before I'm going to slap the text selected I'm hey Ross welcome I'm gonna grab the container as well and just turn this into a component just like that all right I'm gonna hop into my assets panel and I can name this button and a little bit later on maybe tomorrow we'll get into components States which is gonna take your components to whole new levels and let me go ahead I did see Japan this is an art board that contains all master components oh I see that's completely up to you I know a lot of people especially when they're working on design systems they'll have one artboard of all the master components I personally don't like doing that unless I'm building out a design system if I'm working on a project like this then I typically just have my my components inside of my assets panel and if I need one I'll just right-click and then edit master component if I don't know where it is but some people love that so totally up to you it's a personal thing and the tone is not synchronized with your moves oh no I hope the audio is not hope the audio didn't get thrown off sometimes YouTube does that I don't know why but it sometimes throws off the audio but let me know in the chat if that's what's going on alright so we've got our button here now we may also want you know if someone forgets their password we may want a very quick text link so that they can remember it let's go ahead let me change the color to white forgot password' just like that question mark I'm going to drop the size a little bit right make sure it's centered and it may want to underline this so that people know that it's a text link just like that and maybe I'll drop it to medium beautiful okay so that's looking pretty good of course this all of this will not be displayed immediately it'll kind of be down here which we'll get to back to in a moment but we may also want a way for oh so yeah it looks like YouTube might be throwing off my audio again I wish there was something I can do to fix that but maybe it'll fix itself but I do apologize YouTube does that from time to time it's a slight delay that's annoying it drives me crazy doesn't okay so on this screen we may also want a user to be able to cycle between sign in and sign up so in that case what I'm gonna do is I'm gonna shift this over I'm gonna duplicate this and I'm going to type out sign up now because sign in will be what a user will be on immediately by default we want to kind of bring sign up down a little bit as a secondary option so we'll bring this down to medium and maybe we'll just drop the opacity just a little bit to maybe 40% right you can also use the number of keys on your keyboard to go to 40 just press the number 4 there we go now just to really hit home that this is the sign-in experience I'm going to grab a line just the line tool draw one out increase the size a little bit maybe I'll just bring it in just a touch and there we go so now we have sign in/sign up we've got our email section down here we've got a password and sign in the button all that fun stuff right so one more thing we might want to do just just thinking through this in my head right because all of this is gonna be contained inside of a single component when the sign-up experience happens right most cases you have an email address field you have a password field then you also have a confirm password field so in that case we're also gonna add that in there but we're gonna hide it initially so I'm gonna duplicate this down I'm simply going to type out confirm password right I'm gonna name this one confirm I'm gonna just make sure to place it behind the password text field and just hide it just a little bit just like that right don't want to see it I can even drop the opacity if I wanted to just to make sure that it's not there and you're gonna see why this is happening in just a moment so we've got all this looking really good now what we want to do is we want to turn all this stuff into a single component so what I'm gonna do is I'm going to make sure to select all the elements in my layers panel so I've got the container and basically everything above it so I'm holding down the shift key and I'm clicking on that first option or first layer at the top it's got all of it selected now just like we did before in my assets I'm gonna press the plus button beside components and I'm gonna just type out sign-in and essentially I have this entire thing as a single component now I want it kind of down here hidden at the bottom but when when someone taps on it I want some sort of animation to take place so let's go ahead and design now what that initial state looks like I'm gonna double click inside of it and I'm just going to select all these elements I'm gonna move them down just like this right now I'm gonna select sign in make sure this is kind of centered right about here I'm gonna grab my text fields maybe I'll stretch them out a little bit move them down I'll grab the sign-in button move these down as well sign up I'll kind of move over here and this line will just move down here as well right perfect so essentially if we take a look at the preview we've got our description we've our header we have our sign-in button in the bottom and all that under other information is kind of hidden down at the bottom inside of that component which is exactly what we want so now again thinking this through when someone taps on this we want this whole section to slide up and then we want that signing experience to reveal itself so in that case we're going to explore components States so we have our first component set up everything looking pretty good over here to the right within your properties inspector you want to press the plus button beside default state and this will allow you to create a new state or a hover state because we're designing for mobile hover doesn't really apply so we'll go ahead and do a new state will call this sign in just like that and now we can start making changes now one thing you may be inclined to do once you have a new state created is just grab the entire component and move it up you want to avoid that because that'll also move up the default state as well so what you'll want to do is double click to go inside of the component in that state and move all of this information just like that and now we can start rearranging things like this we can move this down move this up just like we had it before so everything looks really nice grab all my text fields move those up squish these in a little bit grab the button and the text layer and move that into place right perfect all right now there's one more thing we may want to add right because the red you know depending on the image in the background especially if I grab let's say an image here this one here pop that in there there might be a little bit of clashing going on so what we might want to add just to this particular state is maybe an additional like an overlay in the background so inside of that component even in an additional state I can grab a rectangle draw one out just like that I'm gonna move it to the back of that layer stack just like that and maybe just turn down the opacity just a little bit to about 90 percent there we go so we have our default state and we have our sign-in state just like that did you forget the social media icon I'm not sure what you're referring to some apps have social icons some apps don't this one may have at some point so we have our default we have our sign-in right things are looking pretty good we also want one more state when someone presses sign up we might want that as well so from this state I'm gonna press the plus button I'm gonna create a new state this will be sign up and from here what we're gonna do we're gonna grab our line shift it over under sign up bump this up bump this down to 40% and we also have our confirm text layer that we we hit earlier remember that one so now we can bring that out grab these move these down a little bit just like that we don't need to forget forgot password link in this case so I'm gonna drop the opacity and I'm gonna change the text of sign-in to sign up just like that there we go so recapping we've got our sign up experience we have our sign-in experience and we have our default state so the big question is how do we wire this up how do we actually make this happen here's what we're gonna do we're gonna hop into prototype mode and we're going to select any layer within that sign and experience right so in this case we can select the sign in text and you're gonna notice over to the right there's a little bit of a handle now depending on your situation you may grab this handle and drag it all the way over to another artboard but in this case everything is going to be contained inside of this component so we're simply going to click on it and that'll give us this little wire that kind of spews out of this sign in text and over to the right we can start defining these properties in this case we do want a tap trigger so we want a user to be able to tap on the sign-in text and something is going to happen and then down below we can choose either a destination artboard if we had additional ones or states so in this case we want the sign-in state that we created it's going to default to auto animate and that's exactly what we want and if you're brand-new to Adobe XD the way auto animate works is that it looks at the differences between either two Art boards or two states and it animates those changes and we'll get more into auto animate a little bit later today or tomorrow and then we can choose some easing options ease in and out is pretty good a little bit slower at the beginning a little bit slower at the end and then we'll go for 0.6 seconds for example I'll see what that looks like and now to see this in action before we get to the other state we'll press the play button here is our preview we can tap on sign in and it all just happens it's really nice it's quite nice actually now we can also if we choose the component we can go to the sign-in state and we can also wire up sign up right so do the exact same process click on the layer click on the handle choose the destination this will be sign up write all the other properties come over beautifully we can even speed this one up just a little bit if we wanted to and then we can go back and wire up sign in so we'll go back to our sign-in state right and then maybe possibly just for this example we'd probably have some sort of an X or something like that from the sign-in state if someone clicks on let's say the container in the background or maybe maybe someone clicks on this rectangle back here it is overlay maybe it'll go back to the onboarding flow so in that case it'll go back to the default state there we go so here we go we have our onboarding experience which we're going to continue building on in just a few moments we have sign-in you can go to sign up and you're noticing that beautiful confirm password text field kind of just falls out right and the text changes that forgot password link goes away and then we can go back to our default state right there we go vipin is asking XD currently have dragged from left to right can we do the other way also I believe so oh so he's also asking is it possible to have dragged from top to bottom it is basically it depends on how your artboards are set up let me see if I can very quickly set this up I have an artboard right we have let's say a rectangle let's just put in a repeat grid for example whoops I just pressed something I don't know what I press there we go right so you have this and then you have another artboard and you just move this up right so XD will notice this if you click on this this is the object that's going to move and you want to make sure to go to drag and now you can drag this up right on my trackpad I'm just dragging up and down so XD notices that this object over here was moved up from this one so that's the default drag it's up and down right so hopefully that answers your question but we do have a lot more things in the works that will help with moving things around it's all I can say all right so now we had that component looking pretty good let's go ahead and and build out some additional art boards for this onboarding experience so let me go ahead and just with this art board select it I'm gonna duplicate it command ctrl D OOP there we go and now we can just start making changes so maybe we'll grab this guy over here drag him in that looks pretty good and let say track progress and for here we'll want to dive in here this will be 40% this will be 100% you know at some point I'll probably fill in some of this text but I want to make sure we get through this and this will be worked together this will be 40% and this will be 100% right beautiful and we need one more image we'll grab this guy this guy is just so happy this guy is my spirit animal perfect this is looking pretty good great now the big question is how do we get from artboard to artboard so there's a few things we can do we can either create some fancy animations may not be necessary so in that case we're gonna hop into prototype mode and maybe we'll click on the second page indicator down here and we should probably also put maybe an arrow going over to the right or a next button or give the ability to drag over something like that we'll get to that so I'm gonna drag this handle over to the second artboard just like that and we'll choose a tap trigger and because we don't really need anything animating between these artboards we'll simply do a simple transition and then we will do let's see let's say dissolve see what that looks like that's not too bad I think I think dissolve will work I will do the same thing for this one we'll just go back to this artboard all the other properties came over really nicely and we can also do we can also go back just like this right just like that perfect tap tap and we can just keep going back just like that right and of course you've probably seen it in some my past streams we can get really fancy with some of these onboarding experiences with animated page indicators you can have masks to kind of get rid of the text and bring new text in alexander's saying is drag option working only artboard to artboard at the moment it is the plan eventually is to build it into component States but that's a it's a big challenge so the team is working on it but I don't have a timeline for that all right now you can also swipe between screens so if you wanted to let's say on this whole entire description you want to be able to maybe swipe over to that way now it may not work the way you might think because things aren't really moving so let me show you so if we go drag right because we don't really have anything that moves between the two artboards it's really not gonna work right so you probably want to avoid that someone saying is always saying I don't have dissolve in XD so make sure for dissolve let me show you over here in the properties inspector make sure that the type is set to transition once you have that set then you'll be able to choose dissolve under the animation they've been saying from the third artboard you did not connect the first one I did not and now I did there we go now the nice thing is because we have this component the signing component at the bottom of our screen on all these artboards right no matter which art we're on we can very easily activate the sign and experience and everything looks super nice there we go beautiful okay so how much time do we have left we have probably like half an hour or so let's see what can we tackle let's go ahead and tackle possibly a home screen so we've got our onboarding and of course you know there's the copy needs to be edited a little bit there the user experience probably needs to be improved to really tell users they can get to the next artboard by either swiping or pressing next or something to that extent but I do want to move on I want to create one more artboard and this is going to be sort of a home screen that will allow us to maybe not a home screen maybe like a workout screen for example that will allow us to see maybe sessions that might be going on right now or in the future something like that right so we're gonna grab our artboard tool I'm simply going to click and it's gonna realize that I previously used the iPhone 10 R 10 s max artboard and it's gonna grab another one and just make one for me which is nice so on this particular artboard there's a few things we're gonna want we're gonna want some basic information maybe a profile picture a menu a title a navigation bar and then we're gonna want that bulk content in the middle so let's start with the simple stuff now I don't have because I created a new artboard I don't have my guides on this new artboard so what we can do is on any of the other artboards I can go I can select it go to view guides copy guides and then view guides paste guides oops I missed it paste guides there we go now we have our guides that we can start working with so here we go we're gonna start simple I'm gonna grab my my ellipse I'm going to draw one out I'll hold you down the shift key to constrain it to a perfect circle just like that and just like we were talking about earlier with the home indicator at the bottom of iPhones you also also have to keep in mind that there is right up here somewhere there is a notch our good old notch that we all love right there's a notch somewhere at the top so keep that in mind as well you don't want to put anything up there because it may not be seen you may not be able to tap on it so just keep that in mind so we've got this got our profile looking pretty good now in the center we may want some text whoops I added one too many S's in there so those will be sessions right I can make again I can make it bigger I can make it smaller my smart guides help me out throughout this process to let me know that it's centered it's also centered with that profile icon over to the left it looks pretty good now over to the right we might want a menu good old hamburger menu right now we can of course use an an icon from plugins whatever plugin it's still early I need more coffee hold on we can also just create our own hamburger menu so with the line tool let me zoom in here I'm gonna hold down my shift key to constrain it I can make it a little bit thicker I can also around out the caps this little guy over here OOP there we go beautiful and I can duplicate one I can duplicate another my smart guides are helping me out throughout this process and now we have a really cute hamburger menu it's that simple right snap it over to my guides beautiful now maybe just to give it a little bit of style I don't want to maybe bring one of these in why why not right just bring one in yes Eric Eric knows coffee chug-chug-chug yes what time is it there it's very early it's um it's well before noon that's that's what it is so we've got that maybe you know what maybe we won't want to bring in some of that red because we're not gonna have a lot of red on this artboard so we might want to bring in a little bit now because this is a line and he uses borders in her assets panel we would right-click and we would choose apply as border there we go Edith is asking is a crucial to name all of your layers and components to avoid problems when prototyping yes very important especially when you are animating between two different artboards let's let's do a little side lesson because I love this lesson let me create a new artboard artboard let me create a circle actually let me create a rectangle a square whatever you want to call it I'm going to assign it this color right so here we have a rectangle right or a square and we might want to animate between this Square and something else I'm going to duplicate this artboard delete this and I'm going to draw out an ellipse beautiful circle right so we have a square and we have a circle if I were to go into prototype mode select the square drag it over to the second artboard I'm going to make sure that tap is the trigger auto animate is the action to allow us to animate between those two Art boards we'll just do ease in and out and we'll do let's say one second right if we press play watch watch what happens nothing exciting it just fades between one and the other and that's because our layers are not set up properly XD doesn't know that we want to animate between this object in this object because they're two completely different things at this point so here's what we have to do one XD looks at the names of layers 2 XD looks at the types of layers so if I were on this artboard name this shape who would ask that question Edith I'm going to name the shape he death and I'm also gonna name this circle Edith right so we now have on both of these artboards two shapes one rectangle and one ellipse they're both named Edith you might think that that would solve all of our problems it did not and that's because that layer there the layer types are completely different this is a rectangle and this is an ellipse so in that case we need to make sure that they're they're paths right so you can either go to object menu path and then make pet or convert to path or command a control eight I'll convert it into a path do the same thing for this one so now on both of these artboards we have two paths both named the exactly the same and now when you press play and tap it beautifully animates to the next artboard so the moral of this story is that if you want to make sure that XD animates the changes across your artboards the layer names have to be the same if they're if you're using groups or masks they both have to be named the same and the types of layers have to be named the same you'll see a little bit more of this probably tomorrow in tomorrow's lesson same time same place same Behance channel i can actually make this a little bit larger but hopefully that answers your question but yeah layer naming is very important when it comes to auto animate in Adobe XD all right I'm not loving this hamburger menu but I think for now we are going to leave it alright so we've got our header looking pretty good of course you know we have this empty looking profile there's a few things we can do for this we can either go to finder and of course grab an image drag an image in here and we've got an image right but many of you may not have images at your disposal so let's take a look at a plugin one of my favorite plugins it's called UI faces it's actually in the process of getting an upgrade but what UI faces allows you to do and we'll explore more of this probably tomorrow it allows you to bring in faces from a variety of sources including unsplash IMDB one of my favorites is this person does not exist I'm gonna go ahead and check that on and maybe Tim will post a link to this person does not exist com it's an algorithm created by Nvidia and it generates completely computer-generated that do not exist and if I press apply with this circle selected it's going to generate an image and bring it in and this person is not a real person this person does not exist as the source indicates so I can press apply one more time it's gonna generate another completely random person and there we go it's kind of creepy that these are not real person not real people Liz is asking about PC so if you right-click on your shape you should be able to convert it or I believe it's control control 8 I think it is yeah this person here we go Tim thank you Tim I'm actually gonna bring this over here because this is creepy like this guy he doesn't exist this is a fake person that's computer-generated if i refresh it's another fake person every time i refresh these are people that are being generated by this algorithm it's very creepy we live in a simulation but anyways so we've got our header now we need a navigation bar at the bottom before we get to the bulk of our content so I'm gonna grab my rectangle I'm going to draw one out again keeping in mind that we've got our home indicator at the bottom so we don't want too much down there so we're gonna leave a little bit of extra room at the top for some of our content now white is pretty good for the for the background I'm going to move the border to the outside and just make a little bit of a subtle border just like that now maybe to give this app a little bit of color just a tiny bit of color yeah everyone's freaking out about that algorithm it's pretty crazy I'm gonna select the artboard itself go back to my layers and I'm just going to add a little bit of blue to this artboard just a tiny bit of blue like I don't want to go too crazy just a little bit of blue that'll just separate the navigation bar and it'll just give us oh boy Tim Tim is just linking more things this X does not exist com I'm gonna have to I haven't checked that one out I'm gonna have to check that one out soon Tim so I just add a little bit of blue to this artboard very subtle change but it's gonna add a little bit of flair to our design alright so now for the navigation bar we want a few things we want maybe an icon for a dashboard if I bring up my notes we've got icon for a dashboard challenges schedule maybe a place for our friends to you know see their progress and then a button to create a new work out of some sort and if you follow me on Twitter I did hint at this we'll probably get to the animating part tomorrow of this navigation bar it's pretty fun stuff but check out my Twitter account and there's a fun post there so for icons in this case I'm actually going to open up a third party icon manager of course you can use the same icon plug-in that we used previously but I'm gonna type out dashboard I'm gonna bring in some icons that's a good one and maybe badge possibly for the challenges there we go and maybe a calendar and this icon plug-in is called worth icon managers called nucleo and I have some previous icons icon libraries that I just bring up brought in to them and maybe users there we go alright so we have some icons here these are looking pretty good I might want to make them a little bit larger now some of these icons are stroked based so you might notice that if I start enlarging these the strokes definitely change so keep that in mind sometimes you'll have to turn off responsive resize but I'm gonna make these a little bit larger I don't want to go too crazy I'm gonna turn all my guides I'm gonna make sure that the dashboard is lined up on this side the user is over here make sure that's lined up you know I don't have to worry about lining up right away we'll get to that in a second whoa that's a large stroke there we go now in the center here we might want a nice large button so a user can very easily add a new workout of some sort Alexander is asking do I try the new plug-in anima 4xt I did I have been playing around with it I will be streaming live with Brandon gross on Monday and Tuesday and we're gonna share our thoughts on the new animal plugin so stay tuned for that so in the center we might want that nice large image so I'm gonna go or button so I'm gonna go ahead and grab my ellipse draw one out just like that I'm gonna grab my asset that we've been using at least the color make sure if this is centered now on the inside we might want some sort of a plus button so to do that there's a few different ways we can do that we can very easily you know create a text layer and use the plus key or you can just grab a line draw one out change the color to white maybe make a little bit larger I'm going to duplicate and flip it right over here flip it 90 degrees and now we have a plus but simple right make sure it's centered in the middle it looks like it's almost Center make it a little bit larger that's looking a little bit better good now we have a plus button and I'm gonna make sure to group with these three and I'm gonna name this add now we have all these icons kind of floating all over the place right we've got this one I'm gonna make sure that the stroke is consistent 1.5 and we want to make sure that they're all nicely aligned from one another so what we're gonna do is I have the icon and the far right set up against the guide I have the one on the far left set up against that guide and what I'm gonna do is I'm going to Richard says why are you streaming Brandon gross yeah Brandon's great I met him and had a great conversation with him at Adobe MAX and we've been trying to get him he's a crazy busy guy so we've been trying to get him on Doby live for a while and now's the time so we're gonna be streaming Monday and Tuesday he's a great dude so I'm gonna make sure to select all these elements so I've got in my layers panel I've got my dash my badge my calendar users and the add button so I'm gonna hold down shift I'm gonna click on all of those and then I can use my distribution options so I can make sure one they're aligned in the middle and then they are distributed horizontally from each other and now they're nicely aligned just like that right and maybe since this will be maybe the home screen or the dashboard of some sort or maybe this will be the calendar for example we can use that asset and we can just apply it as a border just like that BAM and again as I mentioned tomorrow we're gonna get a little bit creative with the plus button we're gonna get Explorer animation we're gonna explore masking a lot of different things but before we get to that we need some content in this area so I'm gonna make sure to group the navigation bar just like that and now since this is sort of the calendar area of this application that will show our sessions we may want you know a bunch of different sessions just going down this artboard so here's what we're gonna do we're gonna start simple I'm gonna grab my rectangle and this is where we're gonna explore repeat grits one of my favorite features in Adobe XD I'm gonna draw out a rectangle just like this I might want to round out the corners just a touch right just a wee little bit and I'm not too concerned about the styling of this container just now because we're gonna be adding images into it and because you know Oh John is asking which switch are using or zooming in the part of the screen so I am using so I'm using Wirecast for streaming and then for zooming I'm just using the Mac accessibility feature so I'm holding down control and just zooming in but yeah everything else is done through Wirecast alright so we've got our image or placeholder for the image and because you know adding text on images let me just show you for example in my fitness section let's grab with this image here drag that in change the mask right because just like we were talking about earlier with these onboarding images because images have so many different colors in them it's going to be very difficult to put some text over top of these images without / overlays or gradients or that sort of thing so let's get a little bit creative and I'm going to duplicate this box I'm gonna bring it in a little bit let me change the color I'm gonna bring it in a touch just like this I'm gonna drop the size a little bit and I'm just gonna kind of offset it just like that so that we'll have an image in the background and then we will have some text so Christina is asking seems like every XC presentation I see is creating an app can this be used for websites also absolutely and in fact thinking back to many of the master classes that have held and also the daily challenges that I've been running I've focused a lot on web and desktop applications so absolutely you can definitely use this for websites as well and probably next week we'll talk a little bit more about that all right Thank You Alexander and Prakash is asking are you guys planning an Adam a measured custom alignment feature in xD short answer is yes but there there's a lot there's a lot to that the team is working on some additional things to help with measurements and things like that don't know when that's going to be released but yes alright so we've got this little area here now we may want to make sure because we have a white box on sort of like a blueish light background we may want to make sure this pops a little bit just stands out a touch so what I'm gonna do is I'm gonna add a little bit of shadow and going back to what we were talking about earlier again the last thing you want to do is do this I get that we want to separate it from the background but this is just way too harsh so bring that opacity down bump up that blur quite a bit and then you know tweak the white value if you need to but you know something probably around zero might work and then I'm gonna bring that opacity down even more just like that and again if you want to get a little bit creative you can add a little bit of color in here just a little bit doesn't make a huge difference but it's a very subtle difference just like that there we go right so there's without the shadow and there's with the shadow very subtle difference but it adds a little bit of something there to kind of pop it from the background so we've got this looking pretty good let's go ahead and very quickly add some text so this might be let's say this will be the session name course strength for example make sure left justify that right about there right add a dark shadow and use papyrus there we go to pan you are on your way to becoming a designer now maybe below we might want to indicate if this is a beginner class and maybe how long it might be so beginner for example right and then we'll do let's say 30 minutes I'm gonna drop the size quite a bit I'm gonna drop the weight as well and maybe I'll even drop the opacity a little bit not too much because it's a little bit difficult to read always I've got to make sure because sometimes if you're zooming in if you're designing very close things look great but then when you actually preview you're noticing no thing maybe the text is a little bit too small especially on a mobile screen and you can definitely preview your designs on your phone as you're designing but you want to make sure to open up this preview from time to time to make sure things are looking good and I am noticing the text is a little bit too small so I'm gonna bump up both of them check out the preview and that's looking a little bit better right there we go now down here we may also want to show thank you everyone we may also want to show you know maybe how many of our friends have taken this particular course so I'm going to grab my ellipse I'm going to draw one out like that right just like that let's see what that looks like maybe make it a little bit larger and I'm going to I'm going to set the border to white for now just like that and now we may want a few additional friends you know I don't have very many friends but at least when I'm in designing an X team I can pretend so what I'm gonna do for this this is our first hint at it edie repeat grits we're gonna press repeat grit at the top OOP there we go and you have to yep when you press repeat grit and let me know by the way just reminding me about my audio hopefully my audio has corrected itself on YouTube hopefully it's not too crazy still but I'm gonna go ahead and just drag out additional cards just like this so I've got four additional friends going across my record I can adjust the padding like this right now one of the cool features about repeat grids is it allows you to drag in images in bulk so hopping over to finder I've got some great images here I'm gonna just go ahead and select a few of those and it's simply gonna drag all four of those images directly into any of these slots there we go right I can always just dive in here and make some changes and what's nice about repeat grids is even though I can adjust the padding like this I can also set negative padding so I can just drag these back like that right that looks pretty good so now I've got four friends going across and I can go ahead and grab this text layer let's go ahead and let's just say 24 friends have taken this session right and this one might be definitely a little bit smaller I'm gonna drop the way to touch to about regular and maybe drop the opacity a little bit as well something like that there we go it's like an old kung fu movie no haven't hasn't corrected itself Oh No well I'm sorry YouTube's being YouTube alright and that first guy is famous on his xt stream I used this guy and his amazing beard a lot it's just a great-looking beard alright so we've got this looking pretty good I'll probably make a few changes to some of this design overnight but if I press play it looks okay right there's what maybe one more thing we're gonna add over to the right over here and that's maybe a star rating so with my rectangle I'm gonna drag out this little pill shape and then make sure the round of the corner is completely just like that and then maybe inside of here we're gonna have a red container and this will be the star rating of this particular oh no it's still booping that's awkward all right it's a it's a Boop loop thank you Tim awkward I'll have to fix that later it's supposed to stop when I when it finishes anyways so we've got this in here and we may want to make a star so what I'm gonna do here's a protip to create a star I'm gonna grab my polygon tool over here to the left the shortcut key is Y and I'm going to simply draw one out I'm holding down shift to constrain it now of course this doesn't really look like a star so there's a few things we can do one we have to set how many points are on this start so right over here I'm gonna choose five and then we've got these little handles on the inside we've got one that can control the roundness of the corners of this of this particular polygon we also have another one that allows us to create a star just like that turn off the border and if the roundness like if you want you know not sharp corners but you want rounded corners the business to round you can also use fractions so instead of one I can do 0.5 for example now give me a nice subtle round corner right Alexander says I saw there's a plug and supported by Adobe whiteboard but I can't figure out what it really does I will talk about white board maybe on Friday I've been working on a video for white board it's a fantastic plugin for collaboration but with 10 minutes left may not have enough time I'm gonna go ahead and let's say 4.9 stars but is it's a great app it's great plugin for collaboration purposes all right so we've got our little star rating that looks pretty fancy I'm gonna talk more about content to where lay out probably tomorrow but what I'm gonna do very quickly I'm gonna grab all these I'm gonna make sure to group them just like we've done many times before group just like that star rating and over to the right we have the padding option which turns on content to where layout again we'll talk a little bit more about that tomorrow but you can go ahead and enter the padding for your this particular group and essentially what it does looks at the relationship between the layers at the top and the background layer which is the one at the very bottom and it automatically sets padding but if you needed to you can always adjust that there but what's nice is that if you decide to move the star out the background automatically moves with it right I'm going either direction up or down right so if I wanted to just do something like this it very quickly rearranges itself which is nice all right so we've got this looking pretty good right I'd say make a few changes possibly I'll work on that later but now we want might want some additional cards going down our artboard so we can show some additional sessions now the last thing we want to do is have to select all these duplicate them make some changes duplicate them again make some changes really nobody wants to deal with that so with all of that all that information selected and again I just it can either do it in the layers panel or just select it all just like this up at the top here you've got your magical repeat grid button there we go and now all you have to do is just drag out additional cards going down your artboard just like this right now of course you want to make sure the navigation bar is above just like that and you can also adjust the padding if you needed to you can be positive padding negative padding it's completely up to you just like that that looks pretty good maybe I'll make it a little bit wider now the big question is how do we get some additional images in very similar to what we did with the photos I'm gonna grab some of these images will grab one two three and four I think we have for it one two three we have four cards I believe yeah I don't want to be President so we've got four images that look pretty good I think one that looks good two three and we'll go for the running one as well and we'll simply drag all these images I think I missed them drag all these images directly into X D and is gonna automatically populate the grid and we can easily easily double-click make some changes move these down a touch right there we go and the running one might look pretty good now even though it's a repeat grid we can still dive in there and make changes to our text I'm gonna name this cycling maybe this is a 20 minute ride right maybe this is weightlifting maybe this is a 60 minute session that's a probably a long time and this is outdoor run let's go for another 30 minutes is fine and and this will be intermediate right there we go so another thing we might want to do you know because repeat grids allows you to update across all cells is maybe what you know tweak the styling a little bit so maybe for this for this background shape just to get a little bit of fancy we might want to add a background blur now background blurs you got to be careful with because as you can see depending on the image behind it it can give a very strange feel to it so the few things that I love to do when working with background blurs one I like to usually blur it a lot that'll kind of help create a little bit of contrast between the shape the text in that background image - I like to brighten it almost as much as I possibly can that'll again create some nice contrast and then if necessary you can always bring in some of the color of the original shape just by increasing the transparency value so what you're noticing now is we have just little bit you can definitely see it here we have a little bit of that background image kind of seeping through and you can always make changes right you can blur it a lot you can flirt a little bit you turn down the brightness adjust the transparency but I think that looks pretty good it's very subtle so if I take a look at the preview I think things are looking okay now I'm gonna make a few changes and because we're working with a repeat grid it's gonna push these changes to all of our cards which is really nice exactly what we wanted right I might want to also space things out a little bit so I'm gonna select the repeat grid find my padding space it out a touch yeah and as Tim mentioned stick around in ten minutes we've got Kathleen coming up with the Photoshop daily creative challenge now one thing you're gonna notice is that we have these cards kind of extending down our artboard let me actually go ahead and add one more let me show you what we're working with let's go ahead and add this one over here and this'll be core strength again right move these cards back and we may want to be able to get to all of these cards we have them extending down the artboard but if we press the preview button and if we try to scroll nothing really happens and we definitely don't want that we want to be able to get down there right here's what we're gonna do with the entire artboard selected you're gonna notice handles all around it what you're gonna do is you're going to grab the bottom handle and you're gonna drag it down until you can see the final card now in this situation you have to keep in mind that we have a navigation bar that we're going to fix in just a moment so you'll want to add a little bit of extra space down here so for that navigation bar to sit really nicely and John is asking how easy slash hard is it for developers to take this prototype and turn it into an actual app it probably depends on your developers honestly XD and we might see this tomorrow allows you to share developer specs so you'll be able to share all of your your marked assets padding CSS snippets a lot of different things and there are also some applications that allow you to share even more but we've heard from developers that it's it's a very easy process as long as they know what they're developing right but you'll see more about the sharing side of things tomorrow so we've got we've got our art board extended and if we press the preview button we can scroll down right but of course that navigation bar is still kind of floating in space we don't want that so what we're gonna do in this case we're gonna select navigation mark and over to the right we're gonna choose fixed position when scrolling we're gonna go ahead and press that we're gonna press play one more time and now when we scroll that navigation bar stays in place and we can scroll to see all of our sessions just like that and if you really want to get fancy I don't know how well this is gonna work but we can select the background layer of this navigation bar we can turn on background blur as well maybe blur this quite a bit increase the brightness again very subtle background blur press play and as we scroll down you're noticing that the background blur is rendering in real-time which is really nice it may be a little bit overdone may not be necessary maybe I'll just bring up the transparency a little bit I like working with background blurs I'm cheesy like that I think that works it's very subtle but there we go we now have our background blur right now one more thing I want to cover very quickly right is you know if we were to dive in here into this repeat grid and we were to add an additional image let's say this one here pop that in here right you're going to notice that it applies that image across all of the Grippit grid cells and that's by design because repeat grids are meant to distribute styling changes across everything however if we were to turn this into a component just like that right and then if we were to go into one of these other ones let's say we wanted to replace her we can dive in here there we go and you're gonna notice it did not update on any of the other ones so if you are working with repeat grids and you want to make sure you can override some styling or other repeat grids that are nested inside of it turn it into a component that way you can very easily override those elements so that is going to wrap things up for today we've tackled onboarding we've tackled the session screen with repeat grids tomorrow we're gonna get a little bit more advanced we're gonna talk about masking a little bit more animation a lot of fun stuff but about you to everyone joining me I apologize for the audio issues I think it's a YouTube problem but I will look into it just in case but a big thank you to Tim and Alexander and RB and Michelle and Richard and Vipin and everyone else joining me stick around Kathleen is coming up in just a few minutes I will be back tomorrow morning same time same place and I will see you all then thanks everyone [Music] you

Channel: Adobe Creative Cloud

Views: 70,173

Rating: 4.9522138 out of 5

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, Howard Pinsky, Getting Started, Creative Warm-Up, Creative Warmup

Id: 4H2FZfoXnrs

Length: 87min 27sec (5247 seconds)

Published: Wed Apr 22 2020