sketch: designing with data

Designing with Data

The problem

https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482

https://medium.com/@joshpuckett

“When we don’t work with real data,

we deceive ourselves.”

• designs broken by real data

• out of date data in mockups

• tedious process of updating mockups

Pain points

https://medium.com/@iansilber/design-tools-at-instagram-4f5867afa4f4

https://medium.com/@markjenkins

“Any repetitive work that can be eliminated means more time spent on

the creative aspect of design.”

“Speed isn’t the only factor that’s important for these tools.

The fact that we’re using real data means our designs immediately feel authentic.”

https://medium.com/design-at-depop/designing-with-data-7f6bcd907f0a

https://medium.com/@markjenkins

"Using data, we can see where the problems arise, where the

exceptions and edge cases lie and whether our design really works in

the way it was intended."

• 'content first' approach: ensure that nothing is missed: put the data in first

• avoid content / design mismatch: too many, too few, too long, too short

• single step data update

• distribute responsibility: share a versioned json file for someone else to edit

• unlikely bonus points: translation!

Desired Benefits

The Promised

LandnB: the following three slides are animated gifs, which are unsupported in this format: follow the links to view online

https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482

https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482

https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482

The Present:… is a WIP

Data PluginsThere are myriad! The most definitive list is at: https://github.com/sketchplugins/plugin-directory JSON: https://github.com/preciousforever/sketch-data-populator https://github.com/timuric/Content-generator-sketch-plugin https://github.com/zakkain/sketch-copyeditor https://github.com/tylergaw/sketch-generate-posts Images:https://github.com/nickstamas/Sketch-Quick-Pic https://github.com/abynim/SketchSquares https://github.com/tylergaw/day-player

Other: https://github.com/thetylerwolf/sketch-data-studio

Sketch Data PopulatorReferenced in the article

https://github.com/preciousforever/sketch-data-populator

Content GeneratorGreat!

https://github.com/timuric/Content-generator-sketch-plugin

Sketch Copy EditorWorks for flat data,not a set of data.

Useful tip: save, close, reopen to sidestep Sketch quirks https://github.com/zakkain/sketch-copyeditor

Sketch Data Parser

Clunky… not 100% sure it actually works https://github.com/florianpnn/sketch-data-parser

Sketch-Quick-PicFill an image layer with an image from Flickr with tags

(fails silently if it doesn’t find images…flickr doesn’t have ‘cats,lasers’??)

https://github.com/nickstamas/Sketch-Quick-Pic

Day Player…crashing sketch…

https://github.com/tylergaw/day-player

JSONJSON: Javascript Object Notation

Generating JSON

• Advanced field generation • download / direct API access

http://www.json-generator.com/ https://www.mockaroo.com/

Managing Plugins

Sketch Toolboxhttp://sketchtoolbox.com/

UI Proposal for Sketch Toolbox

My wishlist, more like http://astralapp.com/

Installing from SourceProblem: I want to deactivate a plugin, but not uninstall it completely, such that I forget it’s name, etc.

Solution: git clone plugins and create a Finder alias to them inside the Sketch Plugins folder. The alias is disposable, delete it to deactivate, recreate it to reactivate.

git cloneTerminal.app… not as scary as it sounds!

cd ~/my-sketch-plugins

# download the source git clone https://github.com/nickstamas/Sketch-Quick-Pic.git

# one day: update the plugin cd Sketch-Quick-Pic git pull

Git GUIs: https://mac.github.com/, https://www.sourcetreeapp.com/

Finder alias: Drag with Cmd+Option

~/my-sketch-plugins/ ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins

Tim Osborn @memelab