Introducing Protowire
Prototyping in Sketch without coding or exporting to other apps
“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.
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 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.
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.
