Sketch and the Magic Mirror

22
Sketch & the Magic Mirror

Transcript of Sketch and the Magic Mirror

Page 1: Sketch and the Magic Mirror

Sketch &

the Magic Mirror

Page 2: Sketch and 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

Page 3: Sketch and the Magic Mirror

Sketch

I was a late bloomer. But once I

discovered it, I wanted to use it as

my only design tool.

Page 4: Sketch and the Magic Mirror

Magic Mirror completely

changed my workflow and made

using Sketch a fantastic

experience.

http://magicsketch.io/mirror/

Page 5: Sketch and the Magic 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.

Page 6: Sketch and the Magic Mirror

And this is exciting because….

I can take this

And do this

And this

And this

Page 7: Sketch and the Magic Mirror

How it works

Create an artboardor slice

Page 8: Sketch and the Magic Mirror

How it works

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

choose what you want to mirror

Page 9: Sketch and the Magic Mirror

Then you get a reflection

Page 10: Sketch and the Magic Mirror

For something a little more

complex, I create a template. The

it is already set up to have my

“Mirror” layer.

iPhone Template

Page 11: Sketch and the Magic Mirror

More Templates

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

Page 12: Sketch and the Magic Mirror

How I work

Page 13: Sketch and the Magic Mirror

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.

Page 14: Sketch and the Magic Mirror

Wireframes

I keep all the wireframes together

in the same page.

Page 15: Sketch and the Magic Mirror

Flows updated

Page 16: Sketch and the Magic Mirror

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

Page 17: Sketch and the Magic Mirror

Make the Presentation

Page 18: Sketch and the Magic Mirror

Make the Presentation

Page 19: Sketch and the Magic Mirror

Last, but not least

Page 20: Sketch and the Magic Mirror

Create specifications

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

Page 21: Sketch and the Magic Mirror

This whole presentation

was created in Sketch

And… btw~

Page 22: Sketch and the Magic Mirror

Thanks!Any questions?

You can find me on twitter: @uxdiva