By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in the last video of the series, we're going to take a look at building out a personal planner using Adobe XD and Stacks. Let's get to it.
Alright, here we are back in Adobe XD, with a design I've been working on for a personal planner. And in this video, we're going to take a look at using padding and Stacks to help us out. So, zooming on to this area here, we are going to start by creating our first task. And to do that, I'm going to grab the good old Rectangle tool and draw one out across this container, just like this, making sure it's inside of the lines... and I'll position it right about here. I'm not too worried about sizing at the moment because that will change once we introduce padding.
In terms of the styling, I'm going to go ahead and round up the corners ever-so-slightly, somewhere around 16 pixels. And then for the color of this first task, I'm going to go for a nice vibrant red. I'm going to pull out the saturation just a little bit, right in this area here. Now we can start adding in some content. I'm going to start off with the header. I'm going to grab the Text tool, shortcut key T, and type out something like Task Header. And for the styling of this text, let's go for a nice stylized typeface, something like Dunbar Tall. I'll set the size around 18 and I'll keep the weight at Bold. Then I'll go ahead and shift the color over to white.
Now, right below this header, we may want a quick indication as to what time this task is starting. So I'll duplicate this text layer downward, holding down Alt or Option and dragging. Let's change this to about 8:00AM - 8:30AM. I am going to shrink the size of this text to around 16 and I'll also drop the weight to about Medium. And then right beside this, over to the left, we may want a clock icon. So I'm going to hop into my Plugins panel at the bottom left-hand corner. I do have the Icons 4 Design plugin installed. And I'll go ahead and type out clock. And this one over here from Awesome looks pretty good. I'll drag that in. And like some of you may have seen in other videos, sometimes that icon flies up to the top left-hand corner, sometimes it pops it right beside. You just never know where it's going to end up. I'll go ahead and sample this white and then drag this over to the right. And maybe I'll make this clock icon a tiny bit smaller. And I think that'll do.
Now, before we start adding in additional content to this task, we may want to start setting up our padding. And over to the left-hand side of these two layers, we may want a very small line that just lets users know that they can drag these tasks around. So I'm gonna grab the Line tool, shortcut key L, drag one out right in this area here. I'm going to round up the caps, set the color to white. Maybe I'll thicken it up a little bit and then drop the opacity quite a bit. And with that in place, I'm going to make sure that these three layers over here to the right are a little bit closer. And I'm also going to make sure to select the time and the clock and pop those into a group, Command or Control+G, and call this Time.
Now, since I know that some of the text layers that contain the time will be a little bit longer than others -- for example, if we type in 10 o'clock, it's going to be a little bit longer naturally -- what we'll want to do, is switch over from Auto-Width to Auto-Height, and that can be done inside of the Properties Inspector over to the right. And I'm going to drag this handle over to the right, just so we have a little bit of breathing room, which will definitely help us out once we set up our padding. And now that that's been done, we're going to take all these layers that we created, and I'm holding down my Shift key and clicking, and pop them into a group. And I'm going to call this Task.
Now, since I know that I want this line over here to the left to enlarge as the content in this task is being changed, what I want to do is dive into this group, actually place this line into another group with this background. That way, we're helping Adobe XD understand what background of this task is. So, with that line selected, I'm also going to select that background container, Command or Control+G to place into a group, and I call this Background. And make sure it's at the back of the layer stack. And now I can go ahead and select the overall Task group. And then over within the Properties Inspector, I can turn on padding. And it's automatically defined that padding based on the content inside of this task and above the background. And I can dive in here and make some changes, so if I wanted 16 pixels on the top and also 16 on the bottom, I can very easily do that. And I'll very quickly dive in here, grab this line and enlarge it just a little bit on the left.
All right, so our first task is now complete. And since we're going to be using many of these tasks on this artboard, we may want to turn this into a component. So over within the Properties Inspector, I'm going to go ahead and press that plus button to create our first state and we may want to actually create an additional state that contains more information. So I'll go ahead and press that plus button one more time, create a new state, and this is going to be called Attendees.
And what I'm thinking in this state, if I dive in here to this information, is that right below the time, there may be profile pictures of who's attending this meeting. So I'll grab the Ellipse tool, shortcut key E and drag one out in this area. And you're noticing as I'm doing that the background, which also contains that line over to the left, is enlarging really nicely. And with one of my ellipses in place, I'm going to go ahead and turn this into a Repeat Grid right here at the top right-hand corner, or with your Command or Control+R shortcut and I'll drag out, let's say four in total. And to add images into this group, we can either hop into Finder or Explorer and drag them directly in. Or if you have any saved in your libraries, like I do right in this Toy Face Library, you can go ahead and choose some of those. And I just have to choose the Howard Toy Face. I'll choose that one. I'm going to hold down my Command key and I'll choose this one here. And we'll choose this astronaut and we'll do one more... Let's say this one over here. And I'll just drag all these into this grid. And then maybe to give this a little bit of style, I'm actually going to go ahead and pull this Repeat Grid back and overlap these profile pictures, like that. And that's looking pretty good.
In my Layers panel, I'm going to make sure to name this Profiles. And then, what I might want to do, to help organize this a little bit better, is grab that profile grid that we just created and also all this information here, pop that into a group and I'll just call this Info. And then back within the Properties Inspector, I can enable a Stack. And this will allow me to now dive in and move these and rearrange them as I need to. I can also hold down my Shift key, and then adjust the spacing, like this. So we now have our two states. We have our attendees and we have our default state which does not contain the profile pictures.
And now, what I want to do is create a few more going down this column, which in this case, is Monday the 8th. So with this first task selected, I'm going to go ahead and place that into a group, Command or Control+G. I'm going to call this Monday. And then over back within the Properties Inspector, we're going to turn on a Stack. Now because there's only one group inside of this particular group at the moment, it defined it as a Horizontal Stack. I'm going to go ahead and switch it over to Vertical, then I can easily dive in here, duplicate this, and then make any changes that I need to. So I'm going to dive in here. Change this to a 8:30 - 9:30AM. And since this will be going to about 9:30, right down here in the middle, I'm going to grab the background and just enlarge it a little bit. Of course, you can go ahead and create additional states: one for half an hour, one for an hour, or you can just enlarge some of the shapes. And maybe for some of the tasks, we may want to pull in different colors. So for this one, instead of red, maybe we'll go for a nice green. We'll darken it up a little bit. Pull it over. And that looks pretty cool. And then diving back into this group one more time, we can duplicate and then switch over to our attendees state. And maybe this task actually starts at ten o'clock. So I can hover in between these two elements and pull this on downwards, dive in here, change this to 10:00 - 10:30AM. And then I'll switch the background over to a different color. Let's try a nice dark blue. And just like that, we now have a few tasks on Monday. And to help us very quickly create our Tuesday tasks, we can hold down Alt or Option and drag over to the right. And then we can dive into this group and make some changes. So I can maybe swap these around. Maybe drag this one down to about 11 o'clock. And of course, we would have to dive in here, make changes to the time. This would be a 8:30 and maybe this one goes all the way to 10:30. So I'll just drag this downwards a little bit, hover in between these shapes and space this on back. And maybe this one at the bottom will also have attendees. So I'm going to go ahead and switch this over to attendees. Let's dive in. Change this over to 11 o'clock - 2:30PM. And since this is a much longer meeting, I'm going to go ahead and grab the background, drag it on down.
And we can imagine a scenario where we do have additional times going down the artboard on this side here... but this will be a perfect opportunity to show you how Scroll Groups can also play into this. So, inside of the Layers panel, I'm going to make sure to name this group Tuesday. And now I can select my Tuesday group, my Monday group, and also the times on the left-hand side and place all of that into a Scroll Group within the Properties Inspector. And this will allow me to grab that handle at the bottom, to define the window where the content will be visible. I'll drag this one up, just a touch. And now, if I press the Play button at the top, I can not only view all of the tasks, but I can also scroll down to see additional ones. And I can add a little bit of padding down there if I need to. And as you continue to add new content, so if I dive in here and drag this over to the right to add Wednesday, that Scroll Group is automatically going to expand. So I can dive in here and make any changes that I need to, swap these around, adjust spacing, make some of these tasks larger, some smaller. And you notice as I made the first one in Wednesday smaller, the ones below it shifted on up really nicely. And once again, if I press Play at the top, I can see all of my tasks and I can scroll down to see any additional ones.
And that's how you can build out a personal planner using Adobe XD and Stacks. Hope you all enjoyed this series. Definitely let me know in the comments or on Twitter what you thought. Stay tuned for more videos and I'll see you all very soon.
Learn how to make a personal planner in Adobe XD. In this tutorial, you’ll create a set of time-scheduled tasks that span several days. Use the Rectangle tool to draw out a background shape for the first task. Use the Text tool to add text and style it in the Properties Inspector. Group the elements of the task and create a component with two states. Drag out several component instances, then update background colors and edit the text to add specific details for each task and enable Stacks. The color-coded tasks display start and end times and appear in days of the week, displaying events like an online calendar.
