Import Sketch Icons to Assets Catalog on CI

35e08efcf39d692f540047fb756eb4e3?s=47 konifar
September 17, 2017

Import Sketch Icons to Assets Catalog on CI

35e08efcf39d692f540047fb756eb4e3?s=128

konifar

September 17, 2017
Tweet

Transcript

  1. Import Sketch Icons to Asset Catalog on CI iOSDC, 17

    Sep 2017 
 @konifar
  2. @konifar • Twitter, GitHub : @konifar • yome.fm with my

    wife • Quipper Limited. Android Engineer
  3. None
  4. My first Swift! https://github.com/konifar/sketch-export-sample

  5. How do you manage assets? Designer Engineer Xcode Repository

  6. How do you manage assets? Designer Engineer Xcode Repository Sketch

    Zeplin png/svg ᶃ Here is!
  7. How do you manage assets? Designer Engineer Xcode Repository ᶄ

    Manual Script file Put icons to Asset Catalog!
  8. How do you manage assets? Designer Engineer Xcode Repository ᶅ

    Send PR Checked! Then…
  9. Problems

  10. Problems • Bothering to communicate the icons between Designer and

    Engineer.
  11. Problems • Bothering to communicate the icons between Designer and

    Engineer. • Bothering to put the icons to Asset Catalog.
  12. Problems • Bothering to communicate the icons between Designer and

    Engineer. • Bothering to put the icons to Asset Catalog. • Hard to manage both Android and iOS icons for Designer.
  13. Make it automatic on CI!

  14. Designer Engineer iOS Repository Design Repository & CI Overview

  15. Designer Engineer iOS Repository Design Repository & CI Overview Sketch

    ᶃ Git Push!
  16. Designer Engineer iOS Repository Design Repository & CI Overview ᶄ

    1. Export icons by Sketch tool 2. Create Asset Catalog 3. Send PR to iOS repository Shell script
  17. Designer Engineer iOS Repository Design Repository & CI Overview ᶅ

    Checked! Merge PR
  18. How it works? Sample repository
 https://github.com/konifar/sketch-export-sample

  19. Designer Engineer iOS Repository Design Repository & CI 1. Push

    Sketch file to GitHub Sketch ᶃ Git Push!
  20. images.sketch

  21. images.sketch • Simple naming rule
 
 
 
 • Basically

    only white color icons.
 
 Simple icons are tinted programmatically. Type Rule Example Image img_{name} img_quiz_result, img_tutorial_1 Icon ic_{name}_{size} ic_quiz_24, ic_star_48
  22. git-sketch-plugin • Designers can commit and push on Sketch!
 


    
 
 
 • Generate the preview image file per Artboard, we can check the diff on Pull Request! • https://github.com/mathieudutour/git-sketch-plugin
  23. Designer Engineer iOS Repository Design Repository & CI 2. Export

    icons by Sketch tool ᶄ 1. Export icons by Sketch tool 2. Create Asset Catalog 3. Send PR to iOS repository Shell script
  24. Sketch tool 
 % sketchtool export slices images.sketch --output=out/images Exported

    ic_todo_schedule_24.png Exported ic_todo_schedule_24@1.5x.png Exported ic_todo_schedule_24@2x.png Exported ic_todo_schedule_24@3x.png …
 https://www.sketchapp.com/tool/
  25. Sketch tool 
 % sketchtool export slices images.sketch --output=out/images Exported

    ic_todo_schedule_24.png Exported ic_todo_schedule_24@1.5x.png Exported ic_todo_schedule_24@2x.png Exported ic_todo_schedule_24@3x.png …
 https://www.sketchapp.com/tool/ Prepare export settings
  26. Sketch tool 
 % sketchtool export slices images.sketch --output=out/images Exported

    ic_todo_schedule_24.png Exported ic_todo_schedule_24@1.5x.png Exported ic_todo_schedule_24@2x.png Exported ic_todo_schedule_24@3x.png …
 Export by command! https://www.sketchapp.com/tool/
  27. Designer Engineer iOS Repository Design Repository & CI 3. Create

    Asset Catalog ᶄ 1. Export icons by Sketch tool 2. Create Asset Catalog 3. Send PR to iOS repository Shell script
  28. Asset Catalog Structure is simple

  29. Asset Catalog Structure is simple

  30. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh

  31. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh Check icon files one by one

  32. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh Extract icon file name

  33. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh Skip Android specific file

  34. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh Create Asset Catalog

  35. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh

  36. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh That’s it! So simple!

  37. Vector support • Sketch tool supports to export the pdf

    file.
 
 
 
 
 • Contents.json has to be outputted as a single scale. • Always welcome your PR to the sample repository! 
 % sketchtool export slices images.sketch —formats=“pdf" Exported ic_todo_schedule_24.pdf …

  38. Designer Engineer iOS Repository Design Repository & CI 4. Send

    PR to iOS repository ᶄ 1. Export icons by Sketch tool 2. Create Asset Catalog 3. Send PR to iOS repository Shell script
  39. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh

  40. https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh Send PR if there are changes

  41. Designer Engineer iOS Repository Design Repository & CI 5. Check

    and merge PR ᶅ Checked! Merge PR
  42. Pull Request https://github.com/konifar/sketch-export-sample/pull/6

  43. Feedbacks

  44. Good points • Easy to manage both Android and iOS

    icons. • All the engineer needs to do are only checking PR! • Good bye human error.
  45. Improvements • Designer has to decide the appropriate icon name.

    • Engineer and Designer should discuss and fix the rule. 
 It’s better to introduce the linter on CI. • Sometimes Designer forgets to set the slice setting. • The slice setting is required for this tool. 
 It’s better to notice the result on slack if there is no changes. • Better to extract as a library?
  46. Thanks! Sample repository https://github.com/konifar/sketch-export-sample

  47. Questions

  48. Which CI service is the best? • You have to

    choose CI service which supports macOS because sketch tool depends on macOS. • TravisCI & Bitrise provides macOS env for free. 
 (13 Sep, 2017). • The sample repository uses TravisCI.
  49. How to introduce this automation? 1. First, create the design

    repository. 2. Unify the icon names between Android and iOS. 3. Create the simple Sketch file which has one icon. 4. Add the scripts and run them on the local for the test. 5. Integrate with CI setting. (See the sample repository)