Published on <a href="http://ift.tt/2qRPi3a">| Prototyping: From UX to Front End &mdash; Medium</a> Mulhoon 
Today we’re proud to announce the launch of <a href="http://mirr.io">Mirr.io</a> — a crafty little tool to turn your Sketch designs into working, shareable prototypes. All from within Sketch.
<img alt="" src="http://ift.tt/2qRKVVW">
We’ve been using Mirr.io at <a href="http://twitter.com/@normallystudio">Normally</a>, in various guises for around 6 months. It was borne from our frustrations with online tools, where we found ourselves spending a crazy amount of time faffing. Most of our thinking and designing was done in Sketch, so it slowed us down if we had to export, log-in, upload, re-create, draw hotspots, edit timelines etc, etc… We didn’t want to leave Sketch!
Our first version of Mirr.io attempted to pull a conjuring trick, where it would guess the interactivity you wanted from the layout and layer names. For example, a layer called ‘header’ would stick to the top. It worked if you had insider knowledge of how the plugin worked, but it was really tricky to learn and was prone to some weirdness.
Today we launch an exciting new version of Mirr.io which is easy to use and most importantly quick to learn. Mirr.io is a Sketch plugin and a preview tool in the form of a desktop app. You can preview your prototype in any browser, on any device &#8211; LIVE. It has once-click sharing and is totally free with no sign up required.
In this article I’m going to explain everything you need to build prototypes in seconds with Mirr.io. I’ll also share some tricks and quirks that can achieve great results.
<h3>Getting started</h3>
The first time you run Mirr.io from your Applications directory it will prompt you to install the Sketch plugin — do it! You’ll also notice a URL that you can use on your mobile.
<img alt="" src="http://ift.tt/2qmCtud">
Type this URL in to Safari on iPhone, or Chrome on Android and tap Add to Homescreen. This creates a webapp on your home screen with a live connection to Mirr.io. It also allows the app to go fullscreen.
For a quick start, tap New Template in Mirr.io. A new document will open in Sketch and automatically load into the Mirr.io preview window. See how it also loads on your mobile too. Tap around and you’ll notice how the mobile and desktop preview is connected.
<img alt="" src="http://ift.tt/2qS3xFp">
Now edit the home screen in Sketch and hit save (⌘S). Mirr.io immediately updates on all devices just like Sketch Mirror.
<h3>Add events</h3>
There are only two shortcuts you need to know in Sketch — CTRL+M to launch your document in Mirr.io and CTRL+A to show the Events Panel.
<img alt="" src="http://ift.tt/2qmEir1">
When an event is added to a layer you’ll see an orange diamond 🔸 in the layer name.
<img alt="" src="http://ift.tt/2qRL23Y">
Find one of these in the Layer list and hit CTRL+A to see the event that’s already applied in the Events Panel.
<img alt="" src="http://ift.tt/2qmNf3H">
You can change this to a different transition if you like. As soon as the action panel closes, it will update Mirr.io with your new action on all devices.
<h3>Headers and Footers</h3>
Headers and footers are easy with Mirr.io. All you need is 3 groups on your artboard called Header, Footer and Content. These will automatically be recognised by Mirr.io — and fixed to the top or bottom. The content group will scroll if it’s taller than the view.
<img alt="" src="http://ift.tt/2qS6nKF">
<blockquote>TIP: There’s an important quirk here in that these groups have to be the same width as the artboard. This might mean putting a background rectangle behind your layers on each group.</blockquote>
<h3>Side Menus</h3>
Side menus are simple. Artboards are always transparent if you untick ‘Include in Export’ in Sketch. Any background colour will be cleverly faded in in Mirr.io. So create an artboard that only covers a portion of the screen, with a 80% alpha background colour. This can then be displayed using a Slide From Left transition in the Events Panel. Voila!
<img alt="" src="http://ift.tt/2qmNfAJ">
<h3>Overlays</h3>
Using the transition Overlay from Bottom will give the effect of an overlay. Use transition Back to close this overlay.
<img alt="" src="http://ift.tt/2qS3ycr">
<h3>Going Back</h3>
One of the most understated, but useful transitions is Back. This will play the previous transition in reverse. This is great for bringing up overlays or modals from anywhere in your prototype.
<h3>Timers</h3>
It isn’t just layers and groups that can have events. Whole artboards can have events too — Timers! These are useful for splash or loading screens. Select and artboard and hit CTRL+A to bring up the event panel.
<img alt="" src="http://ift.tt/2qmGTl3">
Here you can add a duration which pauses this artboard before moving to another. Remember that any other events on layers in this artboard are still active, they simply cancel the current timer if tapped.
<h3>Sharing</h3>
Once you’re happy with your prototype, switch to the Mirr.io and tap Publish To Web. After a few moments a unique short URL will launch in your browser. This is only available to people you share this URL with.
<img alt="" src="http://ift.tt/2qS6OnZ">
There currently isn’t any management or password protection of shared prototypes — this will be coming in the future. Prototypes currently last 4 weeks online before being automatically removed. If you need longer, just Publish To Web again.
<h3>Websites</h3>
You can also build website prototypes in Mirr.io. The preview window will adjust to you artboard size, but it’s handier to view in an actual browser. Select Open Local URL in the Mirr.io File menu to open your default browser. This link will stay up to date as you work on your designs.
<img alt="" src="http://ift.tt/2qmEiY3">
<h3>Tricks &amp; Tips</h3>
<ul>
<li>When you launch your document in Mirr.io it assumes a device according to the proportions of the document, if you’d like a different size you can select one from the View menu.</li>
<li>It’s handy to keep the Mirr.io preview window on top of Sketch, especially if you work on a small screen. Choose View &gt; Always on Top (⌘T</li>
<li>Deleting a diamond 🔸 from the layer name is the same as removing it using the event panel.</li>
<li>Remember your artboard background colours. If left transparent, the artboards may visually overlap while transitioning.</li>
<li>If you want to navigate within an overlay and keep it open, use the transition ‘Overlay’ between you artboards. This will prevent it from closing and jump between overlays.</li>
<li>Mirr.io guesses the first artboard to show but if you want to tell it explicitly — call your first artboard ‘start’ or ‘splash’</li>
</ul>
<h3>Thanks!</h3>
I hope you’ve enjoyed reading this and take the time to <a href="http://mirr.io">download</a> and play with Mirr.io. Because it’s so easy and quick to use, we often use Mirr.io at the early stages of a project before we even move in to more advanced prototyping or build. We’d love to hear how you use it.
Please help us spread the word by tapping ♡ below and sharing. Please get in touch if you have any questions or feedback.
<a href="http://mirr.io">mirr.io</a>
<a href="mailto:nic@normally.com">nic@normally.com</a> <a href="https://twitter.com/mirrioapp">@mirrioapp</a> <a href="https://twitter.com/nicmulvaney">@nicmulvaney</a>
<img src="http://ift.tt/2qRYRPy" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2qmEjv5">Mirr.io — turn Sketch files into shareable prototypes, without leaving sketch.</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Mirr.io — turn Sketch files into shareable prototypes, without leaving sketch.

Top Stories