Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Workflows with Sketch

Design Workflows with Sketch

A session by Clark Wimberly at Revolve Conference 2016


Revolve Conference

October 27, 2016


  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