Join Brian Thurston Bralczyk for an in-depth discussion in this video Aligning and positioning widgets in Axure, part of UX Design Tools: Axure.
- View Offline
You may have noticed in the last video that my text links at the top are not lined up and you may have just thought I was a sloppy designer. Well, believe it or not, I did this on purpose so that we could take a look at the Alignment tools here in Axure. So, I'm in the Chapter 2 02 Start file. And let's start by aligning these four text links so they are all in one nice horizontal line. So, we'll select them all and then, up here at the top of our window, we have a drop down that says align, so we will open that up, and we get a few options here.
You can choose to align left, center or right, horizontally. Or top, middle or bottom on the vertical axis. Let's pick middle so that we're lining these up on one line vertically. That's looking good, but now you'll see that the four of them aren't really evenly spaced across the row like we'd like. So, luckily, right next to the align drop down, there's another one that says distribute. I'm going to open that up and it gives us two options. Distribute horizontally and distribute vertically. I'm going to choose Distribute Horizontally.
And you'll see that the leftmost and rightmost widgets didn't move. But the other two widgets adjusted in between, so that there's an even amount of space between all four. And that's exactly what we wanted to match our design. Now, while we're up here, let's take a quick look at these other buttons. Related to alignment we have these buttons that say Front and Back. These control where a widget falls and what Axure calls the stacking order. To illustrate this, let's temporarily drag a couple of extra widgets onto the screen.
I'm going to take a rectangle and drop it on top of my collections link, and then I'm going to scroll down a little bit and grab what's called a placeholder and drag that so that it overlaps the rectangle. Now you can visually see that the placeholder is on top of or in front of the rectangle, and both of those are in front of the Collections text widget. So, with my placeholder selected, I'm going to go up to the top and click Back, and that's going to send it to the very back of the stacking order. So, it's not only behind the rectangle, but also behind that larger rectangle that we set up in the last video.
And doing just the opposite, I can click the front button, and it'll bring it back to the very front of the stacking order. Now, there's also keyboard shortcuts to move them to the back and front as well. And those are what I typically use. So, moving to the back is Cmd+Shift+, and forward is Cmd+Shift+. And, of course, if you're on a PC, that's going to be Ctrl+Shift+ and Ctrl+Shift+. Now, if you want to move them one widget back at a time instead of all the way back to all of the other widgets.
There are keyboard commands for that, as well. To move them incrementally in the stacking order, you're going to use Cmd+, and Cmd+, with no Shift key this time. And that's going to move you backward one step at a time, and forward one step at a time. Let's delete these extra shapes that we don't need. Now, back at the top on the left, we have a couple buttons here that say Group and Ungroup. Let's drag to select all of our navigation links. And then I'm going to go to the top and click on Group.
We can do the same thing with a keyboard shortcut. So to group them, it's going to be Cmd+G on a Mac or Ctrl+G on a PC. And you'll see there's a new bounding box that surrounds all four of the widgets. And when I try to drag one, they are all going to move together. It can be really useful to group chunks of content together like this, but if you ever do need to separate them again, you can just use the Ungroup button here at the top. And there are keyboard shortcuts for that as well, which are Cmd+Shift+G on the Mac, or Ctrl+Shift+G on a PC.
And the last couple of buttons at the top are the Lock and Unlock buttons. If you ever want to make sure you don't accidentally move a widget while you're working on other things, you can lock it down. And let's make sure our navigation links are selected. And then go ahead and hit that Lock button. Now, if we try to grab it and move it around, it's not going to let us do anything with it because it is, in fact, locked. If you ever did want to unlock them, you would just select them and hit this Unlock button at the top. And, of course, there are keyboard shortcuts for Lock and Unlock, and those are Cmd+K for Lock and Cmd+Shift+K for Unlock.
On a PC that's Ctrl+K and Ctrl+Shift+K. Now, don't worry that our text and shape widgets so far aren't looking like our design. We just haven't styled them yet. We're going to move on and learn just that in the next video.
- Using and styling widgets
- Setting up interactions
- Creating hide/show options for content
- Creating an accordion menu
- Applying web fonts
- Using flow widgets
- Creating and placing masters
- Styling pages
- Adding form fields with widgets
- Building a slideshow with dynamic panels
- Setting up adaptive views