Design Workflow with Sketch

As the lines continue to blur between design software and browser, raster pixels seem like a worthy first casualty. With a bit of retraining, any designer or front-end worker can be poised to drop Photoshop (and pixels) forever.

Topics include:
artboards, pages, and slices
raster design gotchas
exporting from Sketch
pulling CSS from Sketch
getting ready to build / handoff

Transcript

1. Design Workflow with Sketch Clark Wimberly
2. @clarklab #RWDSummit clarklab
3. The Zebra Online insurance comparison platform A team of about 30 folks One designer in the bunch
4. Design Workflow with Sketch
5. <3
6. Plugins Are awesome Make me a liar
7. Sketch and Photoshop
8. Raster (pixels) Vector Sketch is vector-based
9. Not for photo editing Don’t do this!
10. Not just a tool, a toolchain
11. Pages
12. Artboards
13. Artboards
14. Export like a boss
15. Photoshop Generator & Slicy naming conventions
16. Photoshop Generator & Slicy 400% tuningfork.png, 250×250 tuningfork.jpg40% naming nightmare
17. Exporting an artboard at 1x
18. Exporting at 1x, 1.5x, 2x
19. Export in batches
20. or cherry pick the logos icons avatars
21. Have assets will travel 1x 2x svg png
22. Automate!
23. Symbols and styles
24. Symbols Reusable elements Update one instance, all others change
25. Symbols Let’s update that header color!
26. Symbols Update a single instance
27. Symbols The rest fall in line!
28. “Master” screens Using one view in lots of places
29. Multiple views are a snap
30. Text Styles Reusable size, color, font, spacing, etc.
31. Text Styles Change one instance, all others change
32. Pull text styles as CSS /* Article Body */ font-family: Helvetica; font-size: 20px; color: #4A4A4A; line-height: 35px;
34. Editorial Building Blocks
35. Assembled Index View
36. All the views!
37. Custom Icons Manage your collection in one place
38. Fresh baked icons Make some changes? Export the whole set at once.
39. Custom icons Use only the icons you need, not some mammoth set Get a clean folder of SVG files, all normalized in size From SVGs, go custom with Icomoon or Grunticon Grunticon SVG files into retina-ready, fallback-friendly CSS magic SVG data urls, PNG data urls, plain ol’ PNGs Asynchronously loads the right CSS based on browser
40. SketchTool Cross-platform CLI for accessing .sketch innards
41. SketchTool Exporting all slices from an icon-filled file
42. SketchTool Results!
43. Pull data from your files The sky is the limit! Also your ability.
44. SketchTool Cross-platform CLI for accessing .sketch innards sketchtool list pages filename.sketch sketchtool dump filename.sketch sketchtool export artboards filename.sketch ——output ——scale ——formats
45. More than a design document
46. CSS automagically!
47. Pull text styles as CSS /* Article Body */ font-family: Helvetica; font-size: 20px; color: #4A4A4A; line-height: 35px;
48. /* Button */ border-radius: 6px; /* Button Background: */ background-image: -o-linear-gradient(-89deg, #D8D8D8 0%, #B3B3B3 100%); background-image: -moz-linear-gradient(-89deg, #D8D8D8 0%, #B3B3B3 100%); background-image: -ms-linear-gradient(-89deg, #D8D8D8 0%, #B3B3B3 100%); background-image: linear-gradient(-179deg, #D8D8D8 0%, #B3B3B3 100%); border: 1px solid #979797; -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.20), inset 0px 2px 0px 0px #FFFFFF; box-shadow:0px 1px 2px 0px rgba(0,0,0,0.20), inset 0px 2px 0px 0px #FFFFFF; font-family: AvenirNext-Bold; font-size: 14px; color: #4A4A4A; line-height: 19px; /* button text: */ color:#FFFFFF; text-shadow: 0px 1px 0px #FFFFFF; CSS from a symbol
49. Generate a complete specimen
50. Real, stand-alone CSS
51. Living on the edge @import “typography”;
52. Maths!
53. Maths!
54. Maths!
55. Masks!
56. Blur
57. Sizing
58. Sketch Mirror
59. Sketch Mirror
60. Plugins Magical Workflow Fairies
61. Sketch Toolbox A package manager for Sketch
62. Style Inventory + Export Text Styles For those seeking adventure
63. Style Inventory + Export Text Styles For those seeking adventure
64. Dynamic Button Select type element ⌘ + J Surrounds type in shape object Style shape object Style text object Repeat
65. Dynamic Button Select type element ⌘ + J Surrounds type in shape object Style shape object Style text object Repeat
66. Content Generator Insert dummy content on the fly Avatars, names, locations, etc
67. Sketch Measure Sizes Margin or Padding Distances Properties Coordinates
68. @clarklab #RWDSummit clarklab