Figma - make system design

I greet you colleagues! My name is Dmitry Volkov and I have been working in the profession for more than ten years. I decided to write an article for those who create web and mobile design in modern programs.

Very often there is a problem when the designer made the source code, which is difficult for both the developer and another designer to work with.

Therefore, I will share my personal experience in developing interface design using the example of the popular Figma editor.

I will not talk about Figma, since there are already many articles on this topic. I just want to draw your attention to the fact that it is on a par with Sketch and Adobe XD. So my approach can easily be transferred to these editors.

Where does the interface design begin. Of course, from receiving the task, which is formed from the tasks set, testing various hypotheses, researching user experience, etc.

We assume that this is all done and we need to start working on the visual part of the interface.

I divided my work process into several steps.

Step One: Define Artboards

The uppermost artboard is called the Gui-kit. There I will collect all the interface elements and their behavior. Components will be stored there (in other programs they are called symbols).

And below I place several artboards, each of which in size corresponds to a key point in adaptive layout.

I have the following logic for the arrangement of artboards. Horizontally, I arrange artboards related to a particular screen (for example, the “main page”) including the status of the content. Vertically, I arrange other screens.

Step Two: Define Artboard Names

This is a very important step so that you don’t get confused with the layouts.

We will denote the name of the artboard as follows:

Resolution_pages_number_status_number_page title Get

:

1920x1080_01_01_home_page

And if, for example, on the main page , you need to consider changing the content, then we assign the following number to the state:

1920x1080_01_02_home_page

Step Three: Size of Modules and Modular Mesh

If we take a math notebook and look at its sheet, we will see that it is lined up in a box. So one cell from the set is called a module.
In all layouts, I use the module size in multiples of 4.



I will not tell details why this figure is and why. There are many articles on this subject. We are studying a completely different issue.

And we create a modular grid with such settings so that all columns and indents fit into the dimensions of the module. That is, they coincided with its borders. This will allow all elements to line up clearly with a step equal to the module.



We define a modular grid for each artboard. She is there.

Step Four: Designing Right

I always start with basic colors. I indicate these colors in the artboard Gui-kit. These colors may change during design work. New colors appear or old ones fade. I understand that tracking this is difficult, but it will allow you to control their number in the project.

Also, who will work with your source will get an idea of ​​their number and will know that you have “red” for the whole project.



Most of the elements in the interfaces are repeated. Therefore, components (symbols) were invented. We take the component and duplicate it several times, in different assembly areas. If necessary, due to changes to the master component, its duplicates change.

Therefore, you should try to introduce all the elements of the interface into the components. Be it icons or menu items. This is done so that if you replace the icon with another, you can easily change them throughout the project.



In Figma, you can create complex components that can contain other components and visible and invisible layers.

Therefore, many make a mistake. They create a component, add disabled layers to it, and consider that everyone knows about them. Therefore, all the states of the component must be taken out in the Gui-kit with different combinations of on and off layers.



By the way, do not forget to use bindings in components. This allows you to easily scale components if you need to resize them.



As you can see, the “favorite” icon is aligned to the top right. When you change the scale, it will always be in the same place with the same indentation as in the original one.

I think it's time to finish. Ready to answer questions in a comment. Perhaps these questions will prompt me to write the next article.

Sincerely yours,
Dmitry Volkov