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
   

   View Slide

2. @konifar
   • Twitter, GitHub : @konifar
   • yome.fm with my wife
   • Quipper Limited. Android Engineer
   

   View Slide

3. View Slide

4. My first Swift!
   https://github.com/konifar/sketch-export-sample
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. How do you manage assets?
   Designer Engineer Xcode Repository
   ᶅ
   Send PR
   Checked!
   Then…
   

   View Slide

9. Problems
   

   View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

13. Make it automatic on CI!
    

    View Slide

14. Designer Engineer
    iOS
    Repository
    Design
    Repository
    & CI
    Overview
    

    View Slide

15. Designer Engineer
    iOS
    Repository
    Design
    Repository
    & CI
    Overview
    Sketch
    ᶃ
    Git Push!
    

    View Slide

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
    

    View Slide

17. Designer Engineer
    iOS
    Repository
    Design
    Repository
    & CI
    Overview
    ᶅ
    Checked!
    Merge PR
    

    View Slide

18. How it works?
    Sample repository

    https://github.com/konifar/sketch-export-sample
    

    View Slide

19. Designer Engineer
    iOS
    Repository
    Design
    Repository
    & CI
    1. Push Sketch file to GitHub
    Sketch
    ᶃ
    Git Push!
    

    View Slide

20. images.sketch
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

28. Asset Catalog Structure is simple
    

    View Slide

29. Asset Catalog Structure is simple
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    …

    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

41. Designer Engineer
    iOS
    Repository
    Design
    Repository
    & CI
    5. Check and merge PR
    ᶅ
    Checked!
    Merge PR
    

    View Slide

42. Pull Request
    https://github.com/konifar/sketch-export-sample/pull/6
    

    View Slide

43. Feedbacks
    

    View Slide

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.
    

    View Slide

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?
    

    View Slide

46. Thanks!
    Sample repository
    https://github.com/konifar/sketch-export-sample
    

    View Slide

47. Questions
    

    View Slide

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.
    

    View Slide

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)
    

    View Slide