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

SVG Summit

clarklab
January 21, 2016
Technology
1
150

SVG Summit

Slides from my Sketch Workflow talk at SVG Summit

clarklab

January 21, 2016
Tweet

More Decks by clarklab

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

Other Decks in Technology

See All in Technology
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
890
非機能品質を作り込むための実践アーキテクチャ
knih
6
1.8k
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
200
Google Cloud で始める Cloud Run 〜AWSとの比較と実例デモで解説〜
risatube
PRO
0
130
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
270
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
120
ハイテク休憩
sat
PRO
2
190
Fanstaの１年を大解剖！ 一人SREはどこまでできるのか！？
syossan27
2
380
Oracle Cloud Infrastructure：2024年12月度サービス・アップデート
oracle4engineer
PRO
1
430
プロダクト組織で取り組むアドベントカレンダー/Advent Calendar in Product Teams
mixplace
0
600
Server-Side Engineer of LINE Sukimani
lycorp_recruit_jp
1
470
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
200

Featured

See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Docker and Python
trallard
43
3.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Adopting Sorbet at Scale
ufuk
74
9.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Fireside Chat
paigeccino
34
3.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Building Your Own Lightsaber
phodgson
104
6.1k
Making the Leap to Tech Lead
cromwellryan
133
9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
KATA
mclloyd
29
14k

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