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

SVG Summit

clarklab
January 21, 2016
Technology
1
160

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
520
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
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
0
100
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
FastConnect の冗長性
ocise
1
9.6k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
What's in a price? How to price your products and services
michaelherold
244
12k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Mobile First: as difficult as doing things right
swwweet
223
9.3k
A better future with KSS
kneath
238
17k
Building Your Own Lightsaber
phodgson
104
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Optimizing for Happiness
mojombo
376
70k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k

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