Introducing Protowire

Prototyping in Sketch without coding or exporting to other apps

Sketch App Sources
Feb 20, 2018 · 3 min read
Protowire Layer Links and Hotspot Links in Sketch

“Rather than something you do at the end, Protowire aims to integrate interaction and animation into the design process without having to change your designs to suit the software.”

My name is Mark Horgan and I’m based in Cork on the south coast of Ireland. I’ve always been interested in design tools. I studied architecture at university and created a few CAD plugins to help with 3D modeling. Around that time building information modeling was being introduced to CAD software. The idea behind it was that you had a CAD model that contained everything you needed to create a building from the cost of materials to construction drawings. I think that idea can be applied to Sketch and screen design in general.

I found I was more interested in computers than buildings and when the web became mainstream in the late 90s I started doing web design and development. Back then Fireworks was my tool of choice but switched to Sketch in 2014 when it became apparent that Adobe wasn’t going to continue development of Fireworks.

At the time I was working on a trip planning web and mobile app. I needed to present my idea to a local incubator. I was looking around for prototyping tools but most were for native mobile apps rather than webapps. So I decided to create my own plugin. I wanted to do more with prototyping and was initially going to create a prototyping framework for webapps but when I explored what you could do in Sketch in terms of adding to the UI, I decided to go for a GUI based approach.

Protowire Screen Transitions

A few weeks after I started on Protowire, Invision came out with Craft Prototype. At the time I wasn’t sure whether to continue development but eventually decided to keep going. The hardest part of developing the plugin was converting the Sketch document to SVG. I couldn’t use Sketch’s SVG exporter as I was extending the markup with custom attributes so it could adapt to different screen sizes. Sketch also has features that SVG doesn’t directly support like inside/outside borders and multiple fills that required workarounds.

Protowire UI Animations

Protowire is integrated into Sketch, there’s no need to upload to a separate prototyping application and you can preview instantly in Sketch or on a device. As well as screen transitions, Protowire allows you to do UI animations. Just by moving layers around you can have overlays appear and disappear. Scrollable areas can easily be added for things like lists and maps.

Using Sketch’s resizing constraints and responsive artboard groups you can make prototypes that work with any screen size. And finally your prototype can be shared with others and viewed in any browser.

Protowire Responsive Screens

You can download the plugin for free and to get 31% off the pro version use coupon code 681B2752. Offer expires on Monday, February 26th at 4:00 pm Pacific Time.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Sketch App Sources

Written by

Design resources, tips, articles, tutorials and plugins for Sketch http://www.sketchappsources.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade