Learn how to add and delete various sized canvas documents to set the breakpoints in an adaptive layout.
- [Tom] One of the great advantages to UXPin offers the UX UI Designer, is the ability to create one layout and adapt that layout to different screens. Right now I'm in a blank document. And I'm going to start with a Mobile-First approach. Now, the first step here is to come over to the 'Properties' Panel in the 'Canvas Properties' and I'm going to choose an iPhone Six Portrait. And you can see there's a rather comprehensive list here. So I'm now got my iPhone Six Portrait, and you notice how the canvas changes? Now lets assume I want to add an iPhone Six Landscape view to the project along with an Android device and a tablet.
So what you do is you come down here to the 'Adaptive Versions' and it says 'add new adaptive version'. If you click it, it opens up a Canvas Properties dialogue box, and you can choose a preset. So I can add my iPhone Six Landscape, and I can set it to 'vertical' and 'horizontal' scroll, and just leave it with that name, and notice that I can copy all elements from my iPhone Six view to this new one. So I just click 'Add Breakpoint', and you'll notice there's the iPhone Six view, and there's the landscape view.
And I can add an Android device. So we'll add an Android Phone Portrait. And all this is, is just a screen size. And lets add a tablet. So we'll just come to the preset. And we'll go with an Android Tablet Portrait. Add the breakpoint. And if I zoom in here, you can see there's the tablet view. So if you take a look at the interface now, I've got an iPhone Portrait, iPhone Landscape, I've got Android Phone, and I've got an Android Tablet.
What if I say I want to remove the Android Phone cause it's pretty close to the iPhone size? So what you do is you come over here, and where it says 'Android Phone', you just click on this little trash can, and that view is gone, and the breakpoint has now been removed. Now, you're probably thinking, "That's great, Tom, but does this really work?" You betcha! I'm going to pop over to a project that has multiple canvas views. So I'm going to head back to my Dashboard, and I'm going to head back to my projects.
Here's the 'Excellent Adventure'. And I'm just going to open that up in Edit Design. And you'll notice I've now got an iPhone View, an iPad View, and, of course, my Web View. Now if I come over here, just scroll over, you'll notice that I added three little social buttons. What this tells you, is you can add extra content to a canvas without it rippling through all of the other viewports in play.
This adaptive layouts feature of UXPin is one of the handiest aspects of the application. Not only can you reuse content in a variety of screens, but you can also add to, or subtract the content on those screens without it effecting the breakpoints in the project.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus