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
190
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
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
音声言語モデル手法に関する発表の紹介
Avatar for Kazuki Inamura kzinmr
0
140
Route 53 Global Resolver で高額課金発生！
Avatar for otanikohei otanikohei2023
0
130
AWS Transform CustomでIaCコードを自由自在に変換しよう
Avatar for k-kun duelist2020jp
0
160
Shipping AI Agents — Lessons from Production
Avatar for vvatanabe vvatanabe
0
290
「AIに部下10人」を3ヶ月運用してわかった、生成AI駆動開発のリアル
Avatar for おしお yoheinabe777
0
110
AI バイブコーティングでキーボード不要？！
Avatar for Sam Akada samakada
0
640
GKE Agent SandboxでAIが生成したコードを 安全に実行してみた
Avatar for Lamaglama39 lamaglama39
0
110
AIでAIをテストする - 音声AIエージェントの品質保証戦略
Avatar for Morix morix1500
1
150
データ定義の混乱と戦う 〜 管理会計と財務会計 〜
Avatar for wonohe wonohe
0
150
Agents CLI と Gemini Enterprise Agent Platform で マルチエージェント開発が楽しくなる！
Avatar for Kaz kaz1437
0
160
Standards et agents IA : un tour d’horizon de MCP, A2A, ADK et plus encore
Avatar for Guillaume Laforge glaforge
0
210
巨大プラットフォームを進化させる「第3のROI」
Avatar for Recruit recruitengineers
PRO
2
1.4k

Featured

See All Featured
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
810
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
150
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
170
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
140
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
170
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
300
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
340
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
200
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
33k

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