So you’re looking for a way to turn static a Photoshop mockup into an interactive prototype. But you want to do it quickly, without code, while preserving all of your layers. Beyond that, you need to gather feedback from your stakeholders. This tutorial shows you how to do all that.
Once you’ve imported your Photoshop file into UXPin, it’s easy to add interactions & animations and then use our Live Presentation tool to host a screenshare meeting to unveil your new design. There are currently 11 triggers and 20 element actions, allowing for many custom advanced interactions. Take a look at the overview video and then check out our tutorial below.
Before we start off with the tutorial, I’d like to show you the result we are going after – check out the preview.
As you can see, this prototype includes several interactive points with animations. If you want to learn about specific parts, just jump to sections listed below. Read the full story to check out the full process.
Importing from Photoshop into UXPin
For this example, we will import a Photoshop file from our free Web UI Kit into UXPin.
1. Sign in to your existing UXPin account (or sign up for a free trial)
2. Click the plugin icon in UXPin (lower left hand corner)
3. Download and install the Photoshop plugin
4. In Sketch, select your elements, click File, Generate and then UXPin Export. Our file is from the Web UI Kit.
5. The file will likely export to the desktop. Your new file has a .uxpin extension.
6. Return to UXPin and either create a new project or click into your existing project.
7. Once you’re in the project, drag and drop your .uxpin file into UXPin.
8. Once the file is loaded, feel free to rename and then click Save.
9. Done! All the elements of your Photoshop file are preserved. Feel free to click around and add interactions.
General notes on using interactions and animations
Let’s go over some of the functions of Advanced Interactions. To start using it, simply pick any UI element and then can go to interactions tab in the properties manager:
To set your first interaction, click “Lightning bolt” icon. The “Link” button is a shortcut to linking UI elements to pages. Below that, “Recently Created” is a list that shows you any recently created interactions in your design.
Setting up interactions for a given UI element is a 3-step process: first choose what will trigger the action, then what type of action should trigger initiate, and what element should be affected by it. You can see that in the 3 images below:
There are two ways of picking the element that should be affected by the interactions – you can either choose it from the list of all elements, or use your cursor to draw a hotspot on the design.
There is a wide range of triggers, interactions and animations you can choose from. Here’s some of them:
- Triggers: click, double, click, right-click, hover, mouse in, focus, blur, key press, window is scrolled to, page is loaded
- Actions: show element, hide element, toggle visibility, go to page, go back, scroll element, state: enable, state: disable, state: select/check,
move by, resize element, rotate element, change opacity, change style
- Animations: linear, ease in, ease out, ease in out, fade, slide.
Button: changing style on hover, scrolling the page after click
Here we’ll cover how to make a button that changes style when your mouse hovers over it. We’ll also show how to make that same button trigger a scroll to the next section when you click the button. For this example, we’ll look at the “Learn more” call-to-action.
Changing Style On Hover
I start by making sure that I have two different buttons that will appear after specific user actions: one for the inactive state and one appearing on mouse out.
As you can see below, the buttons will switch with interactions, however they will remain in the same position, so that’s how we have to put them on the prototype. Using the layers editor, you can stack them in the right order – keep the one that shows by default on top, and the one showing on hover below that.
Since they can’t be shown simultaneously, hide the one that is to be activated on hover. We’ll make it appear using interactions later on.
Now on to setting up interactions. For the first button we’ll need a total of two interactions: showing the orange button upon hover (left panel below) and hiding the orange button on mouse out (right panel below). Here’s how the setup will look:
Now we just need to make the page scroll to the next section upon clicking the orange “Learn More” button. And let’s not forget that the orange button needs to be hidden on mouse out so that the default transparent button can reappear (in case you scroll back up).
That’s easy to do with separate interactions. Select the on hover button and set up interactions like the instructions below.
To scroll to the next section when you click the orange button:
To hide the orange button:
To make sure the transparent button show when you mouse out (in case you scroll back up):
If you like, you can use different animations. For me, the choice was fade with ease in/ease out for mouse actions and linear animation on scroll. Click the first button in our prototype to see the effect.
Form: triggering visibility on scroll
Next we will take care of the third section of the prototype, which is the sign up form. I’ll show you how make it smoothly appear when the window is scrolled to a certain level of pixels.
Since the form has to appear on a certain interaction, it has to be hidden by default – make sure you have that step covered. Now, select the whole layer of the Form and click the lightning bolt icon for interactions. As you probably already guess, the trigger will be “window is scrolled to” and the action will be “show element”:
Form: interactive inputs
Since we’ve introduced a form in our prototype, why not make the inputs interactive to complete the experience? Choose inputs from the library of elements (tip: hit cmd/ctrl+f and type “input”), style it accordingly and place it where you want customers to sign up. You don’t need to set any interactions for allowing typing inside the inputs or switching to the next one by the tab key – that’s already included. So basically, if you just want the inputs to be ready for inserting text, you’re all set!
Other than that you can come with some additional interactions of your own. I added a little trick to the input, making the “email” caption disappear once you click on the input. I just placed a text element undearneath the input and added an interaction on the input element.
Form: interactions after signing up
As the final touch on our prototype example we’ll introduce a sign up confirmation that slides in when the user clicks “sign up” button.
We’ll be setting interactions between three elements: the sign up button, the signup form and the “Thank you” slide. However, the interaction will be set only on the signup button, because it triggers actions for the signup form and “Thank you” slide. When clicked, the signup button will hide the sign up form and show the “thank you” slide. See the instructions below.
To hide the signup form when the signup button is clicked:
To show the “thank you slide” when the signup button is clicked:
And that’s the last part!
Previewing and gathering feedback
1. To see the interactions, click the play button in the upper right hand corner. This will open the Preview Mode.
2. You’re in the preview mode, so check out the results of your work:
3. To comment, simply use the left-side vertical menu. To start a Live Presentation, click on the lower right hand corner.
So there you have it, a step by step process to turn your current Photoshop file into a fully interactive prototype. Plus, your entire team can comment and collaborate.
We only showed one example of an animation. In UXPin, you can make your Photoshop prototype come to life with different animations from the 11 triggers and 20 action events.
Feel free to get started and play around in UXPin.
Turn Photoshop Files Into Interactive Prototypes