Sketch and the Magic Mirror

Sketch &

the Magic Mirror

Hello!I am Dara Pressley

I love helping people find a voice through art and technology

You can find me on twitter @uxdiva

Sketch

I was a late bloomer. But once I

discovered it, I wanted to use it as

my only design tool.

Magic Mirror completely

changed my workflow and made

using Sketch a fantastic

experience.

http://magicsketch.io/mirror/

A Mirror is not a Symbol

With Symbols

Mirror

items are contrained to the same

layout/size/porportion as the

symbol.

instead, reflects the item. If you

distored the mirror, the reflection

is also distored.

And this is exciting because….

I can take this

And do this

And this

And this

How it works

Create an artboardor slice

How it works

Create an object (like a retangle)Then use the drop down to

choose what you want to mirror

Then you get a reflection

For something a little more

complex, I create a template. The

it is already set up to have my

“Mirror” layer.

iPhone Template

More Templates

And, of course there are lots of templates available from Magic Sketch and other users.

How I work

I create my process flows

Whether I do this before or after

wireframing, proces flows help

me to make sure I didn’t skip any

steps.

Wireframes

I keep all the wireframes together

in the same page.

Flows updated

Fixing the reflection

If the ratio is off, the reflection

will be off.

• Make the layer the same size as

the artboard

• Lock the aspect ratio

• Make the width 250 again

• Refresh the reflection

Make the Presentation

Make the Presentation

Last, but not least

Create specifications

use Notes plugin for great specshttp://marcosvid.al/sketch-notebook/

This whole presentation

was created in Sketch

And… btw~

Thanks!Any questions?

You can find me on twitter: @uxdiva