Download Sketch: https://sketchapp.com --- This presentation: http://sketch101.unhype.me

Pre-presentation checklist: * Got Sketch with you? * Raffle sign-up? * Grab some swag? * Photos OK? * Thank our hosts, NGA!

# Intro to <img src="./img/sketch-logo-dark-transparent@2x.png" alt="sketch logo" style="background:none; border:none; box-shadow:none;"> #### with Erik Thorelli

# Overview *Who am I?* *What is Sketch and What Can It Do?* *Hands-on Demos & Walkthroughs* *More Advanced Demos in the Deep End*

## Who is Erik?

A software engineer and multi-hat wearer who ❤️s Sketch

```javascript // Erik's JavaScript World let currentWork = "Frontend Web & Mobile Developer"; let currentFrameworks = "React and React Native"; ```

Using Sketch for ~5 years

Adobe XD alpha & beta tester <img src="./img/adobe-comet-to-xd@.5.png" alt="logo of Adobe Project Comet with arrow pointing to logo of Adobe XD" style="background:none; border:none; box-shadow:none;">

"Sketch Ambassador" [Not paid, just for the ️️️love]

Legal Disclaimer: I do not speak for Sketch or the makers of Sketch

## What is Sketch?

Sketch is UI Design Software

*"Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork."*

Sketch embraces open standards and an open source community

*JSON file types, web standards, plugin community...*

Who Uses Sketch?

UI, UX and Graphic Design Pros @ Apple, Google, Facebook...

And non-designers and hobbyists

Easy to pick up and get going

## What Can we *do* with Sketch??

A lot.

## DEMO 1 ## Artboards & Shapes

Easy to get started?

## Wireframing with Sketch

What is wireframing?

<img src="./img/wireframing-for-ios-app.jpg" alt="wireframes of mobile app">

Why do we do wireframing?

Quick, cheap, abstract

🚀Usability🚀 vs. ✨Sparkles✨

## DEMO 2 ## Wireframing & Symbols

Takeaway: Symbols

Bonus: Libraries 👍

...We'll come back to Libraries

## Exporting

File types

<img src="./img/exporting.png" alt="screenshot of sketch app sources website">

CSS, anyone?

<img src="./img/copycss.png" alt="screenshot of copy css attributes menu in Sketch">

Sketch Cloud

<img src="./img/cloud1.png" alt="screenshot of sketch cloud button in Sketch app">

<img src="./img/cloud2.png" alt="screenshot of sketch cloud website">

"Prototyping"

🧙‍♀️...Handwave...🧙‍♂️

<img src="./img/prototyping.png" alt="screenshot of sketch built-in prototyping tutorial">

Let's assume...pixel-perfect design

` File -> New from Template -> Prototyping Tutorial `

## DEMO 3 ## Prototyping & Exporting

And now...

## Getting in the Deep End

We *can* build UI from the ground up...

Or we can focus on our uniqueness...

...and use others' UI resources

Sketch App Sources https://sketchappsources.com

<img src="./img/sketchappsources.png" alt="screenshot of sketch app sources website">

Making a UI on a platform?

There are pixel-perfect elements out there

iOS, Material Design, Bootstrap, Messenger Apps...

Back to Libraries

What if your project uses a framework or design system?

First, your team is doing things right

Second, you should use Libraries

<img src="./img/libraries.png" alt="screenshot of sketch libraries preference pane" style="max-height: 400px">

### Quick Demo: Libraries

Libraries: Symbols syncing, globally

Plugins

What are they?

Addons/extensions of Sketch

From the simple utilities...

Color Contrast Analyzer

To getting HTML, CSS and code

## DEMO 4 ## Plugins Roundup

### Plugins Shown: - [Color Contrast Analyzer](https://github.com/getflourish/Sketch-Color-Contrast-Analyser) - [Sketch Runner](https://sketchrunner.com/) - [Craft Manager](https://www.invisionapp.com/craft)(Invision) - [Zeplin](https://zeplin.io/) - [React-Sketch-App](http://airbnb.io/react-sketchapp/)

### Other Plugins: - [User Flows](https://abynim.github.io/UserFlows/) - [Sort Me](https://github.com/romashamin/sort-me-sketch) - [Sketch to App Store](https://github.com/bmull/SketchToAppStore) - [Anima](https://www.animaapp.com/) - ...There's a plugin for that...

Thank you.

Download Sketch: https://sketchapp.com --- This presentation: http://sketch101.unhype.me