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

SVG Summit

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for clarklab clarklab
January 21, 2016
Technology
1
180

SVG Summit

Slides from my Sketch Workflow talk at SVG Summit

Avatar for clarklab

clarklab

January 21, 2016
Tweet

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
250
User Experience in the real world
Avatar for clarklab clarklab
0
3.3k

Other Decks in Technology

See All in Technology
Webアクセシビリティ技術と実装の実際
Avatar for tomokusaba tomokusaba
0
200
Secure Boot 2026 - Aggiornamento dei certificati UEFI e piano di adozione in azienda
Avatar for Intune Italian User Group memiug
0
130
OSSで構築するIT基盤管理実践事例: NetBox・Snipe-IT・FreeRADIUS+PrivacyIDEA / Practical Case Studies of IT Infrastructure Management Using OSS
Avatar for NTT docomo Business nttcom
0
180
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.9k
競争優位を生み出す戦略的内製開発の実践技法
Avatar for 増田 亨 masuda220
PRO
2
530
AIエージェントで変わる開発プロセス ― レビューボトルネックからの脱却
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
2
850
Claude Cowork Plugins を読む - Skills駆動型業務エージェント設計の実像と構造
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
230
AI が Approve する開発フロー / How AI Reviewers Accelerate Our Development
Avatar for Hiroka Zaitsu zaimy
1
260
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
Avatar for coconala_engineer coconala_engineer
2
280
AI ネイティブ組織への変革:ビジネスとITの統合が拓く未来／ AIで“はたらく”をアップデートする人材業界パーソルキャリアのリアル
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
120
社内ワークショップで終わらせない 業務改善AIエージェント開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
450

Featured

See All Featured
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
380
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
150
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
110
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
190
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
730
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
380

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