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
490
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
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
Intuneお役立ちツールのご紹介
sukank
3
790
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.1k
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
3
1.3k
Lexical Analysis
shigashiyama
1
150
mikroBus HAT を用いた簡易ベアメタル開発
tarotene
0
350
フルカイテン株式会社 採用資料
fullkaiten
0
40k
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
210
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
290
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
130
Terraform Stacks入門 #HashiTalks
msato
0
340

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Done Done
chrislema
181
16k
What's new in Ruby 2.0
geeforr
343
31k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Become a Pro
speakerdeck
PRO
25
5k
GraphQLとの向き合い方2022年版
quramy
43
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k

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