Press "Enter" to skip to content

Getting Started in XD Daily Challenge 1

pGetting Started in XD: Daily Challenge 1p p hello hello hello and welcome to another getting started stream live on behance my name is Howard Pinsky senior XT evangelist here at Adobe and Im super pumped Ive been watching Adobe live streams all day and there have been some incredible talent and I have I cant even come close to what Ive seen today I hope youre all doing well see a lot of you in the chat I see Dana Elizabeth Kevin Ruth Chris Tom an L Tim one of our great mods Noel hey everyone let me know where youre from I love seeing where everyones from theres always some incredible places all around the world that you guys are all tuning in from and Im super pumped to be here today were going to be tackling the date of the challenge and if you saw earlier this morning Marisa was live kicking it all off we have two weeks of incredible daily challenges and today we are starting with designing a finance app a personal finance app and Im gonna be tackling that for the next hour so we have someone from area 51 thats wonderful I have an echo hopefully my audience okay I have an echo Im sorry big echo Oh No let me try turning this off hopefully that helps a little bit let me know if that helps but just to go over the schedule again we have Timmy Shana Jake and Reza absolutely incredible they were they were on today we had some Photoshop action with some with Tammy and Shana Oh better okay good fixed it hopefully hopefully have stays fixed let me know again if I have echoes and then we had Jake with some incredible animations and Reza just ended with some incredible music is too loud oh no okay hold on let me fix that okay hows that audio problems always always causes me trouble fixed hey Kayla Thank You Kyla so yeah we have some incredible talent all this week Monday or Tuesday Wednesday Thursday and were back again next week but we also have the daily challenges which is were going to get to today so if I hop over to my screen we have the new B hands daily creative challenge landing page and you have all the information you can possibly need and I would encourage you to go ahead if youre interested at all just hit that register button its gonna be fun and you can submit it directly to Behance but whats even cooler is obviously XDs free but you also have a slack channel you guys can jump in here were talking all day let me hop over there actually heres our slack channel announcement oh thats me Im live we have design feedback where were in there critiquing we have help if you need any and introductions and we have a ton of people just saying hi and introducing themselves its been fun Ive been in here all day while Ive been watching the amazing Adobe live streams so definitely join us in slack and we are going to jump in and get started and if you do want to ya participate and you havent yet definitely download the template we have a free Adobe XD template you can download right here you can also rewatch Marissas article from this morning and you can design along right along with me Im gonna be taking this challenge or you can design at your own pace and then submit it to Behance using the tag XD daily challenge and tim is posting it in the chat right now so you can jump in there and get started also we have on our Adobe XD website we have a resources section this has been fairly recently updated ahead over here we have UI kits for Apple iOS material design Microsoft you WP design and then we have all these kits down here which is great which it can certainly help with your designs we have you know this UI kit has a ton of elements we have some stuff for smartwatches if youre doing a navigation app and we actually have one down here the cooing cooing I dont know how you pronounce that but its kind of financing its a cryptocurrency so that might help you with this daily challenge and I also like when Im whenever Im kind of tackling some sort of a project I love looking for inspiration and I mentioned this last time I was on inspiration is huge yes and just go on behance and just start browsing so go into the discover section and you can actually go into the UI and UX section and then right at the top you can search finance and this will kind of give you some inspiration on the direction you should be taking your app now if I go over here I have a few that I really stood out to me this one here I love the the pattern at the top so were gonna kind of be pulling some of that stuff for todays design and this one had some interesting stuff to the the chart looks really nice and then we have down here this kind of progress circle which Im gonna show you how to create in Adobe XD as well so let me hop over to Adobe XD here is the template that you all can download let me know in the comments if you have downloaded this if you are working on this challenge or if youve already submitted it and you can go ahead and start off with a template and this is the template that we provided for you and we have over here some beautiful color assets and color schemes that you can use and the nice thing is these are very easy to add to your assets panel so if I switch over to my ass at the panel and if you notice the icon has changed at the bottom left hand corner its a brand new assets icon mind blown what I can do if I like this color scheme in particular I can simply click on this color and press the plus button and thatll add it directly to my assets panel I can even select multiple colors add those as well so I can do all of them at once or just one at a time and you can do the same thing for character styles as well lets say for example that I really like this character style its not great but just in case I do I can press character Styles and then I can use this anywhere in my document and whats really cool about this is they can all update the guy and youll see this as time goes on but let me grab this and drag this over here so now we have two right if I wanted to change this across my entire document let me actually put this over here and Im gonna go over here I know this is the color Im gonna rightclick click edit and that can change this and youre noticing it doesnt only change here but it changes here as well so it knows that that color is being used elsewhere in your document and its going to update which is really cool and as Chris mentioned in the chat you can also do it on your whole artboard so do I have an art this an art board I dont know if this isnt an art board this is just an element on the pasteboard but lets see if that works actually is it everything in here no its not but yeah if you have an art board this one its not gonna work because its pretty much just black and gray but if I go over here whoops and click plus its gonna add all those colors again theyre all the basically its like 50 shades of gray over here but you can add that so if you have a very colorful art board select the art board press that plus button and youre set so were gonna have some fun today we could go ahead and start with the template but Im not gonna do that I can actually scroll down here and were gonna create our own so were gonna create it whoops were gonna create this from scratch and Im gonna head over Im going to grab my artboard tool to the left and over here to the right I have PG play sorry Chris we have different templates we can start with so Im gonna grab my iPhone 6 7 eight and I have a new artboard Im gonna place it right over here and Im gonna zoom in and were gonna try and tackle a lot of this stuff when I whatever Im working on a project I like to you know plan things out sometimes Ill sketch it sometimes Ill just write things down on a notepad and for the home screen I want to kind of tackle total balance I want a monthly budget and thats what Im gonna use the progress circle for were gonna have some transactions navigation bar you know this whole sort of thing but lets not waste any more time lets start designing so were gonna start off I actually want to add a little bit of an element at the top which is our status bar for the iPhone and if I switch over here I have one of the UI kits that I just showed you a few moments ago on the Adobe XD website and all the way down here we have we have these elements and I can just grab one of these and you can see its outlined in green which means its a symbol right so Im going to copy switch back over here and then paste and I can move it in place if I wanted to just like that and if I do want to make sure its centered you see that line that goes straight down the middle thats telling me its centered with the document but if I want to do it very quickly over here to the right I can press align Center and its go Center that in the center of my document fancy alright so on the header Im actually going to have a little menu icon right about here Im gonna have a send icon so we can send money very quickly to people and a total balance and obviously the background header and I kind of want to start with a little bit of a funds sometimes I do wireframes but sometimes I do design while Im designing so what Im going to do Im gonna add a gradient to this background were gonna have basically the top section is gonna be nice and white and then the bottom section is gonna have a gradient Im gonna open up my Creative Cloud libraries and I recently added a bunch of gradients that I downloaded I found a post on Behance that offered a bunch of gradients and I think some of these will look really nice so Im gonna add a background or just a rectangle in the background just so I can house this gradient so its not like exploding off my artboard Im gonna make sure to move it behind my status bar Im gonna name it background I definitely dont need a border and Im going to drag this gradient and youre gonna see is the linked gradient so if I do edit this elsewhere back in Photoshop for example itll update as well which is fantastic so theres my gradient and now above it I want a white background at the top and thatll house my total balance so Im just gonna drag a border somewhere right around here looks pretty nice and its okay if it goes off the art board still remains inside of it Im gonna put it underneath the status bar but above the background Im gonna name this header now Im a big fan of curvy lines I think 2018 theres been a lot of curvy lines and gradients and things like that and I can easily do that if I double click and then add a point like this youll see by default its just a very straight line but if I double click on this line again I have these little points and I can just drag this to make a nice curvy line at the top for my header I can move this out if I wanted to and that looks pretty nice Im also going to turn off the border has been a curvy here that is for sure whens the deadline for submissions you can pretty much enter whenever you like every day has a different challenge but you can enter it today tomorrow Friday doesnt matter so Im gonna add some additional curves in the background Im gonna duplicate this layer by holding our command or ctrl and pressing the D key on the keyboard Im gonna make sure to move this one to the back and Im gonna decrease the opacity so we can see them whoops and then if we double click we have access to those points again and maybe I want this one curved the other way just like that and Ill duplicate it one more time and make one more edit there we go it kind of works kind of could be better maybe that thats looking a little bit better its all about revisions and iterations okay so were gonna leave it like that so we dont make waste too much time but Im liking the look of this so far so I wanted to do I want to add a header at the top so we know what screen were on and then Im going to add the total balance right below so you press the text tool hit the right or the left thats the left and Ill type in home beautiful right in the center again you can use the align Center icon another whoops from Howard yeah therell be many of another many whoopsies along the way now I wanted to find some text so for this Helvetica its not bad but I do want to use a veneer Im not Im a big fan of a veneer next lets actually go for some condensed and then Im gonna bring this text down you can grab this little handle at the bottom of your text and just drag it to make it larger or a smaller and place it where you want on your document again Im gonna place it right in the center the color not too bad its not too dark but its not too like light and I do want to make sure to use this throughout my document so Im gonna head back to my assets panel press the Im actually get rid of this one cuz we dont need that press the plus button beside character styles and now its going to save so if I want to make changes to all instances of this text later on you can definitely do just by rightclicking pressing Edit and making the changes there a venir represent indeed so next we want to do the total balance so were gonna press the text icon again or the tool how much money should we have lets go for like forty two thousand five hundred and one dollars its probably a lot more than I have in my bank account but were gonna run with it Im gonna make this nice and large and I still have a veneer next condensed selected but I may want regular looks a little bit boring we want that to really stand out cuz its a lot of money lets see how bowl looks pretty good but Im not really feeling the color so what I want to do Im gonna grab my eyedropper and Im just simply gonna select a colour on this page that looks decent and it kind of blends in with the rest of the the arch board that looks good and Im gonna make sure to save this color press the plus button over here and lets actually name this total balance oops there we go the spelling is good Im gonna grab a sip of water hows everyone doing today by the way have you been here the whole day watching the amazing streams I saw Timmy stream earlier this morning incredible his work is amazing so this down here was gonna tell us its total balance and thats obviously way too big were gonna make that nice and small and we probably dont need it so bold angelic has been here all day thats incredible fair to middling and Im gonna decrease the opacity just like that alright now looking at this there is definitely a large space here so what I can do is I can just select all of these elements here hold down shift to deselect the background and just move it up a little bit so we dont have that massive space at the top beautiful so the next element now that this top section is done Im gonna add the progress meter which is basically like the monthly budgets and this has been fun because theres a few ways to create one and I found a pretty decent way Im gonna show you how I originally created it I basically grabbed my ellipse tool drag out a circle Im gonna turn Ill keep that on for now Im gonna double click and Im gonna put a point exactly where I want the progress meter to stop lets say it right around here all right now you can grab the pen tool and youre gonna notice theres one point at the top so I can click on that click anywhere else outside and press escape to end it and I can click on one hold down shift click on the other and the other with the one before that point and press Delete Im gonna turn off the fill set the border to white and then crank up the size now that looks pretty good but someone on Twitter let me hop over to Safari here just like doing by the way just like its doing good all right hop over is Safari here and or Chrome and someone on Twitter tweeting me this and they basically showed me an easier way to create a progress meter for in Adobe XD which is really cool and mighty Alex on Twitter even said that he might be creating a plugin for Adobe XD to create these really easily so let me show you how thats done Im gonna switch back over to Adobe XD were gonna delete this and require some math but the really cool thing watch this Im going to create a circle one more time the really cool thing is that Adobe XD can handle math oops where did it go there we go another whoops it can handle math which is great because I dont really understand math that well Im not the greatest in math so I have my notes here so I dont get the this wrong so what you do Im going to turn the fill off Im gonna set the border pretty high and crank that up just leave it like there for now and what you want to do is take note of the width of this circle so right now it is 158 pixels across take note of that now in the dash section youre gonna enter 3.14 I know this is getting crazy times the width so which is 158 thats thats 148 times 158 and then youre gonna times and then in brackets so does that first the percentage so if I wanted this progress meter to lets say be I dont know 75 were gonna put 75 divided by 100 and then close the brackets and press return and then in the Gap section its gonna duplicate that but thats not we want we actually want to do 3.14 times the width again 158 and thatll give us basically a 75 progress meter which is really cool did someone mention pi yes I did I really want some pie I have some pie in the kitchen but I dont want to leave you guys maybe Ill bring some for all of you and then I can go ahead and just rotate this any way I want and Ill leave it right about there so now its like 75 filled for my monthly budget so Alex if youre watching by any chance thank you for this tip I know he mentioned he didnt create this tip or find out hes found it from someone else but its really cool and if he can create a plugin that can kind of avoid all that math mumbojumbo thatd be fantastic so we have our progress meter and we can also change the caps so if we want it a little bit rounded we can do that as well that was pretty nice and then in the center were gonna type out monthly budget there we go were gonna make sure to Center this Aven youre next is good lets make it nice and bold and well set the color to white put that right in the center and increase the text just a little bit that looks pretty good not bad we can what we can also do is grab this guy in the background were gonna duplicate it and then in the layers panel Im not naming my layers so I apologize Im gonna turn off the dash and turn off the gap and then just decrease this a little bit so we have a little bit of an indicator of how much is missing which kind of gives it a nice little touch little flair looks good all right so with the monthly budget now done we want to get to some transactions and then after that were gonna add a navigation bar at the bottom so further transactions second were gonna grab my little rectangle tool over to the side and simply drag one down this way just to house the transactions I dont really want them floating on that gradient background can you repeat that math mumbojumbo again yes and Ill also retweet it so if you follow me on Twitter at Pinsky or go to mighty Alexs Twitter account but its basically actually let me head over here so you take note of the width of the ellipse and then the gap the dash is 3.14 times the width times percent divided by 100 I know its a lot to take in and Alex please make that plug in and then gap is just 3.14 times the width now I did notice when I just did the dash and press return it gave me the result of looking for so maybe thats all you might have to do but experiment with it all right back to Adobe XD so we have our housing for our transactions just like that which looks pretty good I mean its a white box how good to cut it look were gonna type out right above transactions we want to make sure that this is actually justified to the left make this a little bit bigger Im not feeling the bold for this one so maybe Ill go medium it looks okay youre welcome so transactions now down here we want to actually create a repeat repeat grid so Im gonna start by just filling in the information this will basically be my latest transaction so let the first one lets say I went to Chipotle and I cant see my text so oh do you notice that theres spellcheck in Adobe XD one of the new features that just shipped today if you go up to the Edit menu we have spelling and grammar which is wonderful everyone needs spellcheck but we cant see anything so Im going to change the text to a darker color and lets actually break away from the condense lets go for just a veneer next its a little bit large bring that down and who doesnt left Chipotle or any sort of burrito right now were going to put the date what day is it September 18th I think 2018 make this a little bit smaller so its not too overpowering and youre noticing as Im dragging things around everythings snapping into place those those guides are super helpful yes spellcheck I know thats one of the bit I mean they we shipped responsive resize we ship time to animate our transitions and now we have spellcheck I mean how amazing is that has their way to lock the text and copy once you put it in so you dont actually change whats written I mean theres a lock icon but it doesnt change I dont think it changes oh it does ha ha you learn something new every day so over here in the layers panel theres a lock icon which not only prevents you from moving that text but it also prevents you from double clicking and changing it there you go I just figured it prevents you from moving shows what I know so we have the name of the transaction we have the date and Im gonna make one more over here and this is going to be the price so Im gonna make not how much did ship hold a nine dollars and I dont know lets say 23 cents and this one is going to be were gonna make this nice and visible and make it a little bit bigger beautiful so we have this somethings missing I think you know what I might want an icon just beside just to give a little bit more of a Jeffrey says nine dollars and 85 cents okay lets go with that nine dollars and 85 cents very specific it might be right without the guac oh yeah with the guac its like 14 dollars right something like that so will it be interactive it can be and we will definitely do some prototyping time permitting I think well have time we will definitely do some prototyping Im going to zip through this so if I go over to finder I actually have some icons over here and lets look for a coin icon Im gonna grab this drag it in here whoops I dragged it into that shape from the drag down to the pasteboard and lets actually go for what color should this be maybe not purple because that might blend too much its not bad but maybe like a bluish alright lets go for that so lets put this coin right here we have our transaction right up here and we have the price those icons are from subtle icons I believe I did purchase those but protip if you go up to your Creative Cloud app and you go into assets and the marketplace you can actually search for icons and there are a bunch of icon sets you can find individual icons or icon sets and I actually have one in my Creative Cloud libraries if I go to icons I have this icon set right here I can drag right into into Adobe XD its a large file and everything is moving around there we go and these icons are from the market place in the in your creative cloud application they are free to use and you can basically just pick and choose icons to use in your project which is really cool so definitely if you dont want to pay for icons definitely go to your creative cloud marketplace and do some searching youll be surprised what you can find so we have our first transaction and now we could duplicate this a million times but thats just a pain so what were going to do is use a repeat grid so Im going to make sure to select all these icons so Im gonna select this one hold down shift click on the name the date and the transaction now just to organize these in my layers panel I want to put these into a group and you can easily do that with command or control G on your keyboard and I can name this transaction and now once thats done to turn it into a repeat grid it doesnt have to be in a group for a repeat grid but it just makes a little bit easier on the eye in the layers panel over to the right we have our repeat grid option if you press that youll notice we now have a green handle below and to the right and if I pull this down we now have more transactions and this basically looks like an average week in my house just Tripoli every single day and I can go in here lets say we had Chipotle yesterday and Im not sponsored by Chipotle I just enjoy its the first thing that came to mind and it basically just changed the text for all of these and if I added guac one day I can just add 14 and I should probably align this to the right and then move it over there we go so we have our transactions and you can go through and edit all of these to your hearts content but to save time its all Chipotle all day so we have more or less houses space and oh how is the spacing between thats a good question so if you click on the repeat grid and you hover over youll see this beautiful pink box in between each transaction and if we had more this way youll have one horizontally and vertically which is really nice and if I just drag this I can make them really close or it can make them further apart just like that now to finish off this screen lets create very quickly a navigation bar at the bottom so we can quickly navigate during the prototyping phase two additional screens Im gonna grab my rectangle tool and drag out a navigation bar right at the bottom I probably dont need a border Ill keep it white and what Im gonna do Im gonna grab some more icons maybe Ill make the maybe make this just a little bit turn down the opacity to 95 percent add a little bit of flavor to that lets hop over to my icons lets find a home icon this is why I love icons you can just grab button icon dragging in and pop it into place and Ill worry about the colors in a second so we have a home icon we have where my icons go here we go we have a lets mine a list this is gonna be for our transactions put that over here for now we have a wallet thatll be for our credit cards and lets say a profile icon there we go so now we have a bunch of icons we need to align them and this is another cool trick so what you can do if you select all of them Im actually gonna put this one right around here Im gonna line it up with that transactions background same thing with this one Im going to select all the icons holding down my shift key and then I can align them if I click right over here I can distribute them horizontally and vertically so theyre all perfectly aligned I dont have to worry about anything now since were on the home screen we do want to change this icon at least the color lets actually choose the blue looks okay and then these ones Im probably gonna drop the opacity just like that great so we have our home screen but the problem is we have all this stuff down here so we want this home screen to be scrollable so if I click on the home screen the artboard I can simply just drag this down and now I have area to scroll and I can click on my background drag that down as well so I have a nice gradient at the bottom and I want to make sure if I have my artboard selected that vertical scrolling is on so I press play to the play button at the top I can now scroll but youre noticing the navigation bar is kind of doing its own thing which I definitely dont want so we need to fix some of these elements so back in my layers panel Im gonna make sure to select the navigation bar Im gonna select all of the elements that are in the navigation bar put them into a group again lets name this navigation and then over to the right we want to click fix position when scrolling and now if I play oh it fixes in place which looks great they may also want me please oh yes I can probably do that so what you can do grab the icons again and just move them up and to the side youll notice those those lines we now have it aligned to the navigation bar and the artboard so that should look a little bit better if I wanted to I can select these move these in a little bit move that one in move this one in and then if I select them all again and distribute horizontally theyll all line up perfectly great I may also want the header to be fixed so Im going to select all of these icons make them into a group header and fix and if I play that we now have a fixed header but youre noticing because the header is not at the top of the layer stack Im gonna move it right on top and now we have a beautiful home screen lovely okay so lets move on to the next screen next rain is going to be transactions so what Im going to do Im going to duplicate this home screen so I can work on a lot of the same elements I can just kind of transfer them over select the artboard hold down my alt or option key on the keyboard and drag it over to the right there we go now for this one its going to be transactions name your artboards oh yes Thank You Geoffrey I should do that Im gonna double click on the name name this home name this one transactions theres a lot of pressure live streaming you forget to do things like name your layers or name your artboards put things into groups so this up here instead of total balance nope you can do it you can do command II as well theres a lot of ways you can duplicate things but thats just the way I wanted to do I want to switch it up a little bit so this will be last seven days and lets say in the last seven days between all that Chipotle I dont know its probably 945 dollars make sure to Center this there we go now instead of a monthly budget were gonna delete this just delete all of it transactions will keep it will move down a little bit go select all of this stuff move it down and here were actually going to create some sort of a chart that shows our spending over the last seven days now to do that were gonna grab our line tool over to the left make sure everything lines up and youre noticing those smart guides are appearing I can just drag a line right across my document Im going to change this color to white and make this border nice and large whoa thats too large now looks pretty good let me zoom in here so you can see what Im doing and now we basically we basically want seven day period right so were gonna add were gonna grab our text tool lets type out lets start at the tenth ten beautiful its a little bit too big were gonna shrink this down we dont need bold medians probably good not too big might be a little bit too big and we basically want seven of these so we can create a repeat grid and we can count out seven one two three four five six seven beautiful and Im gonna use this spacing to just space it all the way out so it lines up on the righthand side and then I can go in here this is 11 this will be 12 13 14 15 and 16 there we go now looks good looks fantastic so now for the actual chart we have this line that goes across our artboard we need to start adding points and you can do that by double clicking on the line and then everywhere theres a date Im basically going to add a point Im gonna click click click and go through until I have all seven points I have one at the beginning and then six more after that now by default if I were to simply grab these points and drag them up we have very straight lines which isnt bad you can definitely do that but I want to go a little bit curvy so Im gonna double click on each point and youre noticing we have these little handles that pop out that will allow us to create curved lines right so now when I drag this up whoo we have these beautiful curved lines so this this is basically our daily spending maybe on the 15th we bought a lot of stuff on the 16th just a little bit and the 10th well just leave right around there so now we have this great looking chart at the top of our artboard that basically shows us how much weve spent on a daily basis but we we want to kind of give the idea that you know maybe a cursor is hovering over one of these dates so lets say the 15th will do this one we want to create like some sort of a circle so Im gonna grab my ellipse tool create a little circle right about here and Im holding down my option key and my shift T key to constrain it shift is constraining it option is creating it from the center it turnoff the border its not too big maybe its a bit too big there we go and then lets command or control D and then make it a little bit smaller create a little dot in the center a little indicator icon that looks pretty good so now that kind of tells me that a cursor might be hovering over this date and then over top of it we want to actually write how much we spent that day grab my rectangle tool drag one out like this and again those smart guides are lining everything up which is great Im gonna add a little triangle right below lets fill that with white turn off the border again want to make sure to line this up there we go and I can double click and make some changes if I need to and then to add these two together I can select the rectangle or triangle hold down shift click on the rectangle and then actually before I do that I actually want to make this a little bit rounded just a little bit and then if I hold down shift click on the triangle and add these together now they are one shape beautiful doc the opacity down just a touch and then in the center lets say on this date I spend 65 and 23 cents hows that looking not too bad not too shabby I do want to put the date or at least the month so right up here lets say September 2018 this will make nice and bold and just line it up I can justify it to the left there we go so we have our just to recap we have our transactions we have our transaction icon which is going to link to this screen I can grab our transactions and make sure these are all in group and just bring this up a little bit there we go so now how do we make this actually do something so lets go back to our home screen and were going to link this up but before I do that I just noticed that this guy here should actually be should actually match this guy here this is 32 I can actually add this to my assets panel thats just basically a color and then turn this down to 32 and this guy I should have added this to my assets panel always add things to your assets panel people itll save you a lot of trouble and I can click on that and then increase the opacity so we have our transaction screen now if I hop into my prototype mode yep I got it and if I scroll down here basically I want to I want to tell Adobe XD when someone clicks on the transaction icon its gonna go to this screen right so if I click and find this icon you have this blue handle I can drag it over to the right let it go and the triggers gonna be tap Tran its going to transition and the animation I want to slide it over to the right I can either do slide to the right or push to the right slides kind of fancy kind of overlaps the previous artboard Ill ease it out and have a duration of 0.4 seconds you dont want to go too far or too long and if I press the play button and press the transition a transaction icon we have a beautiful transition and then we can do the opposite we can click on the home icon here go back here and slide to the left slide left and goes to transactions and it goes home looking pretty good true tackle one more screen lets actually tackle a credit card screen Im going to duplicate this one more time again you can select the artboard press command or control D to do that as well and this will be cards and lets get lets go back to design mode how long did it take to learn you learned so much about this program quite a while I mean not too long but not overnight Ive been using it since the beta way back when it was project comment and Ive kind of been learning ever since so this will be credit cards here we go and Im just gonna delete all of this stuff wheres my layers elite you probably dont need any of that transactions we will get rid of as well and we basically want a bunch of credit cards on this screen so Im gonna make this our highlight icon drop this one to 32 all right and now for the credit cards were gonna use another repeat grid so Im gonna create one credit card here and just so I can see it Im gonna drag it down here that looks good now turn the border off lets go ahead and round the corners and grab one of these guys drag it in a little bit make sure its centered on my document and what I want to do is commander control are to create a repeat grid and just drag this down just like that and just like you were able to drag create this bigger spacing you can also create much less spacing but its hard to see right now all the credit cards are kind of lat overlapping each other and theyre all white so if I go over to find her where is finder and I go to my cards I have these template credit cards I can just drag these right in to Adobe XD onto any of these and its basically going to populate and because its behind I can just move this up over top of the header and I now have a repeat grid with these credit cards which is great its exactly what we want and what would happen if someone clicks on one of these credit cards it would probably go to another screen that kind of collapses everything and show some transactions so were gonna duplicate this drag it over one more time were gonna make the spacing a little bit shorter lets say its gonna focus on this credit card here and we may want to grab our transactions from this artboard copy it paste it over here and make sure its behind the navigation bar and these will be the transactions for this specific credit card now we can wire it up so if we go over here lets say were gonna click on this one its gonna go to this screen we can do actually for this one we probably dont want to transition so were gonna do none its gonna just appear and then weve got to hook up the credit card icons drag this over here you can slide it over to the right same thing with this one and I believe if Im not mistaken I go here if I right click I can copy and paste interaction and you know itll do that for me which is great and then home I can do the same thing copy oh that one already did and paste interaction so lets see how things are looking play we have our transactions we go home we can go to our credit cards nope we did it wrong so our credit card should actually link to this one first there we go same thing with here lets try that again its all about trial and error theres our transactions we have our credit cards and we can go home and if we click on this credit card it collapses and we have all the transactions for that specific credit card which looks good did not know you can do that on the prototype section yeah thats pretty cool you can actually copy transit interactions and save a little bit of time so one thing I kind of want to do over here transactions it looks too repetitive I actually want to pull in another one his budget so Im gonna drag this down actually maybe right here were gonna have a few more circles so I could go ahead and just copy this guy select both of these both of these lips is Im gonna put them in a group progress you know you know what Ill grab the monthly budget as well copy head over do this artboard paste it obviously way too big so were gonna drag this down and youre noticing that just messed everything up so we have to fix it so were gonna select the top progress circle and were going to turn down the size quite a bit do the same for the other one and now were gonna do some more math so lets say this is going to be 90 maybe so 3.14 times the width of this circle which is ninety five point two two times and then in the little brackets we have lets say 95 percent divided by 100 and then this one 3.14 times the width 95 point two two there we go so we have 95 percent and we can just rotate this just like that and lets say this will be food make a little bit bigger beautiful let me duplicate it one more time across instead of 95 lets do 3.14 times the width again in ninety five point two two times lets go for twenty two percent divided by 100 and now we have twenty two percent and this will be what should this be auto maybe spelling us great hows everyone liking this so far and then well do one more right across here make sure everything lines up and this will be what should this be amaze hats lets be shopping make this a little bit smaller and well leave that at that should the line chart have round caps too you know what maybe not so we can easily grab this guy and just do this because we can oh youre oh youre talking about this guy up here yeah we can do that too we can have round caps up there we can have straight caps down here we can go crazy we can do whatever you want because were designers right so there we go south lets see how things are looking we have our homescreen right we have scrollable action so we can scroll we probably want to add a little bit more space down at the bottom so that it doesnt hit the top or doesnt mess too much with the nav bar right give some nice padding at the bottom we can go to our transactions which we have now our brand new progress circle budgets with our indicator at the top thats a little bit too difficult to read so I probably change that again scrollable Ill have to change the padding at the bottom we have our credit cards we can click on one it collapses and we have our transactions again scrollable the the fixed elements are a little bit weird but it doesnt look too bad but there we go thanks for looking pretty good and then at this point you can probably polish it up by adding additional elements lets say we want a menu icon at the top right Im gonna grab my line tool drag one over here lets make this two pixels and I can turn this into a wont where did it go Ill just duplicate it and we now have a menu icon and just to get a little bit fancy Ill make this one a little bit shorter and this one a little bit shorter as well and I can turn this into I can make it purple and if I group this call it my hamburger icon place it into my header and now as I reposition this youre noticing now its lined up with the home text which looks good and I can easily copy us or I can add it as a symbol so if I go back to my assets panel and press the symbol icon or the plus button I now have my hamburger icon as a symbol so if I go over here I can easily drag one out place it where I want it to and now I have two symbols and the cool thing is is if I do decide to edit one of them what say I didnt like the color on this purple right so if I go back and edit one of these and change it to like lets say black we now have the black changing on all of the symbols so if you had 200 of these symbols right across your document on all these different artboards you can just edit one of them and itll apply to all of them mario says is it possible to make navbar fixed when switching between screens in prototyping not necessarily what you could do is use overlays and overlay transition so let me show you how that would work but basically the navbar is if its fixed itll kind of go with the previous navbar but an overlay transition if I do have lets say another artboard Im gonna have another iPhone 8 artboard oh let me put it down here somewhere and Ill make just very quickly this wont be pretty but Ill make a very quick menu Ill make this a little bit darker no border lets add a little bit of a shadow 10 pixels to the left or to the right a little bit blurry and I turn off the fill of this artboard for the home screen what I can do in the prototype mode grab my new menu icon right and link it all the way down to my new menu this down here and instead of transition I have overlay and right up here itll basically tell me this where its gonna end up I can move it across if I if this artboard was smaller I can move it anywhere I want Im gonna slide it to the right so now what happens here if I press play instead of the whole artboard transitioning to another artboard just the menu like the menu from that previous artboard flies out as an overlay so the nav bar stays its a little bit limiting because you cant have so much information on on an overlay you can have a lot of information but the nav bar kind of to answer your question the nav bar will be different on every artboard if that makes sense it may not make sense Im not quite sure but yeah so the menu is there we have our home screen with our monthly budget we have some transactions using a repeat grid we have our nav bar at the bottom which is fixed into place as well as our header we have our transactions over here with this beautiful chart we created with a line and we were able to double click on the points to create them as nice and curvy we have with this this is kind of not lined up there we go now its lined up it bothered me we have additional progress meters showing how much of our budget we spend on food auto shopping our transactions at the bottom again our credit cards and they collapse so thats pretty much where were gonna end it today I hope this helped some of you especially those who are just getting started definitely make sure to head over to the Behance page Behance net slash daily creative challenge look through that some of the stuff make sure to register you know join our slack were in here were talking were having fun today this challenge was personal finance app which is what we just tackled tomorrow who knows and we have Tuesday Wednesday Thursday Wednesday Thursday Friday and then were right back at it again next week and every day at 8:30 a.m.

Getting Started in XD Daily Challenge 1

Pacific time we have the wonderful Marisa on stream live from San Francisco kicking off each daily challenge which is super fun also head over to the Adobe XD website click on that resources tab and just download these download all the UI kits because theyre fantastic and you can use any of these for your projects especially this one if youre doing the daily finance application grab this cryptocurrency UI kit and theres a lot of elements in there you might be able to use are you gonna post this on Behance I might Im gonna polish it up a little bit but once I have it ready to go I can basically assuming that all this stuff wasnt here I can go up to the top I can click on the share icon and I can publish my prototype let me actually just do that now Im gonna name this finance app dont want allow comments sure why not oh sure yes Oh No something doesnt contain interactions well once that was done I can basically grab a link or an embed code and I can publish that directly on behance or I can just go ahead and export the individual images for each artboard and paste them there as well so theres lots of ways you can post on Behance but if you do make sure to use the tag XD daily challenge that way we can find it we can go to behan so we can search XD daily challenge we can see all your stuff and they do take a look at some of them on the stream so definitely do that this was fun let me know if you are taking part in the daily challenge tweet at Adobe XD you can tweet at me at Pinsky if you want and Ill definitely be back tackling another daily challenge at some point and I hope you guys all enjoyed this I hope you have fun its been a long day of streaming not for me this is just an hour but Paul tranny was on buddhu val was on and some amazing talent again let me open up and let me show you the schedule for tomorrow Timmy Shauna Jake and Reza all gonna be on tomorrow with Paul tranny and voodoo Val its gonna be a fun day and there are some incredibly talented people they have a lot more talent than I do but definitely come back tomorrow morning and Marissas on at 8:30 a.m.

Getting Started in XD Daily Challenge 1

so definitely check that out this has been fun hope you all had fun hope you all learned something and Ill see you all in another stream take care everyonep

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *