Mirr.io — turn Sketch files into shareable prototypes, without leaving sketch.
Today we’re proud to announce the launch of Mirr.io — a crafty little tool to turn your Sketch designs into working, shareable prototypes. All from within Sketch.
We’ve been using Mirr.io at Normally, 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 - 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.
Getting started
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.
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.
Now edit the home screen in Sketch and hit save (⌘S). Mirr.io immediately updates on all devices just like Sketch Mirror.
Add events
There are only two shortcuts you need to know in Sketch. ⌥⌘L to launch your document in Mirr.io and ⌥⌘A to show the Events Panel.
When an event is added to a layer you’ll see an orange diamond 🔸 in the layer name.
Find one of these in the Layer list and hit ⌥⌘A to see the event that’s already applied in the Events Panel.
You can change this to a different transition if you like. As soon as the events panel closes, it will update Mirr.io with your new event on all devices.
Headers and Footers
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.
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.
Side Menus
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 Overlay From Left transition in the Events Panel. Voila!
Overlays
Using the transition Overlay from Bottom will give the effect of an overlay. Use transition Back to close this overlay.
Going Back
One of the most understated, but useful transitions is Back. This will play the previous transition in reverse. This is great after bringing up overlays or modals from anywhere in your prototype.
Timers
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.
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.
Sharing
Once you’re happy with your prototype, switch to 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 that you share this URL with.
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.
Websites
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.
Tricks & Tips
- 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.
- It’s handy to keep the Mirr.io preview window on top of Sketch, especially if you work on a small screen. Choose View > Always on Top (⌘T)
- Deleting a diamond 🔸 from the layer name is the same as removing the event using the Events Panel.
- Remember your artboard background colours. If left transparent, the artboards may visually overlap while transitioning.
- If you want to navigate within an overlay and keep it open, use the transition ‘Overlay’ between your artboards. This will prevent the overlay from closing and simply switch between other overlays.
- Mirr.io displays the first artboard you created as the first screen (usually at the bottom of the list), but if you want to use a different first screen call your artboard ‘start’ or ‘splash’
Thanks!
I hope you’ve enjoyed reading this and take the time to download 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.
