sketch: designing with data
TRANSCRIPT
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
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