Import Sketch Icons
to Asset Catalog on CI
iOSDC, 17 Sep 2017
@konifar
Slide 2
Slide 2 text
@konifar
• Twitter, GitHub : @konifar
• yome.fm with my wife
• Quipper Limited. Android Engineer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
My first Swift!
https://github.com/konifar/sketch-export-sample
Slide 5
Slide 5 text
How do you manage assets?
Designer Engineer Xcode Repository
Slide 6
Slide 6 text
How do you manage assets?
Designer Engineer Xcode Repository
Sketch
Zeplin
png/svg
ᶃ
Here is!
Slide 7
Slide 7 text
How do you manage assets?
Designer Engineer Xcode Repository
ᶄ
Manual
Script file
Put icons to
Asset Catalog!
Slide 8
Slide 8 text
How do you manage assets?
Designer Engineer Xcode Repository
ᶅ
Send PR
Checked!
Then…
Slide 9
Slide 9 text
Problems
Slide 10
Slide 10 text
Problems
• Bothering to communicate the icons between Designer and
Engineer.
Slide 11
Slide 11 text
Problems
• Bothering to communicate the icons between Designer and
Engineer.
• Bothering to put the icons to Asset Catalog.
Slide 12
Slide 12 text
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.
Slide 13
Slide 13 text
Make it automatic on CI!
Slide 14
Slide 14 text
Designer Engineer
iOS
Repository
Design
Repository
& CI
Overview
How it works?
Sample repository
https://github.com/konifar/sketch-export-sample
Slide 19
Slide 19 text
Designer Engineer
iOS
Repository
Design
Repository
& CI
1. Push Sketch file to GitHub
Sketch
ᶃ
Git Push!
Slide 20
Slide 20 text
images.sketch
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh
That’s it! So simple!
Slide 37
Slide 37 text
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
…
Slide 38
Slide 38 text
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
Good points
• Easy to manage both Android and iOS icons.
• All the engineer needs to do are only checking PR!
• Good bye human error.
Slide 45
Slide 45 text
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?
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.
Slide 49
Slide 49 text
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)