Download Sketch: --- This presentation:
Pre-presentation checklist: * Got Sketch with you? * Raffle sign-up? * Grab some swag? * Photos OK? * Thank our hosts, NGA!
## 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
"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.
sceenshot of the Sketch app UI
Easy to get started?
## Wireframing with Sketch
What is wireframing?
Why do we do wireframing?
Quick, cheap, abstract
🚀Usability🚀 vs. ✨Sparkles✨
Takeaway: Symbols
Bonus: Libraries 👍
...We'll come back to Libraries
## Exporting
File types
CSS, anyone?
Sketch Cloud
Let's assume...pixel-perfect design
` File -> New from Template -> Prototyping Tutorial `
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
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
### Quick Demo: Libraries
Libraries: Symbols syncing, globally
What are they?
Addons/extensions of Sketch
From the simple utilities...
Color Contrast Analyzer
To getting HTML, CSS and code
### Plugins Shown: - [Color Contrast Analyzer]( - [Sketch Runner]( - [Craft Manager]( - [Zeplin]( - [React-Sketch-App](
### Other Plugins: - [User Flows]( - [Sort Me]( - [Sketch to App Store]( - [Anima]( - ...There's a plugin for that...
Thank you.
Download Sketch: --- This presentation: