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

Import Sketch Icons to Assets Catalog on CI

konifar
September 17, 2017

Import Sketch Icons to Assets Catalog on CI

konifar

September 17, 2017
Tweet

More Decks by konifar

Other Decks in Programming

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 [email protected]
    Exported [email protected]
    Exported [email protected]
    …

    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 [email protected]
    Exported [email protected]
    Exported [email protected]
    …

    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 [email protected]
    Exported [email protected]
    Exported [email protected]
    …

    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