Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG Summit

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for clarklab clarklab
January 21, 2016
Technology
200
1

SVG Summit

Slides from my Sketch Workflow talk at SVG Summit

Avatar for clarklab

clarklab

January 21, 2016

More Decks by clarklab

See All by clarklab
UX Playbook: Real World User Exercises
Avatar for clarklab clarklab
1
670
Design Workflow with Sketch
Avatar for clarklab clarklab
8
260
User Experience in the real world
Avatar for clarklab clarklab
0
3.3k

Other Decks in Technology

See All in Technology
MySQL & MySQL HeatWave Report - June 2026
Avatar for Olivier DASINI freshdaz
0
200
WebGIS AI Agentの紹介
Avatar for _shimizu _shimizu
0
590
Microsoft のサポートとフィードバック総まとめ
Avatar for Murachi Akira murachiakira
PRO
0
120
自作お家AIエージェントｽﾀｯｸﾁｬﾝFWで困っている所紹介
Avatar for 74th(Atsushi Morimoto) 74th
0
130
AI 不只幫你寫 Code： 當專案從 300 暴增到 1500， 我們如何撐住 DevOps
Avatar for Bo-Yi Wu appleboy
0
280
FPGAの開発コンペでZephyrを使ってみた
Avatar for misoji engineer iotengineer22
0
220
現場のトークンマネジメント
Avatar for dak2 dak2
1
200
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
170
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
Why is RC4 still being used?
Avatar for tamaiyutaro tamaiyutaro
0
120
飲食店もAIで。レジ締めやハンディシステムをつくってる話 / Using AI for restaurant management
Avatar for VTRyo vtryo
0
200
AI Agentをシステムに組み込む前にゆるく向き合ってみる
Avatar for hayama hayama17
0
170

Featured

See All Featured
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
140
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
330
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
240
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
430
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
350
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
150

Transcript

  1. Working with
 Sketch

  2. Clark InVision

  3. None

  4. The Zebra Previously UX

  5. None

  6. Why Sketch?

  7. Vector-based 1 Artboards 2 Assets 3

  8. @clarklab #SVGsummit

  9. Working with
 Sketch+SVG

  10. Exporting

  11. Mark It Set Options Export! 1 2 3

  12. Slices Groups+ Layers Artboards

  13. Saving SVGs from a .Sketch Document

  14. Single Batch 1 2

  15. Managing file paths

  16. /icons/house.svg /logos/wishlist.svg 1 2

  17. Managing resolutions

  18. @2x @3x @1x

  19. Viewbox (and other properties)

  20. 40 x 40 slice

  21. 40 x 40 artboard

  22. folder-icon.svg

  23. SVG Structure

  24. None

  25. clock.svg

  26. Yes No

  27. Maintaining an icon set

  28. Stay Organized 1 Better than a folder full of SVG

    2 Mix and match 3

  29. Using Symbols

  30. Stay in Sync 1 Keep exports isolated 2

  31. Logo sets

  32. Background colors

  33. Responsive icons when one-size doesn’t fit all

  34. None
  35. None

  36. Sketch Tool Command Line

  37. None
  38. None
  39. None
  40. None

  41. sketchtool list pages filename.sketch sketchtool dump filename.sketch sketchtool export artboards

    filename.sketch ——output ——scale ——formats

  42. InVision Asset syncing

  43. IconJar Set smashing

  44. None

  45. invisionapp.com/ecourses/ design-workflow-with-sketch

  46. @clarklab #SVGsummit