Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

SVG Summit

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
650
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
32のキーワードで学ぶ はじめての耐量子暗号(PQC) / Getting Started with Post-Quantum Cryptography in 32 keywords
Avatar for quiver quiver
0
210
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.3k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
法人支出管理領域におけるソフトウェアアーキテクチャに基づいたテスト戦略の実践
Avatar for ogugu ogugu9
1
140
セキュリティAIエージェントの現在と未来 / PSS #2 Takumi Session
Avatar for GMO Flatt Security flatt_security
3
1.4k
こがヘンだよ！Snowflake?サービス名称へのこだわり
Avatar for タロウ tarotaro0129
0
110
AI 時代のデータ戦略
Avatar for na0 na0
8
3.3k
たかが特別な時間の終わり / It's Only the End of Special Time
Avatar for watany watany
5
1.7k
AI (LLM) を活用する上で必須級のMCPをAmazon Q Developerで学ぼう / 20251127 Ikuma Yamashita
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
100
翻訳・対話・越境で強いチームワークを作ろう！ / Building Strong Teamwork through Interpretation, Dialogue, and Border-Crossing
Avatar for ar_tama ar_tama
4
1.6k
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
320
バグハンター視点によるサプライチェーンの脆弱性
Avatar for morioka12 scgajge12
2
510

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k

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