Acronis Design: Additional Designer Tools

I am Sergey, lead designer at Acronis. In this article I will talk about those tools that we not only implement, but develop for other designers within the company. It’s about Sketch plugins, console utilities and Chrome extensions.

First, let's take a quick look at the main features of our ecosystem, and then dive into the details and talk about each tool in more detail. So. Plugins can generate data for tables, save indents in buttons, translate texts into different languages, open live components, component documentation in Zeplin, and current task lists in Jira. Console utilities can clean SVG from garbage, collect icons into fonts and automatically connect these fonts to all products and services. The extension for Chrome allows you to check the layout for the correctness of the padding between elements without having to open a browser inspector or measure these indents with a ruler in the graphical editor. Now let's look at a schematic depiction of our ecosystem and try to understand everything in more detail.

Basic Sketch Plugins

The basic set of plug-ins includes not only the solutions we have written, but also open source third-party projects that we adapt to fit our needs or integrate into the as is ecosystem.

Data

There are many tables in our interfaces. Tables contain large arrays of specific data. To hammer in this specific data with your hands every time you need a new set of columns, a long and even harmful occupation. To remove part of the mechanical work from the designers, we collected a plugin with a large set of these very specific data. The principle of operation is no different from dozens of other Dummy Data Generator for Sketch. Values ​​are taken from JSON and, depending on the selected category, sequentially or randomly substituted into the selected column.

Palette

Since Acronis has products that use their own colors, we needed a solution that allows us to quickly switch between palettes instead of storing colors for all products in one big list. The plugin works with native Color Inspector, allows you to save, load or delete previously connected palettes. If you have long dreamed about this, pay attention to Sketch Palettes from Andrew Fiorillo. We use a similar implementation.

https://github.com/andrewfiorillo/sketch-palettes

Button

To work with the buttons, we use the Ken Moore Relabel Button plugin.

https://github.com/kenmoore/sketch-relabel-button

Rather, the fork, which was slightly modified and optimized for our needs. The main task of the plugin is to overwrite the text value inside the symbol and save the previously defined indents. The plugin copes with complex bindings inside the characters and does not break after the release of the next new version of Sketch.

Translate

Our products and services are available in 26 languages. English is the main language that we use in layouts. Before we give the mockups to the development, we must be sure that the drawn interface will be able to withstand the localization check. Some of the most "problem" languages ​​for localization are German and Russian (and also Polish, Italian, etc.). The length of words in these languages ​​is, on average, 20% more than in English.

The distribution of the length of words in Russian, English and German texts.
V.V. Boykov, N.A. Zhukova, L.A. Romanov. Tver Institute of Economics and Management

Before the intervention, the process looked like this: the designer copies the controversial text from Sketch, translates it using Yandex or Google Translate, returns back to Sketch, checks and then the cycle repeats. In most cases, no one systematically checked anything, and the interface went into development as is. The logical outcome of this approach is a bundle of bugs on the UI after connecting locales to test stands.

To make this part of the work less routine and more systemic (read, get designers to check the interfaces), we put together a plug-in that works through Yandex.API and can translate selected text layers into all the necessary languages.

Of course, this is machine translation. It does not take into account the peculiarities of vocabulary or terminology and, in the overwhelming majority of cases, will be very different from the translation done by a native speaker. But! Already at the design stage, it allows to work out the controversial parts of the interface in more detail and avoid many potential problems during subsequent implementation.

Autocomplete

The plugin adds autocomplete in the native dialogue to create a new character. Those who have at least once created symbols in Sketch and lined them up in a hierarchical structure, just look at the demo in order to shed a tear.

We took the original SymbolNameAutocomplete plugin from Griffin Stewie and added it to our ecosystem without any changes.

https://github.com/griffin-stewie/SymbolNameAutocomplete

Explore Sketch Plugins

Explore plug-ins allow you to link components in Sketch with live components in a sandbox, attach symbols to documentation in Zeplin, and give access to current tasks in Jira. Plugins are built using skpm and use sketch-module-web-view.

https://github.com/skpm/skpm
https://github.com/skpm/sketch-module-web-view

Playground & Docs

The Playground plugin links symbols (read components) in Sketch with live components in a sandbox. It is enough to place any of the symbols from the simple button to the integrated toolbar on the artboard and, using the menu action or shortcut on the keyboard, go to the page with the implementation of this component in the code.

Zeplin stores more than 100 files with a detailed description of the components and patterns used in the design system. To simplify the search for information on each of the components, we made the Docs plugin, which links the symbols in Sketch with the documentation in Zeplin and is the key for new designers.

Now let's look under the hood and see how it works. When we select a symbol on the artboard and launch one of the plugins, the regular expression starts to work, which looks for the postfix "-c" in the symbol names. Since some components can be combined into one section with a single name (for example, the primary button, the secondary button, the ghost button, the status button are combined into the Button section), the postfix can be located anywhere in the symbol name.

After the postfix is ​​found, the main script pulls the config.js and compares the symbol name from Sketch with the name in the dictionary. As soon as a match is found, the transition to the Web view or to Zeplin is carried out. In the case of Zeplin, you can use both https: // and zpl: // as links. For https: // the web version of Zeplin will open, and for zpl: // the application itself.

My tasks

The plugin allows you to go to the list of current tasks in Jira that are filtered by the status of NEW, OPEN, DRAFTING, IN PROGRESS. Naturally, everyone who uses the plugin sees only their current task list.

Keep-update or appcast.xml

For certain reasons, we cannot use third-party services to publish and update our plug-ins, so it was necessary to find a solution that would allow not only automatically updating plug-ins, but also prikopat them somewhere on the company's internal resources.

Starting with version 45, Sketch provides the official plugin update mechanism. A manifest line is added to manifest.json with the URL to the appcast.xml file that contains information about available updates. After the changes are made to the plugin and the request pool is sent, Jenkins is connected, which uploads the new version of the plugin to the internal server and adds the corresponding entry to appcast.xml.

Every time after launch, Sketch checks this file, looks at the available versions and compares them with the version of the installed plugin. If a new version is recorded in appcast.xml, a label indicating the presence of an update will appear in Sketch.

Console utils

Gulp clean & iconfont

Those who at least once opened the code exported from Sketch to SVG icons know that this code contains a lot of garbage that would be nice to remove before further use. In order to do this massively and as quickly as possible, we wrote a gulp task that, using a regular expression and a single command in the console, removes all unnecessary and reassembles the SVG.

Gulp iconfont collects all the "clean" icons in the font and distributes the new version to all products to which this font is connected. Before the new assembly goes into production, a preview of the font with all the glyphs opens in the browser, where you can check the correctness of the display of the added icons. You can read more about how we have automated and simplified the process of adding new icons in my previous article:

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

Chrome extensions

Inspect

Our indentation system is based on an 8px grid. Accordingly, all indents between elements that are not multiples of 8px are considered an error in the implementation on the development side. To simplify the process of checking these indents, we have made an extension for Chrome that emulates a box-model from the native browser inspector. The extension shows margins, paddings and their numeric values ​​without having to open devtools.

Instead of conclusion

It may seem to someone that all this is insanely difficult, that this is a serious development and time consuming. I hasten to reassure, it is not. We do not specifically get involved in complex development and do not do complex things for support which will have to spend a lot of time in the future. The maximum benefit for a minimum of time is our main principle for such decisions. This approach allows not only to experiment much and cheaply, but also to quickly accumulate experience and expertise in areas related to design.

Special thanks to Kirill Savelov, Dmitry Kozlov and Shawn Xu for their help, patience and support.

List of links

• https://github.com/andrewfiorillo/sketch-palettes
• https://github.com/kenmoore/sketch-relabel-button
• https://github.com/griffin-stewie/SymbolNameAutocomplete
• https://github.com/skpm/skpm
• https://github.com/skpm/sketch-module-web-view
• Publish a plugin
• Acronis design system. Part two. Icons, SVG fonts, Gulp