In this article I will show how I will organize the interface structure, which will make it easy to create new sections of the product and change their design in the future.

Figma and other modern tools allow you to specify the relationship between the elements, simplifying the editing of individual components or entire screens; group them into component libraries and give the desired access rights.

These principles are now called the design language or design system. We lay the development algorithm for all graphic modules and can infinitely scale a project for all types of devices and screen resolutions.

According to the Atomic Design methodology , I will start with atoms and move on to more complex components. I will work in Fig and demonstrate that Sketch has a serious competitor.


So, modern tools turns the designer's work into a full-fledged development. The concept of a design system does not mean just a set of ui kit with conceptual rules and beautiful illustrations. This is primarily a system of visual architecture, ordered in a certain way. The concept of product design is closely correlated with it, because a design system can cover several products within one organization, presenting them to the end consumer using the proprietary “design language”. I will consider that a competent reader has long been aware of the advantages of this approach.

By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers are allowed to create beautiful applications on their own, and team leads “sprint” sprints faster using ready-made design systems for team work.

And if you have a serious project, our team is ready to deploy a design system within the organization based on our best practices and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken

Since there is a concept of “design language”, then you can “speak” it. Better yet, write. Words form phrases. A sentence consists of phrases. And a whole chapter is already being built from the proposals. This is a different metaphor for Atomic design, and I like it more. When Figma 2.0 was released in July this year, it became immediately clear that this tool is ideal for writing such a language. Or systems if you want. Small companies have the opportunity to organize competent design management for several products and not go beyond the boundaries of a single graphic editor without resorting to additional add-ons / plug-ins. However, the big companies too, just because they are so mired in the wilds of multinstrumentalism that it is now extremely difficult for them to rebuild. This is me about the fact that only Sketch they can not do for team play. Here and Craft, and InvisionApp, and Marvel,

The second version of Figma bribed me with its proximity to Sketch, working under Win Mazda, and the Developer's handoff was of particular interest. This is an editor extension specifically for developers. Developers now open the source in the browser, see all the indents and can pick up the code of any element in CSS, Swift or Android XML. The collaboration of designers and developers has become even more effective. The performance of integration of any design is accelerated by 2-4 times. Verified personally. Minimum edits; There are no bugs with indentation, fonts and dimensions. The program generates everything. The need to write some specks in documents is in the past. And if you are an independent designer, working with several clients, it is now much easier to establish effective communication with the development department in the staff of your customer.

Let's get to practice. The essence of this publication is to demonstrate a specific visual development algorithm. Simply put, design the interface in such a way that it can be customized / edited in a minimum number of steps. As a result, a component library is created, the properties of which extend to the elements associated with it. Changed there - changed everywhere. And developers don’t even need to click “refresh” - they see real-time changes on their screens. As I said above, “phrases” are formed from “words” in any design language, “sentence” is built from “phrases”, and an entire chapter consists of them. Abstractly speaking, we need the ability to quickly replace any “word” in another chapter with another.

The words. Basic elements

I'll start with the simplest elements. The “words” include headings H1, H2, H3 onwards, a paragraph of text, and icons. Any simple elements that are part of any ui kit and from which it will be possible to make a “phrase" in the future. I try to accustom myself to the order, so I will monitor the naming of elements. This is especially important if other designers and developers will use the library. A good designer begins to make it convenient not only for users, but also for colleagues.



Next, from each element I create a so-called “component” (Ctrl-Alt-K). A component in Figma is the ability to create links between similar interface units or entire sections. If I endow with such a property, for example, a paragraph of text and use it on certain screens of the interface (copy> paste), then I just need to edit the master component so that the changes spread to all screens. Using such a hierarchy is the whole point of this article. The pie chart turns purple all the “components” in the left column:

Phrases. Multiple Components

“Phrase” is a metaphor for more complex modules, which can consist of two or more simple elements. For example, a button. At least it consists of a background (most often a rectangle) and an inscription (label). Or a form for entering text (input). It has a background, a headline, and a placeholder. I will now restrict myself to just a “ghostly” button. It will consist of a rectangle without a fill and an H3 Header component.

Why is that? If the product uses several different buttons or states (primary, secondary, alternative, disabled, etc.), they are arranged on many screens and there is a need to change the font, I just need to make changes in only one place. Changing the font for the “word” component of H3 Header, I will automatically distribute these changes to the entire library and to all screens of the interface. That is why it is important to establish the correct visual development algorithm at the very beginning.

To visualize the hierarchy, I will draw more complex modules to the right. As a result, it turns out that moving from left to right we move from simple to more complex. From “words” to the whole “chapter”.



As you already noticed in the picture above, the button is highlighted, turned into component; and in the left turn you can see its composition. A diagram allows you to embed a component inside another, creating several levels of hierarchy, and each level can have its own branches. It all depends on the complexity of the design modules for the product being created. For example, if you use 5 different types of buttons in the library with the same H3 Header component, you can make changes both globally and locally. For global changes, H3 is edited at the 1st level, and for local changes, we edit the embedded component already inside a specific button and we receive changes only for those screens where such a button is present. For clarity, I recorded a video: first I change the labels on the buttons globally, and then locally on certain types.


And here some controversial specificity of the tool pops up, if you make changes locally in the desired category of buttons, then Figma considers them priority. And trying to change the component globally with the next step, you will not get the result.

Suggestions. From phrases to action.

It is time to collect something more complicated from the “phrases” and “words”. I will use the components of the 1st and 2nd levels to make a “sentence” - the next 3rd level. Recently, I have a lot of developments on e-commerce, so let's consider this step as an example of a mini-card for a window of a mobile online store.



Mini card consists of components: H2 (cost), H3 (product name), Paragraph (short description), BTN Ghost (add button), icons, background and photos. The entire composition is listed on the left of the screen above. The width of the card is selected in such a way that two in a row fit on the smartphone screen. By analogy, it should be turned into a component in order to write our first “chapter”.

This card can be called modular, because it contains the components of the first two levels. The entire product design may have a modular structure, as assembled from components similar in structure. Modularity promotes order and pleases developers, as acting on the system, it is better to take a ready-made mini-card from the library and bridge the screen to it. You can change the aspect ratio, height, width, fonts at last. Simply put: you do not need to clone a lot of different master cards in the library, in which you will be lost as your product develops. Ligma allows you to make small changes and save this master link for quick editing.

Chapter consisting of sentences

We are close to the most interesting. In the metaphor with which I started, the “chapter” is the level where independent and full-fledged application screens are presented.



In the “chapter” you can summarize many of the same type of screens, for example, various form factors. The ligma allows you to quickly set constraints (adjust adaptability), so that the mini-card can be increased for the tablet or desktop version without losing contact with the master component. In addition to all the developers, the adaptability of any module becomes clear. Questions simply do not arise.



Thus, we get even more - the translation of changes for all devices. By the way, just recently, all the components have conveniently been placed in a separate section on the left, which can be accessed through the tabs below. Modules can be added via drag'n'drop. Before that, I had to suffer a lot in searching for components scattered across the canvas when there were a lot of screens.

Result

As a result of applying such design management, we get the opportunity to quickly and quickly implement changes to the set of screens:



It is worth saying that using only these features will not make you a good designer, but it will already demonstrate your competent approach to design management. It will now be possible to solve everyday tasks more efficiently, which means that product development will definitely accelerate. In Fig, an extremely smart mass-select, almost perfect snap and one of the most advanced pen tool. And for an optimal team game, the use of such an architecture is already a necessity.

I am sure that among readers there will be those for whom this approach is already standard. Today, many concepts and principles seem quite natural, although yesterday we said “Wow!”. I think that the final wow factor in the case of Figma is the ability to use the library created according to the above principles within the organization without additional tools, plugins or add-ons. All you need to do is add all your components to the “Team library” and give out the link to all the designers and developers in the team. Designers assemble new modules and whole screens from the components of such a team design library, and developers instantly receive updates, export all elements to the code and implement them on production. Success!

Conclusion

In recent years, the concept of a team approach in interface development has changed a lot. Hype around design systems played a role. When literally every week another Western IT giant releases its own design language, its own rules and principles, it is clear that the design tool will inevitably fall on the same tracks.

Now, developers can be attributed to designers too. Because now they have a more efficient environment in which they are already comfortable with acting systematically and algorithmically, laying the right architecture, subordinating their visual development to certain principles. Although, we are still far from involving every designer in coding.

“Designers must code, but they don’t want to”. It is absolutely normal that the designer does not like to write code with his hands. We are mainly visuals. There are very few techies among designers. And all that is required to push us to coding is to provide a different approach to programming. We need a visual environment in which loops, conditions, calculations, and animations are created by simply dragging and dropping objects in the desired sequence.

It is noticeable how the market for designer tools has long been moving in one direction. Already there are enough alternatives for Sketch, once located on top of a mountain. Today there is plenty to choose from; you do not have to change your preferences in order to work in a more advanced environment. The redistribution of this market is approaching (and perhaps has already arrived). Huge companies compete with solid infusions. Figma closed another $ 17 million round this winter. And in January 2018, InvisionApp should release its Sketch; however, judging by the announcement, their “Studio” does not promise designers anything new. However, these races are very beneficial for us. This means that sooner or later an even more convenient workflow will appear, but the flip side of the coin is the need to adapt more often and migrate from tool to tool.

I bet that the market will be blown up by the first to release a combination of Webflow + Sketch in a single tool. The problem has not yet been resolved: the designer should see typography such as in a browser, and not ideally rendered in any graphics editor. Especially when the font design rules the show.

By the way, what is your ideal design tool?

PS: The source of the prototype WAS // WAS . Thanks to the habradesigners, continue to create directly in the browser (login required)