What is Mirr.io?

Mirr.io is a Sketch plugin which adds interactivity to your designs. It comes with a live desktop preview which streams to any mobile device just like Sketch Mirror but magically interactive.

It supports headers & footers and prototypes can be shared online with one-click.

⇣ Download Mirr.io for Mac

Installation

  1. Download, and copy Mirr.io.app to your Applications.
  2. Open Mirr.io and allow it to install the Sketch Plugin.

Quick Start

  1. Tap 'New Template' in Mirr.io to open a demo file in Sketch.

  2. Select a layer and tap OPTION + CMD + A to bring up the events panel.
        Layers with 🔸 already have an event.

  3. Mirr.io automatically updates after using the events panel, for all other updates just save your sketch file (⌘S).

Headers and Footers

Use 3 groups on your artboard called Header, Footer and Content.

These groups need to match the artboard width, which may mean using a square as a background. See FAQ.

Note that headers and footers only work when a Content group is present.

Timers

Timer actions can be added to entire artboards. Just select the artboard and tap OPTION + CMD + A. Useful for loading & splash screens.

The First Screen

Mirr.io decides that an artboard called start or splash in the current Page is the first screen to show. Otherwise it will use the first artboard created - usually the one at the bottom of the list.

Sharing

Upload and share your prototype with one click. File > Publish To Web. These are public to anyone who has the link.

These will be deleted after 28 days. If you wish to update the prototype simply generate a new link.

FAQ

Q: How much does Mirr.io cost?

It's FREE.

Q: Do actions work when nested in symbols?

Yes.

Q: Can I use the Demo version of Sketch?

Yes.

Q: How do I preview on my mobile device?

Make sure your mobile device and Mac are connected to the same network. Choose File > Open Local URL in Mirr.io to find the IP address. Visit this URL on any browser.

Q: How do I set the background color of an overlay?

Mirr.io inherits the background colour of the artboard. Uncheck 'Include in Export' to make sure it's not included with the content.

Q: Do layers with events work on artboards with timers?

Yes! if you're quick enough you can click them before the timer ends.

Q: Things are out of position!

Using headers and footers tells Mirr.io to place the content in a scroll view. If you see incorrect positioning, make sure these groups are the same width as the artboard. Sketch trims the transparent pixels of groups, so you may have to use a background rectangle.

Q: Who made this?

Mirr.io is built by @nicmulvaney at Normally.

Feedback

Email nic@normally.com
Twitter @MirrioApp



Current Version: 0.5.17