Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
SVG Summit
Search
clarklab
January 21, 2016
Technology
210
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
SVG Summit
Slides from my Sketch Workflow talk at SVG Summit
clarklab
January 21, 2016
Transcript
46 slides
Working with Sketch
Clark InVision
None
The Zebra Previously UX
None
Why Sketch?
Vector-based 1 Artboards 2 Assets 3
@clarklab #SVGsummit
Working with Sketch+SVG
Exporting
Mark It Set Options Export! 1 2 3
Slices Groups+ Layers Artboards
Saving SVGs from a .Sketch Document
Single Batch 1 2
Managing file paths
/icons/house.svg /logos/wishlist.svg 1 2
Managing resolutions
@2x @3x @1x
Viewbox (and other properties)
40 x 40 slice
40 x 40 artboard
folder-icon.svg
SVG Structure
None
clock.svg
Yes No
Maintaining an icon set
Stay Organized 1 Better than a folder full of SVG
2 Mix and match 3
Using Symbols
Stay in Sync 1 Keep exports isolated 2
Logo sets
Background colors
Responsive icons when one-size doesn’t fit all
None
None
Sketch Tool Command Line
None
None
None
None
sketchtool list pages filename.sketch sketchtool dump filename.sketch sketchtool export artboards
filename.sketch ——output ——scale ——formats
InVision Asset syncing
IconJar Set smashing
None
invisionapp.com/ecourses/ design-workflow-with-sketch
@clarklab #SVGsummit
More Decks by clarklab
See All by clarklab
UX Playbook: Real World User Exercises
clarklab
1
810
Design Workflow with Sketch
clarklab
8
280
User Experience in the real world
clarklab
0
3.3k
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
17
120k
AI対話型分析を作成し、リリースするまでの話 / The Road to Release: Buiding AI Conversational Analytics
yappli_developers
0
100
並列度を下げたら速くなった — go build の重複コンパイルを実測で見る
tomoaki25
2
1.2k
GCASアップデート(202607-202610)
techniczna
1
330
AI時代の組織作り:チーム開発から「個人×AI」への移行と、持続可能な「開発資本」の築き方
ham0215
3
840
プロダクションコードにおける encoding/json から encoding/json/v2 へのスムーズな移行
sansantech
PRO
1
410
ラクスル会社紹介資料|エンジニア向け / RAKSUL Introduction for Engineers
raksulrecruiting
0
100
Datadog の権限統制 〜Org 統合に向けて調べた注意点 / JDDUG-Meetup_24
visional_engineering_and_design
1
120
農夫は秘伝のタレを知らない - NOBODY KNOWS THE HIDDEN SOURCE - Kaggriculture 3rd Place Solution
masspeaks
0
290
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
cscengineer
PRO
1
860
属人化したISMS運用をGitHubとAIで仕組み化した1年間の記録
sioncojp
4
2.6k
20261113_JAWS_Osaka
takuyay0ne
0
360
Featured
See All Featured
Claude Code のすすめ
schroneko
67
230k
How to Talk to Developers About Accessibility
jct
2
620
Navigating Team Friction
lara
192
16k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
630
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
560
Bash Introduction
62gerente
615
220k
The browser strikes back
jonoalderson
0
1.9k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
990
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
850
HDC tutorial
michielstock
2
1k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
300
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
470