Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. @konifar • Twitter, GitHub : @konifar • yome.fm with my

    wife • Quipper Limited. Android Engineer
  2. How do you manage assets? Designer Engineer Xcode Repository ᶄ

    Manual Script file Put icons to Asset Catalog!
  3. Problems • Bothering to communicate the icons between Designer and

    Engineer. • Bothering to put the icons to Asset Catalog.
  4. 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.
  5. 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
  6. Designer Engineer iOS Repository Design Repository & CI 1. Push

    Sketch file to GitHub Sketch ᶃ Git Push!
  7. 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
  8. 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
  9. 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
  10. 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/
  11. 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
  12. 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/
  13. 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
  14. 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 …

  15. 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
  16. Good points • Easy to manage both Android and iOS

    icons. • All the engineer needs to do are only checking PR! • Good bye human error.
  17. 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?
  18. 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.
  19. 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)