Export a Sketch 3 artboard to UXPin using the Sketch plugin from UXPin.
- [Instructor] If you are a Sketch 3 user, and Sketch 3 is an Apple based application from Bohemian Coding, you can move your artboards into UXPin with very little trouble, as long as you've got the plugin. Now there are two ways of getting the plugin for UXPin. And when you're in your dashboard you can come up here, to where your account is, and you can select Integrations, and you can see you can get the plugin there. I'm just going to close this.
There's another place where you can get it, so you just open your project, and you just roll over Upload Design Files and you can see Download our plugin first. So if you click that you can download the Sketch plugin. Now if you want to work along with me there is a Sketch file inside your Chapter 3 download, it is the RabbitBlanket file inside the Sketch folder. And I'm going to pop over to Sketch and explain how all of this works. So I've opened up the file inside of Sketch, and what you want to do is insert that plugin, so when the plugin comes in it's a zip file, you unzip it and then you have this little plugin file and you kind of wonder how do I install it? Well you can double-click it and install it or you can come to the Plugins here, the Plugins menu, select Manage Plugins, and there's a little gear icon down here.
And you just Show the Plugins Folder, and it will show you the Plugins folder for Sketch, and you just open it up and you just drag the plugin into this folder and there it is, Export.to.UXPin.sketchplugin. Okay so I'm going to pop back to Sketch now. So you close this and show you how to export your screen for UXPin. So what you're going to do is you're just going to select the layers you want to export, which is, in this case, the whole thing, you're going to come up to Plugins and there's UXPin, Export to UXPin, and you get your little twirling beach ball as it works away and you see File was successfully exported to the Desktop.
And then minimize, and you're going to close the Plugins folder, and I'm going to bring this in to my Chapter 3 download and let's go back to UXPin and bring this file in. So I'm going to come back to my page, and you got one of two ways of doing it, if I take the View to Exit Full Screen and I just shove this over, you can open up your folder and just drag your UXPin file and just drop it right onto the area here.
Another way of doing it, just going to close that, come back and let's just go back up to Full Screen. You can just click Upload Design Files, and there's the UXPin file from Sketch, click Open, and it will upload the file, give you a little bit of progress, then it will convert the file, of course, and you notice it's going into a separate document. And once the conversion is finished, you click on Edit design and you open the editor, there's your file, notice it's all there, and you got to do a couple things.
First thing you got to do is to set the canvas, so we're going to go with iPhone 6 portrait, and then in the properties I'm going to set the background color to black, which is what we are using. And you can see there is the entire file right there in its full glory. And if I take a look at the layers you can see that all of the elements inside each of the layers has come in and is fully editable. So there you go, there's importing your Sketch designs into UXPin using the Sketch plugin, it's dead simple to use, and as long as you install it properly you should have absolutely no problems.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus