Skip to main content

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.

Prototype separate layers at once with UXPin

Prototype separate layers at once with UXPin

"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.

Tom May

Tom May is an award-winning journalist and editor specialising in design, photography and technology. He is author of Great TED Talks: Creativity, published by Pavilion Books. He was previously editor of Professional Photography magazine, associate editor at Creative Bloq, and deputy editor at net magazine.