Import Sketch Icons to Assets Catalog on CI

https://iosdc.jp/2017/
https://github.com/konifar/sketch-export-sample

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
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)