Learn how to add and edit a UXPin smart element.
- [Instructor] One of the great features of UXPin is the ability to download these design patterns and use them in your UXPin projects. Now, this site here is available to you at uxpin.com/patterns, and these patterns are all fully downloadable and editable and we're going to do that with this project. So to get in here, what you have to do is you have, first off, login to your UXPin account, and then once you've found your pattern, you select add to UXPin.
So, we're going to use this one, the create account. So we're going to select add to UXPin and we get notified it's there. It's now in our smart elements library. Got it. And you are returned right to your dashboard. So I've got a project here that uses the iPhone 6 portrait view, so I'm just going to open it, sign up and I'm going to edit the design, and here we are, and I'm just going to zoom in a little bit so you can see what I'm doing here.
So I'm going to set the view to about 85%. There we go. And that element that we just downloaded is right here, create account. See it? Now, these things are really kind of cool because you can rename them, so if you don't want to call it create account, you can rename it something else, so you can edit it. You can copy to the project elements, and what that is is right up here. There are your project elements, so all of your design patterns and elements that you're going to be using throughout your projects can be kept here and made available to the entire team, or you can even delete it.
Now, to add it to your page or to even edit it, there are two ways of doing it. You can click the edit button here, and if I click that, you'll notice that you get smart element, create account, and we're right in the element editing view here, or you can go back to prototyping, and you'll notice it's still there. The other way of doing it is just to click on it and have it added to your screen and then just drop it in place, and what I'm going to do here is make sure it's at 0, 0.
So how do I edit it from here? Well, you just double click, and notice we're right back where we were. Okay, so the first thing I want to do is just switch out this picture. I want to use another image, so I'll select the image, delete it, and you can see, there it is. Make sure that nothing's selected. Come up to image, and we're going to navigate to our download, the chapter five download, and we're going to use account.jpg. Click open, in it comes, and we'll just stick that right where it belongs and it's front of everything, so what we're going to do is come up here to the order pop down and we're going to send it to the back, and I'm just going to move it over one pixel by using the left arrow there.
There we go. Okay, so I got that done. Now what I want to do is replace this photo icon. I want to basically use an avatar, so I'm going to select it and delete it. I'm just going to click on the pasteboard here, this grey area, and again, we're going to go to image, and we're going to download Jane.jpg, and when Jane comes in you can scale her, holding down the shift key, just make it a little bit smaller and just drop it in there.
And I'm not too happy with the icons. I'm going to switch out the envelope here, so I'm just going to delete it and I'm just going to deselect and I'm going to come to my library and I'm going to look for a mail icon and as I scroll down, there's a good envelope that we could use, so we'll bring that in. Now, that's black. I don't want that. I want to change the color to 828282, which is kind of a grey color, and it is 16 by 16 so I'm going to make sure that these two values are linked and I'm just going to change the 32 to 16 and the icon is there, and we'll just drop it right into position, and I'm not too happy with the lock here so I'm just going to get rid of that and I'm going to do the same thing here.
Deselect and this time we're going to find lock, and you can see that there are all kinds of little lock icons here, and I really like this one, so we'll just click it and again, we'll just change the color to 828282. Press the return enter key to accept the change and we're going to copy it to the clipboard, so command C on a Mac, control C on a PC, and we're just going to move that into position and naturally, we've got to make it smaller, so it's going to be 16 by 16, and just move it into position there.
There we go, and we've got another one on the clipboard. Command V, which is paste. Okay, so we can just copy this, command C. Command V, there it is, and we'll just move that into position and we have finished editing, and we can go back to prototyping, and there we go. We've created our own smart element. So as you can see, you can head over to the patterns page.
I'll just go pop back to it just to give you another look at it. You can download any of these patterns. They're all fully editable, as you've seen, and reusable. So there you go. Go ahead, be lazy.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus