How to assemble an icon font from a sketch file

A designer has several different ways to transfer icons to a developer:

- separate PNG files and PNG sprite,

- separate SVG files and SVG sprite,

- icon font.

Frontend developers are increasingly accustomed to using icons in the form of a font. In the same way, popular icon sets are distributed (for example, Font Awesome). In our company, developers also ask for “give me the font”. We debugged the font layout for a while: how to automatically get a file from the Sketch file suitable for the frontend without torturing the designer.

In this post I will tell about our scheme, I will show assembly scripts. The story can be useful to frontend developers and interface designers. To a lesser extent, it will be useful to backend interface developers (classic Asp.Net MVC or something like that): the scheme will be the same, but there will be no ready configuration files and scripts.

Why do this, there is Fontello

There are many ready-made services that collect fonts from downloaded SVG files, for example fontello. We did not use any of them, because with them there can be difficulties:

The designer may accidentally break the font . If you forget and do not export the icon that you already gave, the next version of the font will be without it and the interface will break in an unknown place. The situation is aggravated by the fact that there are several designers for each product, and a total set of icons is supplemented by 5-6 people.

A good solution is a simple one, with a minimum of manual actions.

Several designers work is not easy . If several designers support one font, then there are many synchronization issues: where to store the sources, SVG files and font files, who collects and to whom it sends, how not to forget the icon.

A good solution allows you to add icons to as many designers as you like so that they do not spoil someone else's work.

It is difficult to integrate into the overall product assembly process . A stand-alone service is hard to integrate into the overall development and build process, and some also have a CI process. You have to manually collect the file with the service, upload it somewhere and somehow version it.

A good solution is embedded in the development process.

Not everyone is satisfied with the external service . Many companies do not believe in external services: they can change the set of functions, fall during the preparation of the release, become paid or close. In the end, they can hack. We are an information security company, and every time we annoy the professionally deformed security personnel and developers with the presence of an external service.

A good solution works inside the company.

Not all that is needed is formed . Some services issue a font, and icons encode with character numbers. Unfortunately, one cannot rely on these numbers. If you remove the icon or change the order, then next time the service may issue completely different codes and all icons will change unpredictably.

If you do not create a less-file with the font, then the developers will have to specify the size of the point in each use of the icon, they may forget or make a mistake.

A good solution gives developers everything they need. The icon is coded with a clear name, character codes and size are automatically substituted.

Option 1. Collect and give the font

All assembly goes on the computer of the designer. The installed Sketch is not required, but without poppy nothing will come of it. I put all the necessary files in the mikeozornin / icon-font-public repository, download it and unpack it somewhere.

Download: https://github.com/mikeozornin/icon-font-public/archive/master.zip

Step 1. Setting up the environment

All these spells must be cast once, then they will not be needed:

1) Set the brew. Brew is a package manager that makes it easy to install programs and libraries. Run the following command in the terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

2) Using brew to install fontobrabotchiki:

 brew install ttfautohint fontforge --with-python 

3) Install node.js, download here ( https://nodejs.org/en/ ) current-version and follow the instructions.

4) Install SketchTool. With Sketch installed, execute the following command in the terminal:

 /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh 

5) Install grunt. Run the following command in the terminal:

 npm install -g grunt-cli 

Step 2. Build the font file

To assemble a font, you need to open a terminal in the root folder of the project and say a spell:

 ./build.sh 

If the first time does not work, make the script executable:

 chmod +x build.sh 

The described scheme works like this:

- With SketchTool, everything that can be exported is exported from the sketch to SVG files. Please note that the icon should be covered with a slice or be placed on a separate artboard (artboard is better).

- SVG files obtained in the previous step are assembled into a font. To do this, start the font collector, which collects all SVG files into a font, converts it into the desired format.

- In parallel, the same collector generates an HTML page with a preview and a less-file for the font.

Each time the font is assembled, the designer needs to:

1) Draw an icon.

2) Collect font: ./build.sh.

3) (optional) Zakommitit sketch file, font and SVG files in git.

4) Give the font file and the less-file to the developer.

5) Tell him the name of the new icon, for example: my-icons-bell_16.

Option 2. Collect and give the font NPM-package

If there are a lot of products, designers and developers, synchronization issues arise.

I will give an example: I collected a font for one team, and then the second wanted the same icons. Should I give them the same file, or compile separately? Should a new file be sent to two teams after the icon is added? What if I want to redo half of the icons, and remove some, how to warn the developer to be attentive? What if I'm not alone, but many designers?

Developers are already able to solve such problems. For libraries, they have package and library managers (a package manager is not a position :-). Front-end developers connect libraries through NPM packages. For them, this is a familiar and convenient environment; besides, the NPM package will make font transfer more convenient. The NPM repository takes care of the distribution of the file among the developers, its versioning, the simultaneous support of two different versions of the font (new and still supported old). Most likely, if you ask the developer not to transfer the file manually, but to collect the package, he will be only too happy.

There are more steps in this way, but it’s easier to work with. We are going to pack.

Step 1. Done Wednesday

You need to configure the environment - as in the first version - and further configure the local NPM repository. What it is and how to set it up, ask your front-endder: the setting depends on the agreements adopted by the team. In addition, ask him to fix the package.json file from the bundle.

Step 2. Build the font file

Each time the font is assembled, the designer needs to do the following (new actions are italicized ):

1) Draw an icon.

2) Collect font: ./build.sh.

3) Zakmmitit sketch file, font and SVG files in git.

4) Change the version of the package in the package.json file, add the changes to the changelog.

5) Commit the package.json and changelog files.

6) Run the grunt publish command.

7) Transfer to the developer the “Release xxx version package” encryption.

8) Tell him the name of the new icon, for example: my-icons-bell_16.

Agree with the developers how to name versions, if they offer a “sever” - agree. My colleagues and I increment the minor (1.1.1 → 1.1.2), if the backward compatibility of the font is not lost, we can safely update the font in the product. If it is lost, then we change the major (1.1.1 → 1.2.0), - it is necessary to study the changes and correct something in the product code.

Option 3. Collect and give the font Nuget-package

Our entire interface works completely on the frontend (written in Angular). Backend developers use Nuget and do not use icons in any way. Therefore, I have no experience building Nuget-packages.

But if someone collects a working version with scripts and configs, I’m happy to add to the post.

What to look for when drawing icons

Sometimes an icon that looks good in Sketch gets spoiled beyond recognition in a font. To prevent this from happening, before exporting the icons, do not forget to translate everything into curves. Check what is left in the icon:

- rounding radii,

- boarders (only fills can be used),

- text labels (must be converted to curves).

After export, check the icon in the demo HTML file. Sometimes it happens that SVG shows up well, but not in HTML.

If something is not working

I did not make an example of the post from scratch, but took our working solution and cut it off a bit so that you can put it in public. He checked his working capacity, but you never know, something might have overcut it. Write, if something doesn't work, or ask your front-end assistant to help, he will figure it out.

Write if you have questions or suggestions.