- Overview
- Transcript
3.7 Create a Max-Width Artboard
We’ve just about covered all the key functionality of XD for responsiveness, and in the next section we’re going to go through some practical demonstrations. To prepare for that, in this lesson we’ll get an artboard ready that perfectly wraps the site at its max-width so we can use this as a base for the other artboards we’re about to create.
1.Introduction
1.1Responsive Design in Adobe XD00:49
2.Responsive Refresher
2.1Responsive Design Is Just Two Things05:52
2.2Workflow, Breakpoints, and Do We Still Do “Mobile First”?09:36
3.Responsive Design in Adobe XD
3.1Quick Overview of What You Can Do in XD04:56
3.2The “Responsive Resize” Function09:05
3.3Artboards and Responsiveness04:06
3.4Emulating Flexible Width Columns09:17
3.5“Repeat Grid” and Responsiveness08:30
3.6Handling Text05:05
3.7Create a Max-Width Artboard02:14
4.Breakpoint Artboards
4.1Creating Breakpoint Artboards03:32
4.21000px Breakpoint03:21
4.3900px Breakpoint03:53
4.4700px Breakpoint04:29
4.5500px Breakpoint02:56
4.6400px Breakpoint02:59
4.7Smallest Breakpoint03:55
5.Conclusion
5.1Device-Specific Artboards03:36
5.2Wrapping Up04:29
3.7 Create a Max-Width Artboard
Hey, welcome back to Responsive Design in Adobe XD. This is just gonna be a really, really quick video to do the last thing that we need to do in order to move on to creating a series of breakpoint-based artboards. And that is, we're gonna take this layer that we've been working with so far, and get rid of the empty space to the left and right of it. And get it prepared to work as the base for all of the other artboards that we're gonna produce. All right, so the first thing that we wanna do is select the artboard, which we can do by just clicking on the name up here. We know that 1200 is the maximum width of our site, so I'm just gonna enter 1200 in here on the artboard. Then you're gonna need to correct this alignment. So we select the wrapper group that contains everything that's laid out here. And we're gonna go up to the X position and set that to 0. And right now if I resize this artboard, it's just going to clip the edges of the content that we have laid out. That's because at the artboard level, Responsive Resize is deactivated. Content has Responsive Resize turned on by default, artboards have it turned off by default. So we're gonna need to flick that switch, turn on Responsive Resize, and now when we shrink things down, all of the groundwork that we've done so far is gonna start kicking into action. And the reason that we do this is because here we're gonna be able to duplicate this artboard, shrink it down, and look for the first point at which things start to break, the layout says to break. Then we'll be able to make an adjustment there. Then we will be able to duplicate it again, shrink, duplicate, adjust, shrink, and so on. So now you're across everything that you need to know on the technical side of things to use the functionality that's in XD. Now I'm gonna step you through a practical example where I show you how a collection of artboards for breakpoints is actually going to look when applied to this wireframe layout. So in the next lesson we're gonna have just a really quick introduction to what it is that we're actually gonna be looking for when we're producing breakpoint-based artboards. And a couple of little things to be aware of as you're going through the process. So for that I will see you in the next lesson.
