Import Sketch Icons to Assets Catalog on CI

by konifar

Slide 1

Slide 1 text

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 ﬁrst 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 ﬁle 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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 ﬁle 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 ﬁle 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

Slide 24

Slide 24 text

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/

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Asset Catalog Structure is simple

Slide 29

Slide 29 text

Asset Catalog Structure is simple

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

https://github.com/konifar/sketch-export-sample/blob/master/scripts/import_to_ios.sh Skip Android speciﬁc ﬁle

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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 ﬁle.          • 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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Feedbacks

Slide 44

Slide 44 text

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 ﬁx 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?

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Questions

Slide 48

Slide 48 text

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