Press "Enter" to skip to content

Getting Started in XD Daily Challenge #1

Getting Started in XD: Daily Challenge #1

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 I’m super pumped I’ve been watching Adobe live streams all day and there have been some incredible talent and I have I can’t even come close to what I’ve seen today I hope you’re 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 you’re from I love seeing where everyone’s from there’s always some incredible places all around the world that you guys are all tuning in from and I’m super pumped to be here today we’re 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 I’m gonna be tackling that for the next hour so we have someone from area 51 that’s wonderful I have an echo hopefully my audience okay I have an echo I’m 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 how’s 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 we’re back again next week but we also have the daily challenges which is we’re 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 you’re interested at all just hit that register button it’s gonna be fun and you can submit it directly to Behance but what’s even cooler is obviously XD’s free but you also have a slack channel you guys can jump in here we’re talking all day let me hop over there actually here’s our slack channel announcement oh that’s me I’m live we have design feedback where we’re 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 it’s been fun I’ve been in here all day while I’ve 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 haven’t yet definitely download the template we have a free Adobe XD template you can download right here you can also re-watch Marissa’s video from this morning and you can design along right along with me I’m 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 you’re doing a navigation app and we actually have one down here the cooing cooing I don’t know how you pronounce that but it’s kind of financing it’s a cryptocurrency so that might help you with this daily challenge and I also like when I’m whenever I’m 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 we’re gonna kind of be pulling some of that stuff for today’s 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 I’m 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 you’ve 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 it’s 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 that’ll 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 let’s say for example that I really like this character style it’s not great but just in case I do I can press character Styles and then I can use this anywhere in my document and what’s really cool about this is they can all update the guy and you’ll 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 I’m gonna go over here I know this is the color I’m gonna right-click click edit and that can change this and you’re noticing it doesn’t only change here but it changes here as well so it knows that that color is being used elsewhere in your document and it’s 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 don’t know if this isn’t an art board this is just an element on the pasteboard but let’s see if that works actually is it everything in here no it’s not but yeah if you have an art board this one it’s not gonna work because it’s pretty much just black and gray but if I go over here whoops and click plus it’s gonna add all those colors again they’re all the basically it’s 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 you’re set so we’re gonna have some fun today we could go ahead and start with the template but I’m not gonna do that I can actually scroll down here and we’re gonna create our own so we’re gonna create it whoops we’re gonna create this from scratch and I’m gonna head over I’m 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 I’m gonna grab my iPhone 6 7 eight and I have a new artboard I’m gonna place it right over here and I’m gonna zoom in and we’re gonna try and tackle a lot of this stuff when I whatever I’m working on a project I like to you know plan things out sometimes I’ll sketch it sometimes I’ll 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 that’s what I’m gonna use the progress circle for we’re gonna have some transactions navigation bar you know this whole sort of thing but let’s not waste any more time let’s start designing so we’re 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 it’s outlined in green which means it’s a symbol right so I’m 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 it’s centered you see that line that goes straight down the middle that’s telling me it’s centered with the document but if I want to do it very quickly over here to the right I can press align Center and it’s go Center that in the center of my document fancy alright so on the header I’m actually going to have a little menu icon right about here I’m 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 I’m designing so what I’m going to do I’m gonna add a gradient to this background we’re gonna have basically the top section is gonna be nice and white and then the bottom section is gonna have a gradient I’m 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 I’m gonna add a background or just a rectangle in the background just so I can house this gradient so it’s not like exploding off my artboard I’m gonna make sure to move it behind my status bar I’m gonna name it background I definitely don’t need a border and I’m going to drag this gradient and you’re gonna see is the linked gradient so if I do edit this elsewhere back in Photoshop for example it’ll update as well which is fantastic so there’s my gradient and now above it I want a white background at the top and that’ll house my total balance so I’m just gonna drag a border somewhere right around here looks pretty nice and it’s okay if it goes off the art board still remains inside of it I’m gonna put it underneath the status bar but above the background I’m gonna name this header now I’m a big fan of curvy lines I think 2018 there’s 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 you’ll see by default it’s 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 I’m also going to turn off the border 20:18 has been a curvy here that is for sure when’s 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 doesn’t matter so I’m gonna add some additional curves in the background I’m gonna duplicate this layer by holding our command or ctrl and pressing the D key on the keyboard I’m gonna make sure to move this one to the back and I’m 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 I’ll duplicate it one more time and make one more edit there we go it kind of works kind of could be better maybe that that’s looking a little bit better it’s all about revisions and iterations okay so we’re gonna leave it like that so we don’t make waste too much time but I’m 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 we’re on and then I’m going to add the total balance right below so you press the text tool hit the right or the left that’s the left and I’ll type in home beautiful right in the center again you can use the align Center icon another whoops from Howard yeah there’ll be many of another many whoopsies along the way now I wanted to find some text so for this Helvetica it’s not bad but I do want to use a veneer I’m not I’m a big fan of a veneer next let’s actually go for some condensed and then I’m 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 I’m gonna place it right in the center the color not too bad it’s not too dark but it’s not too like light and I do want to make sure to use this throughout my document so I’m gonna head back to my assets panel press the I’m actually get rid of this one cuz we don’t need that press the plus button beside character styles and now it’s going to save so if I want to make changes to all instances of this text later on you can definitely do just by right-clicking pressing Edit and making the changes there a venir represent indeed so next we want to do the total balance so we’re gonna press the text icon again or the tool how much money should we have let’s go for like forty two thousand five hundred and one dollars it’s probably a lot more than I have in my bank account but we’re gonna run with it I’m 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 it’s a lot of money let’s see how bowl looks pretty good but I’m not really feeling the color so what I want to do I’m gonna grab my eyedropper and I’m 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 I’m gonna make sure to save this color press the plus button over here and let’s actually name this total balance oops there we go the spelling is good I’m gonna grab a sip of water how’s 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 that’s obviously way too big we’re gonna make that nice and small and we probably don’t need it so bold angelic has been here all day that’s incredible fair to middling and I’m 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 don’t have that massive space at the top beautiful so the next element now that this top section is done I’m gonna add the progress meter which is basically like the monthly budgets and this has been fun because there’s a few ways to create one and I found a pretty decent way I’m gonna show you how I originally created it I basically grabbed my ellipse tool drag out a circle I’m gonna turn I’ll keep that on for now I’m gonna double click and I’m gonna put a point exactly where I want the progress meter to stop let’s say it right around here all right now you can grab the pen tool and you’re gonna notice there’s 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 I’m 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 it’s 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 that’s done I’m gonna switch back over to Adobe XD we’re gonna delete this and require some math but the really cool thing watch this I’m 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 don’t really understand math that well I’m not the greatest in math so I have my notes here so I don’t get the this wrong so what you do I’m going to turn the fill off I’m 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 you’re gonna enter 3.14 I know this is getting crazy times the width so which is 158 that’s that’s 148 times 158 and then you’re gonna times and then in brackets so does that first the percentage so if I wanted this progress meter to let’s say be I don’t know 75% we’re gonna put 75 divided by 100 and then close the brackets and press return and then in the Gap section it’s gonna duplicate that but that’s not we want we actually want to do 3.14 times the width again 158 and that’ll 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 don’t want to leave you guys maybe I’ll bring some for all of you and then I can go ahead and just rotate this any way I want and I’ll leave it right about there so now it’s like 75% filled for my monthly budget so Alex if you’re watching by any chance thank you for this tip I know he mentioned he didn’t create this tip or find out he’s found it from someone else but it’s really cool and if he can create a plug-in that can kind of avoid all that math mumbo-jumbo that’d 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 we’re gonna type out monthly budget there we go we’re gonna make sure to Center this Aven you’re next is good let’s make it nice and bold and we’ll 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 we’re gonna duplicate it and then in the layers panel I’m not naming my layers so I apologize I’m 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 we’re gonna add a navigation bar at the bottom so further transactions second we’re gonna grab my little rectangle tool over to the side and simply drag one down this way just to house the transactions I don’t really want them floating on that gradient background can you repeat that math mumbo-jumbo again yes and I’ll also retweet it so if you follow me on Twitter at Pinsky or go to mighty Alex’s Twitter account but it’s 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 it’s 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 that’s 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 it’s a white box how good to cut it look we’re 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 I’m not feeling the bold for this one so maybe I’ll go medium it looks okay you’re welcome so transactions now down here we want to actually create a repeat repeat grid so I’m gonna start by just filling in the information this will basically be my latest transaction so let the first one let’s say I went to Chipotle and I can’t see my text so oh do you notice that there’s 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 can’t see anything so I’m going to change the text to a darker color and let’s actually break away from the condense let’s go for just a veneer next it’s a little bit large bring that down and who doesn’t left Chipotle or any sort of burrito right now we’re going to put the date what day is it September 18th I think 2018 make this a little bit smaller so it’s not too overpowering and you’re noticing as I’m dragging things around everything’s snapping into place those those guides are super helpful yes spellcheck I know that’s 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 don’t actually change what’s written I mean there’s a lock icon but it doesn’t change I don’t think it changes oh it does ha ha you learn something new every day so over here in the layers panel there’s 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 I’m gonna make one more over here and this is going to be the price so I’m gonna make not – how much did ship hold a nine dollars and I don’t know let’s say 23 cents and this one is going to be we’re gonna make this nice and visible and make it a little bit bigger beautiful so we have this something’s 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 let’s go with that nine dollars and 85 cents very specific it might be right without the guac oh yeah with the guac it’s 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 we’ll have time we will definitely do some prototyping I’m going to zip through this so if I go over to finder I actually have some icons over here and let’s look for a coin icon I’m gonna grab this drag it in here whoops I dragged it into that shape from the drag down to the pasteboard and let’s actually go for what color should this be maybe not purple because that might blend too much it’s not bad but maybe like a bluish alright let’s go for that so let’s 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 it’s 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 don’t want to pay for icons definitely go to your creative cloud marketplace and do some searching you’ll be surprised what you can find so we have our first transaction and now we could duplicate this a million times but that’s just a pain so what we’re going to do is use a repeat grid so I’m going to make sure to select all these icons so I’m 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 that’s done to turn it into a repeat grid it doesn’t 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 you’ll 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 let’s say we had Chipotle yesterday and I’m not sponsored by Chipotle I just enjoy it’s 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 heart’s content but to save time it’s all Chipotle all day so we have more or less houses space and oh how is the spacing between that’s a good question so if you click on the repeat grid and you hover over you’ll see this beautiful pink box in between each transaction and if we had more this way you’ll 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 let’s create very quickly a navigation bar at the bottom so we can quickly navigate during the prototyping phase two additional screens I’m gonna grab my rectangle tool and drag out a navigation bar right at the bottom I probably don’t need a border I’ll keep it white and what I’m gonna do I’m gonna grab some more icons maybe I’ll make the maybe make this just a little bit turn down the opacity to 95 percent add a little bit of flavor to that let’s hop over to my icons let’s find a home icon this is why I love icons you can just grab button icon dragging in and pop it into place and I’ll 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 let’s mine a list this is gonna be for our transactions put that over here for now we have a wallet that’ll be for our credit cards and let’s 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 I’m actually gonna put this one right around here I’m gonna line it up with that transactions background same thing with this one I’m 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 they’re all perfectly aligned I don’t have to worry about anything now since we’re on the home screen we do want to change this icon at least the color let’s actually choose the blue looks okay and then these ones I’m 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 you’re noticing the navigation bar is kind of doing its own thing which I definitely don’t want so we need to fix some of these elements so back in my layers panel I’m gonna make sure to select the navigation bar I’m gonna select all of the elements that are in the navigation bar put them into a group again let’s 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 you’ll 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 they’ll all line up perfectly great I may also want the header to be fixed so I’m 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 you’re noticing because the header is not at the top of the layer stack I’m gonna move it right on top and now we have a beautiful home screen lovely okay so let’s move on to the next screen next rain is going to be transactions so what I’m going to do I’m 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 it’s going to be transactions name your artboards oh yes Thank You Geoffrey I should do that I’m gonna double click on the name name this home name this one transactions there’s 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 there’s a lot of ways you can duplicate things but that’s just the way I wanted to do I want to switch it up a little bit so this will be last seven days and let’s say in the last seven days between all that Chipotle I don’t know it’s probably 945 dollars make sure to Center this there we go now instead of a monthly budget we’re 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 we’re actually going to create some sort of a chart that shows our spending over the last seven days now to do that we’re gonna grab our line tool over to the left make sure everything lines up and you’re noticing those smart guides are appearing I can just drag a line right across my document I’m going to change this color to white and make this border nice and large whoa that’s too large now looks pretty good let me zoom in here so you can see what I’m doing and now we basically we basically want seven day period right so we’re gonna add we’re gonna grab our text tool let’s type out let’s start at the tenth ten beautiful it’s a little bit too big we’re gonna shrink this down we don’t 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 I’m gonna use this spacing to just space it all the way out so it lines up on the right-hand 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 there’s a date I’m basically going to add a point I’m 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 isn’t bad you can definitely do that but I want to go a little bit curvy so I’m gonna double click on each point and you’re 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 we’ll 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 we’ve 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 let’s say the 15th will do this one we want to create like some sort of a circle so I’m gonna grab my ellipse tool create a little circle right about here and I’m 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 it’s not too big maybe it’s a bit too big there we go and then let’s 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 I’m gonna add a little triangle right below let’s 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 let’s say on this date I spend $65 and 23 cents how’s that looking not too bad not too shabby I do want to put the date or at least the month so right up here let’s 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 let’s go back to our home screen and we’re 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 that’s 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 it’ll 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 it’s 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 it’s 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 I’ll ease it out and have a duration of 0.4 seconds you don’t 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 let’s actually tackle a credit card screen I’m 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 let’s get let’s 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 I’ve been using it since the beta way back when it was project comment and I’ve kind of been learning ever since so this will be credit cards here we go and I’m just gonna delete all of this stuff where’s my layers elite you probably don’t 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 I’m gonna make this our highlight icon drop this one to 32% all right and now for the credit cards we’re gonna use another repeat grid so I’m gonna create one credit card here and just so I can see it I’m gonna drag it down here that looks good now turn the border off let’s go ahead and round the corners and grab one of these guys drag it in a little bit make sure it’s 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 it’s hard to see right now all the credit cards are kind of lat overlapping each other and they’re 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 it’s basically going to populate and because it’s 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 it’s 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 we’re gonna duplicate this drag it over one more time we’re gonna make the spacing a little bit shorter let’s say it’s 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 it’s 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 let’s say we’re gonna click on this one it’s gonna go to this screen we can do actually for this one we probably don’t want to transition so we’re gonna do none it’s gonna just appear and then we’ve 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 I’m not mistaken I go here if I right click I can copy and paste interaction and you know it’ll 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 let’s 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 let’s try that again it’s all about trial and error there’s 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 that’s 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 I’m gonna drag this down actually maybe right here we’re 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 I’m gonna put them in a group progress you know you know what I’ll grab the monthly budget as well copy head over do this artboard paste it obviously way too big so we’re gonna drag this down and you’re noticing that just messed everything up so we have to fix it so we’re gonna select the top progress circle and we’re going to turn down the size quite a bit do the same for the other one and now we’re gonna do some more math so let’s 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 let’s 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 let’s say this will be food make a little bit bigger beautiful let me duplicate it one more time across instead of 95% let’s do 3.14 times the width again in ninety five point two two times let’s 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 how’s everyone liking this so far and then we’ll do one more right across here make sure everything lines up and this will be what should this be amaze hats let’s be shopping make this a little bit smaller and we’ll 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 you’re oh you’re 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 we’re designers right so there we go south let’s 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 doesn’t hit the top or doesn’t 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 that’s a little bit too difficult to read so I probably change that again scrollable I’ll 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 doesn’t 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 let’s say we want a menu icon at the top right I’m gonna grab my line tool drag one over here let’s make this two pixels and I can turn this into a won’t where did it go I’ll just duplicate it and we now have a menu icon and just to get a little bit fancy I’ll 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 you’re noticing now it’s 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 didn’t like the color on this purple right so if I go back and edit one of these and change it to like let’s 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 it’ll 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 it’s fixed it’ll kind of go with the previous navbar but an overlay transition if I do have let’s say another artboard I’m gonna have another iPhone 8 artboard oh let me put it down here somewhere and I’ll make just very quickly this won’t be pretty but I’ll make a very quick menu I’ll make this a little bit darker no border let’s 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 it’ll basically tell me this where it’s gonna end up I can move it across if I if this artboard was smaller I can move it anywhere I want I’m 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 it’s a little bit limiting because you can’t 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 I’m 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 it’s 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 that’s pretty much where we’re 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 we’re in here we’re talking we’re 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 we’re 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 they’re fantastic and you can use any of these for your projects especially this one if you’re doing the daily finance application grab this cryptocurrency UI kit and there’s a lot of elements in there you might be able to use are you gonna post this on Behance I might I’m gonna polish it up a little bit but once I have it ready to go I can basically assuming that all this stuff wasn’t 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 I’m gonna name this finance app don’t want allow comments sure why not oh sure yes Oh No something doesn’t 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 there’s 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 I’ll definitely be back tackling another daily challenge at some point and I hope you guys all enjoyed this I hope you have fun it’s 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 it’s 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 Marissa’s 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 I’ll see you all in another stream take care everyone

Be First to Comment

Leave a Reply

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