Design Workflows with Sketch

A session by Clark Wimberly at Revolve Conference 2016

Transcript

1. Design Workflow with Sketch Clark Wimberly, Designer at InVision
2. @clarklab #SketchWorkflow
3. #SketchWorkflow @clarklab @invisionapp
5. The Zebra “Priceline for Insurance” A team of about 30 folks One designer in the bunch
6. sxsw.com
7. Design Workflow with Sketch
8. <3
9. Vector-based 1 Artboards 2 Assets 3
10. "Sketch is an awesome minimalist app focused on UI design. There’s none of that image-editing sh*t in there. The team really loves it. It helps us be as fast as we can possibly be.” Joshua Porter Director of UX at Hubspot
11. Sketch Anatomy 101
12. Sketch and Photoshop
13. Raster (pixels) Vector Sketch is vector-based
14. Not for photo editing Don’t do this!
15. Plugins Are awesome Make me a liar
16. Not just a tool, a toolchain
17. Pages
18. Artboards
19. Artboards
20. Artboards
21. Symbols and styles
22. Symbols Reusable elements Update one instance, all others change
23. Symbols Let’s update that header color!
24. Symbols Update a single instance
25. Symbols The rest fall in line!
26. “Master” screens Using one view in lots of places
27. Multiple views are a snap
28. Text Styles Reusable size, color, font, spacing, etc.
29. Text Styles Change one instance, all others change
30. Pull text styles as CSS /* Article Body */ font-family: Helvetica; font-size: 20px; color: #4A4A4A; line-height: 35px;
31. Layer Styles Reusable fills, borders, shadows, etc
32. Pull layer styles as CSS /* button: */ background-image: linear-gradient(-180deg, #C8BFDB 0%, #B8A6E4 100%); border-radius: 100px; /* button-type: */ font-family: Karla-Bold; font-size: 32px; color: #FFFFFF; text-shadow: 0px 2px 0px rgba(0,0,0,0.24);
33. Export like a boss
34. Photoshop Generator & Slicy naming conventions
35. Photoshop Generator & Slicy 400% tuningfork.png, 250×250 tuningfork.jpg40% naming nightmare
36. Exporting an icon
37. Exporting an icon as a 1x PNG file
38. Exporting an icon as a 1x, 2x PNG file and resolution-independent SVG
39. Export in batches
40. or cherry pick the logos icons avatars
41. Have assets will travel 1x 2x svg png
42. Automate!
43. Automate!
44. Custom Icons Manage your collection in one place
45. Fresh baked icons Make some changes? Export the whole set at once.
46. Craft Screen Design. Supercharged.
47. Duplicate Forget copy and paste
49. Library Cloud connected team design assets
50. Library Cloud connected team design assets
52. Data Design with real data
61. Prototype Hi-fi prototypes with your real design files
63. Resizing New in Sketch 39
66. SketchTool CLI for accessing .sketch innards
67. SketchTool Exporting all slices from an icon-filled file
68. SketchTool Results!
69. Pull data from your files The sky is the limit! Also your ability.
70. 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
71. More than a design document
72. Sketch Mirror
73. Sketch Mirror
74. Sync Your team on the same page, automatically.
75. @clarklab #SketchWorkflow