Download - Sketch: Designing with Data
![Page 1: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/1.jpg)
Designing with Data
![Page 2: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/2.jpg)
The problem
![Page 3: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/3.jpg)
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.”
![Page 4: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/4.jpg)
• designs broken by real data
• out of date data in mockups
• tedious process of updating mockups
Pain points
![Page 5: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/5.jpg)
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.”
![Page 6: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/6.jpg)
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."
![Page 7: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/7.jpg)
• '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
![Page 8: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/8.jpg)
The Promised
LandnB: the following three slides are animated gifs, which are unsupported in this format: follow the links to view online
![Page 9: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/9.jpg)
https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482
![Page 10: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/10.jpg)
https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482
![Page 11: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/11.jpg)
https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482
![Page 12: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/12.jpg)
The Present:… is a WIP
![Page 13: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/13.jpg)
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
![Page 14: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/14.jpg)
Sketch Data PopulatorReferenced in the article
https://github.com/preciousforever/sketch-data-populator
![Page 15: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/15.jpg)
![Page 16: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/16.jpg)
Content GeneratorGreat!
https://github.com/timuric/Content-generator-sketch-plugin
![Page 17: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/17.jpg)
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
![Page 18: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/18.jpg)
Sketch Data Parser
Clunky… not 100% sure it actually works https://github.com/florianpnn/sketch-data-parser
![Page 19: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/19.jpg)
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
![Page 20: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/20.jpg)
Day Player…crashing sketch…
https://github.com/tylergaw/day-player
![Page 21: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/21.jpg)
JSONJSON: Javascript Object Notation
![Page 22: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/22.jpg)
Generating JSON
• Advanced field generation • download / direct API access
http://www.json-generator.com/ https://www.mockaroo.com/
![Page 23: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/23.jpg)
![Page 24: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/24.jpg)
Managing Plugins
![Page 28: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/28.jpg)
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.
![Page 29: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/29.jpg)
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/
![Page 30: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/30.jpg)
Finder alias: Drag with Cmd+Option
~/my-sketch-plugins/ ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins
![Page 31: Sketch: Designing with Data](https://reader035.vdocuments.site/reader035/viewer/2022070515/58777b661a28abc85f8b48b9/html5/thumbnails/31.jpg)
Tim Osborn @memelab