{"id":7794,"date":"2015-12-21T14:32:16","date_gmt":"2015-12-21T22:32:16","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=7794"},"modified":"2020-05-08T15:50:51","modified_gmt":"2020-05-08T22:50:51","slug":"how-to-animate-a-photoshop-comp-of-your-mobile-user-flow","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/how-to-animate-a-photoshop-comp-of-your-mobile-user-flow\/","title":{"rendered":"How to Quickly Animate a Photoshop Mockup Into a Prototype"},"content":{"rendered":"

Moving a user from one place to another in your app shouldn\u2019t be like an afternoon stroll with no particular destination in mind. There is a goal for both you and your users. And you\u2019re trying to move them as effortlessly through your app as possible.<\/p>\n

With that, you\u2019ve likely mapped out as many potential flows for your users. You\u2019ve likely even mocked them up visually in Photoshop. But it\u2019s not enough to create a series of static screens to illustrate a flow \u2014 say filling out a contact form \u2014 then expect them to work.<\/p>\n

You\u2019ll want to see it in action. In this post, we\u2019ll show you how to create an interactive user flow so you can give it a test drive.<\/p>\n

<\/p>\n

The Importance of User Flows<\/h2>\n

Before we get into the nitty gritty of animating your static comps, let\u2019s chat a second about user flows. As we discuss in the free e-book The Guide to Prototyping<\/a>, a flow can make or break your app \u2014 especially if it\u2019s mobile, where the experience is broken down into several pages.<\/p>\n

Creating an effective flow always starts with your users. We suggest that you create user personas for your potential audience. This will help you understand your users motivations and needs. At the same time, it\u2019ll help you shape how you\u2019ll design your flow. We share more tips and tricks on creating user personas in The Guide to UX Design Process and Documentation<\/a>.<\/p>\n

So you\u2019ve created personas, you figured out the flow and you\u2019ve even comped out what they are visually in Photoshop. Let\u2019s say you\u2019ve created a flow to have someone contact the business for more information. Now you\u2019ve got to see if it all fits together.<\/p>\n

\"Animation<\/p>\n

We\u2019ll dive into taking your comps to animated prototype.<\/p>\n

For this, you can follow along with your UXPin account (or start a free trial<\/a>).<\/p>\n

1. Download the plugin<\/h2>\n

You can import files from Photoshop or Sketch directly into UXPin, complete with named layers. But to do so, you need the plugins.<\/p>\n

Look for \u201cPhotoshop\u201d in the bottom left corner of your UXPin dashboard. Tap the link and your browser will prompt you to download the software. Double-click to open it on a Mac, and follow the instructions.<\/p>\n

On Windows, our plugin supports Photoshop CC 2014 and 2015. Once you unzip the downloaded file, copy the \u2018UXPinExport\u2019 folder into \u201cPlug-ins\/Generator\/\u201d in your Photoshop folder. Next, please restart Photoshop. When you open your design in Photoshop, export option will be available under \u201cFile \u2192 Generate\u201d menu. Once you do it, you\u2019ll obtain *.uxpin file which you can upload to UXPin freely.<\/p>\n

Mac or Windows, you only need to do this once.<\/p>\n

\"Screenshot<\/p>\n

2. Export from Photoshop<\/h2>\n

In Photoshop, go to File > Generate > UXPin Export. Save the file to your computer. That\u2019s it.<\/p>\n

3. Import the file<\/h2>\n

Choose a project folder in your UXPin dashboard, and drag the .uxpin file you created in Photoshop into the working area. This will upload the file and create a new prototype.<\/p>\n

4. Add input fields<\/h2>\n

Making trendy underline input fields is easy: we just need invisible input fields. To make them, drag a regular input field into place, set its opacity to zero in the color menu, and turn off its border. Don\u2019t forget to change its text color to white or light gray.<\/p>\n

\"Add<\/p>\n

5. Add ghost buttons<\/h2>\n

The ghost-style submit button looks great, but could look better with a little interaction. Let\u2019s delete the PSD version and create our own with a real UXPin button. Drag one out of the elements library. Next, set the button\u2019s background to 0% opacity and its border to 1px light gray. Then set the text color to white, and you\u2019re set. For details check out our tutorial on making ghost buttons<\/a>.<\/p>\n

6. Make the button interactive<\/h2>\n

Even though it\u2019s obviously a button, users appreciate visual cues to let them know what\u2019s tappable. To that end we\u2019ll add an action that makes the button light up on hover (desktop browsers) or on first tap (mobile browsers). This includes:<\/p>\n