A new way to create animated prototypes

While Photoshop and Sketch enable you to prepare static mockups of websites and apps, those tools don’t help you go to the next step of design – interactive prototypes. Well until now, that is.

Here at Creative Bloq we're big fans of UXPin, an app for animated prototyping with no coding knowledge required. So we're excited by a new feature that lets you drag and drop Photoshop and Sketch files into the application so you can prototype separate layers. All layers are preserved and nothing is flattened.

"Nothing out there right now lets you do this," says UXPin's Jerry Cao. "Other solutions are a compromise: the simple solutions will lose your layers, or you need to code to keep your layers.

"We learned that this is a huge productivity hurdle during user interviews with Google, Uber, Apple, Etsy, Intuit to name a few. What designers would normally do to get to that step is 'redraw' everything in another tool or use Invision – so it’s either doubling the work or using a tool that flattens layers and limits you to two interactions.

"We developed our solution so that design teams save hours on redrawing designs. Importing designs is as easy as drag & drop, which means you can build an animated prototype instead of burying the UX under notes about interactions/animations."

You can learn more about the new feature here. If you're curious about the details, you can also check out this Photoshop tutorial and this Sketch tutorial.