Wednesday, May 11, 2022

Difficulties in design system automation

Synchronized, synchronized but not out of sync

Unfortunately, not everything can be integrated simply and cheaply. And some things are impossible.


For example, now in 2022, there is no easy way to keep components in sync for mobile development. And many integrations for the web are easier to do by hand than to automate. And parametric variations of components are also hard to do (((


For example, you have a button design. And technically, you understand how you can automatically generate it for the web, for iOS and Android applications, as well as for b2b and b2c sites. Here we will reduce, there we will convert to rem, and here we will stretch. And it seems that they wrote an algorithm and - puff-puff, ready ... But in reality it will be a custom development that needs to be supported with the help of a special person. And there is no convenient WYSIWYG interface that any designer can figure out for this.


And in reality, it’s easier to keep 4 different design systems with everything minced: tokens, repositories and live people for synchronization not only within the DC, but also between them.


But in general, everything is moving towards a brighter future, when we can change one template in Figma and it will automatically and without problems be applied to a working site and application in Apstore.


In the meantime, we are climbing the “Slope of Enlightenment” and rejoice, for example, that the guys from Yandex have created a plug-in that helps components from the Reast framework to be added to Figma. As they say, a small step for a designer, a big step for design systems!

Methods of building a design system

Let's synchronize, systematize, automate everything!


Unfortunately, so far this is only a dream, but we already know how to do something. And now I'll tell you about it in the simplest words.


First, the most popular (and perhaps the only reasonable) approach to building a design system is called "atomic". Everything is simple here: the page consists of blocks (organisms), blocks consist of forms and buttons (molecules), forms and buttons consist of lines, font, color (atoms).


Design tokens can store basic values ​​(atoms), such as color, button radius, font settings, etc. These values ​​are associated with the repository. And now, if you change the value of the token, for example, in Figma, it gets into the repository and then can be automatically synchronized with the site.


Repositories like Storybook, Git, NPM, etc. help developers keep their code organized and help with integrating it into various frameworks.


A framework is a software platform that makes it easier to work with the structure of a digital product and helps to make high-quality development. I think you have heard something about React, Angular, Vue. Here it is.

Difficulties in design system automation

Synchronized, synchronized but not out of sync Unfortunately, not everything can be integrated simply and cheaply. And some things are impos...