Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

SVG Summit

Avatar for clarklab clarklab
January 21, 2016
Technology
210
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
810
Design Workflow with Sketch
Avatar for clarklab clarklab
8
270
User Experience in the real world
Avatar for clarklab clarklab
0
3.3k

Other Decks in Technology

See All in Technology
脆弱性診断って、何をしているの？ 〜弱点を見つけて、会社の改善につなげるまで〜
Avatar for KeeG keeg
0
770
Snapshot Testing in Practice: Predictable and Reliable SwiftUI Views
Avatar for Felipe Espinoza fespinoza
0
170
実践！ SRE × AI - ABEMA における AIOps -
Avatar for tetsuya28 tetsuya28
7
2.5k
自分で立ててみるLLMサービス
Avatar for 世良泰明 y_sera15
0
150
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
800
Datadog の学び方 - あるいは、オブザーバビリティを学ぶとは何か
Avatar for iwa mananyuki
1
510
ハードウェアコンペでもAI駆動開発が進んでいる話
Avatar for misoji engineer iotengineer22
1
640
The seven pitfalls of AI (revised version)
Avatar for Uwe Friedrichsen ufried
0
310
ブラウザとサーバーから考えるAI時代のフロントエンド監視
Avatar for Shogo Fukami shogo4131
3
630
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
2
740
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
110
AI駆動開発の時代になったのでトヨタ生産方式から見直す
Avatar for terurou terurou
6
5.5k

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.3k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
260
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
610

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