Learn how to use the design patterns found in the Smart Elements Library, along with where to find other UXPin design patterns, and how to edit a design pattern.
- [Voiceover] In this exercise, I'm going to talk about design patterns. Design patterns are lifesavers, because you aren't constantly reinventing the wheel. Let's face it, in today's Sprint-based environment, you simply don't have the time to be creating the same thing over and over and over. Using design patterns hands you a reusable solution to this common issue. Reusable design patterns. These things are not a one-size-fits-all solution, but are more of a best practice than anything else.
It should come as no surprise, therefore, that UXPin contains a rather extensive collection of design patterns. The design patterns are not exactly where you would expect them to be. Instead they are tucked away down here in the Smart elements and are found in the UXPin pattern library. To add one, all you have to do is just drag it to the page and it's dropped into place, and go to work. Now I'm going to delete this, because some of you may not even have a Smart elements panel.
If you are new to UXPin, the Smart elements panel is hidden by default on new accounts. The panel only appears when a new Smart element is created. All you need to do is to create a Smart element. In this case, I'm going to go to my library, just grab a box, move it into place, and then I'm going to right click on the box and right there, Create Smart element. When I select it, I get this dialogue box that asks me what name you want to have.
I'll just name it ElementTest, click add, and you should now have a Smart elements panel. Now the other thing you can do with the Smart elements panel if you're not seeing it, is you can turn it on and off by going to the View menu and de-selecting Smart elements. Notice, if you look over here, it's gone. If I turn it back on, there it is. Now it's gone. I'll turn it back on. Now what I have here is a library of Smart elements.
And if you are looking at this library, it may not appear to be, as I said, extensive. Seriously, I am not stretching the meaning of that term. The extensive library is actually elsewhere. What you need to do is to point your browser to UXPin dot com, back slash patterns. And you're going to come to this page. And if you roll over one, you notice that you can add it to UXPin. There's also a menu here, All Categories, that allows you to sift through them based on category.
Now Taxi App is basically a test pattern, so if you want to use it feel free, but these are all the categories that they have available to you. So what I'm going to do is I'm going to scroll down here. And there's the news feed and I'm going to add it to my Smart elements library. So I'm going to click Add to UXPin. And you're being told, yep, it's there, got it. And I have a file here called Whatever, so I'm coming back to the dashboard.
Edit design. And if I scroll down, there's the feed. And you can see I clicked on it, and it came. So what I'm going to do here is I'm justgoing to delete this little Smart element, and I'm going to move this one into place. And let's edit it. As I said earlier, these things reflect best practice. If you click on any item in the pattern, double click it and you'll notice that there's a blue box around the canvas, and that tells you you're inside a design pattern.
You're also being told it's the feed, and you notice that Back to prototyping is lit up. So you can edit whatever you want inside the pattern, make your changes in the property panel. So let's just change this text to Hello World. And when you're finished making your changes, just click Back to prototyping and there it is. So there you have it, an extensive collection of fully editable design patterns ready for use when you need them.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus