Geekly Articles each Day
📜 ⬆️ ⬇️

Acronis design system. Part two. Icons, SVG fonts, Gulp



My name is Sergey, and I still work as a senior designer at Acronis. We continue to optimize the work of the product design department for business and increasingly integrate into the processes on the front-end development side.


In the last article, I talked about building a library of components, choosing tools, and interacting with developers. In this article I will focus on the little things. I'll tell you about SVG fonts, working with icons and spiced up the story with a bit of automation using Gulp.


First dive


Before the intervention, the situation with the icons looked as follows:




In the first case, PNG sprites were used, in the second, one of two fonts with approximately the same set of icons, and in the third case, the SVGs were stored in JS and inlined into the project as needed. It was an absurd situation when adding a new icon to several products turned into a tedious quest involving developers from different teams.


Designers did not lag behind and diligently maintained a similar mess in themselves. Some of the icons in the form of individual SVGs were arranged in folders, another part was stored in AI files, and the rest of the icons were available only in Sketch and Zeplin.


Problems that required a solution



Looking ahead to say that we have solved the lion's share of the problems. Actual icons collected in one place, systematized and broken down by product. The SVG font was chosen as a universal solution, and the process of updating and assembling the font was automated and taken to the side of the design.


Designers work with the terminal, commit and push all changes in git.




Sketch


In the first step, we collected all the icons in one Sketch file, divided them into products and added them to Zeplin.




With this approach, we have identified the missing, redundant and duplicating each other icons, and the developers have received visual documents for each product.


Instead of missing icons, both in layouts and in layout, we use stubs.




As soon as the missing icon appears in the font and the new build is published in npm, the stub automatically changes to the correct image.


Lingo


In the second step, we added the collected icons to Lingo and, for the convenience of the search, ran them. Now icons are searched by size, type, synonym, name, or filtered by product.




Adding icons to a new document or updating an existing document is done using the Sketch plugin that comes with Lingo. By the way, not only icons are stored in Lingo, but also the entire library of components. A little more about this application, I told in the last article .


Technical features


Any icon from the library can be painted in a different color through overrides without the need to ungroup the symbols or keep duplicates with a different color in the set. This is achieved by imposing a square mask on the shape inside the symbol.




Despite the obvious advantages, this method has one significant disadvantage. When using masks, the code after exporting SVG looked like this:




It is impossible to correctly add such an icon to the font, because of the mask in place of the icon there will be a colored rectangle. We dropped the idea of ​​keeping an additional set of "clean" icons for developers as a labor-intensive one at once and began to look for a solution. First of all, we looked in the direction of SVGO and conducted several tests:




SVGO removed a lot of unnecessary, optimized and minified code, but could not solve the main problem. A little googling, we realized that there were no suitable solutions in open access and we were faced with a choice. Either we refuse masks on the design side, or we develop our own solution.


npm run remove-mask


Of course, we chose the second option and decided to assemble our bike with reflectors and mudguards. Just in case, we checked a few dozen icons and made sure that Sketch returns roughly the same code for any exported SVG from the library.




In such a code, it is easy to find patterns, and cutting out the excess and rebuilding SVG from it is a matter of technique. The result of a short work was the gulp-task which does the following:




To start a task, it’s enough to write a single command in the console, and working with a set of 200 icons takes less than a second and gives exactly the result you need.


Svg font


Yes, it's the end of 2017, and we use SVG font. Why? Firstly, it was historically the same, and secondly, this solution turned out to be the most universal for all development teams. In addition, support for older browsers is much more important for us than the possibilities that are open when using modern techniques of working with SVG.


Up to now, on the development side, two ways of assembling fonts have been used.



Icomoon we immediately dropped because of the large amount of manual work. FontCustom, after detailed tests, was replaced by a more flexible and predictable gulp-iconfont which during installation does not require anything extra and is quite simple to configure. For each new version of the font, iconfont creates an html preview with all the icons. The preview allows you to control the quality of the icons before the changes go to the repository.




Next, the designer pushes the updated version in git, where the trigger that pulls the Jenkins task to build and publish to npm is triggered.


Let's look at the process again before the intervention:




And now after:




Instead of conclusion


We managed not only to optimize, simplify and automate the process of working with icons on both sides of the barricades, but also to improve communication between departments. Developers no longer need to run after designers and beg icons, and designers follow the quality of icons in new builds. We received a transparent interaction scheme, internal quality control and significant time savings for all participants in the process.


Special thanks to Sergey Saburov and Dmitry Kozlov for help, patience and support.


By the way, we are always glad to experienced designers. If you are one, send me an email: sergey.nikishkin@acronis.com


If you are an experienced, but not a designer, look for open vacancies on HH .


List of links



')

Source: https://habr.com/ru/post/344454/

More articles:


All Articles