Icon Sets

Iconsets is a collection project that integrate all the icons on our websites(partial) and mobile application.
Design team hopes to create a icon management flow with Sketch library feature. Every designer will get updated icon when someone added a new icon or revised icons.

Why

Workflow for designers and engineers

This project is not only for deisgners' workflow but for engineers'. Frontend engineers manage icons with webfont service like Icomoon,transfering svg to TTF file and entering unique classname to apply icon as fonts on the website or application.

To combine two workflows, we decide to transfer icon to TTF on the design side. As a result, designers will be able to change icons and engineers will get updated immediately.
It's a new workflow how we face the agile iterations.

How

Gulp.js makes Sketch file into TTF

We use gulp.js to watch every change of sketch file (iconsets/ icon library). There is a gulp script names "symbols for sketch" below: symbols-for-sketch

Guideline-1

Visual weight

When creating icons, we define the 14px* 14px as the artboard size. Aware the visual weight of triangle, rectangle and circle, we adjust the size to make they have the same visual weight.

Guideline-2

Strokes

1px Strokes create the looks of icon and the 0.8px strokes descibe the details of icons.

Guideline-3

Exceptions

There are some exceptions of strokes. For example, dots and little rectangle that describe the details of icons. If we use 0.8px size, the visual weight might be too light and the details won't be clear.
As a result, we decide to make them bigger to make it balance with the whole icon structure.

Result

Iconsets

Here is what the final library looks like from now on. It will be growing as the time goes.
Link below is the sharing of how I transfer sketch file into TTF file.
Sketch to TTF