Design Workflows with Sketch

Transcript

1. Design Workflow with Sketch Clark Wimberly, Designer at InVision

2. @clarklab #SketchWorkflow

3. #SketchWorkflow @clarklab @invisionapp

4. None

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

48. None

49. Library Cloud connected team design assets

50. Library Cloud connected team design assets

51. None

52. Data Design with real data

53. None
54. None
55. None
56. None
57. None
58. None
59. None
60. None

61. Prototype Hi-fi prototypes with your real design files

62. None

63. Resizing New in Sketch 39

64. None
65. None

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