How to create a library of components in Figma, saving the budget, for example, an online auction
In this article we will describe how we developed not a spherical vacuum, but a very real library of components, and how we managed to ignore excessive perfectionism (not to the detriment of the project) to save 25% of the budgeted budget .
This is the first part of the article, in which there will be a lot of boring, but concrete practical information on the creation of components in Figma, as well as nuances, pitfalls and realities of creating projects with a limited budget in a provincial environment =)
The beginning of the work was preceded by a long period of negotiations and analytical work, on the basis of which detailed TK was written with breakdown into functional (dynamic) and static blocks. Details about it can be read in this article . If you are not working on such a TK, we highly recommend it. Exceptionally positive experience for the entire development team and the project as a whole.
But back to the design
It is worth mentioning that Figma rolled out a very pleasant update in the midst of work, so there will not be a word about color and text styles. Hopefully, an attentive reader will learn something useful for themselves without these nuances. Also, if you do not have a basic understanding of the principles of organization of components in figma, we recommend a search on habr.com (a lot of excellent materials on the topic).
Before proceeding to pixel-perfected design, we in most cases make the design concept. Usually it is a kind of raw (from the visual side) layout, which should be thoroughly thought out from the point of view of behavior on different screens and take into account the basic functionality. This is necessary in order to avoid unpleasant surprises in the future, when a forgotten block is not built into approved layout. Therefore, the concept is more a draft layout of real pages than a styleboard, which, nevertheless, gives a basic set of styles and basic layouts of future pages.
In this case, the concept was as follows:
In general, nothing complicated. The only thing that will require separate attention (on this page) is a preview of the lots (these cards), which consist of an unlimited set of positions (these lines in the cards), and a different set of buttons for different roles.
There are still some unaccounted nuances, but we agreed to be honest and do without excessive posturing, so we will tell you how they surfaced in the process.
So - everything is prepared. We have a technical specification with prescribed functionality for understanding the operation of components; styleboard as a concept for understanding the stylistics of the elements; standard naming of components for painless transfer of design in the layout, and an infinite number of tranquilizers of all varieties and colors ...
You can start poking around in the fig.
The design system development algorithm will be a movement from simple, indivisible components (atoms) to more complex ones, and for a visual display of the hierarchy we will draw each next level of complexity in a new column.
Text
First, we define indivisible elements: a standard set of headers, a paragraph, and separate styles for the text of the buttons, a style for placeholders and filter calling and something else. Do not forget to turn everything into components!
Montserrat medium as main font and Montserrat bold for headings and highlights.
Go to the icons. We fired them from the free library “Feather”
Icons
Each icon is placed in a 24x24 pixel container and centered along two axes (just in case). All icons call to taste, but with the addition of the prefix “i”, so that there are no repetitions in the names, and we group them in order not to clutter up the panel with layers.
We will also have social networking icons and additional esveshekki for notifications of unfilled inputa, reset filters, asterisk for mandatory positions in the lot, chevron for dropdowns and a check mark for checkboxes and radio battans. All these icons will be smaller and lighter than the main ones, but for the sake of standardization we also place them in a 24x24 container.
Next, go to the more complex components. We will arrange them to the right, and we will collect from elements from the first column and sticks.
Checkboxes
Let's start with something simpler.
Checkboxes and radiobuttones in containers 16x16 pixels. For each state we create a separate component. This is necessary so that in the design of the pages (collected from these components) we can replace one state with another through the INSTANCE panel.
We act in a similar way with all dynamic elements that have hover states, active, passive, etc.
Counter and slider
We also need a counter to display the amount of something. This will be different data depending on its location. Make a frame 20x20 and the number in the center.
Buttons for the slider objects will also be useful to us. We make them 30x30 and place the chevron icons conventionally in the center ,. We create components for different states.
Catalog tree
Recently, we began to adhere to the principle of re-using the same components on different devices, so as not to produce unnecessary entities and keep the code clean (as far as possible). Therefore, we make the directory tree, starting from the mobile display. TK tells us that the maximum nesting level of the tree is: 3.
Starting from the first level: a frame with a height of 60 pixels and dimensionless width (will adjust to the container), the icon is aligned vertically and recedes from the left edge by 20 pixels, the name of the branch will be from the h4 component . All this is glued to the left side in the panel CONSTRAINS. We glue the number of lots (also h4) and chevron to the right side.
Redraw component for open branch. We organize the second level of the catalog in the same way, but since we will not reuse these styles anywhere - just clone paragraph lines in increments of 20 pixels. As in Photoshop - no problems. Similarly, for the third level + stick + change the color of the line.
Next comes a series of continuous compromises.
Menu
The tab bar for all sorts of menus and tabs was placed in a 60px container in height, and the items themselves were placed in the center. Looking ahead, we say that this approach is not correct, because if you want to get a full rubber layout, each tab must be placed in a separate frame. Otherwise, it will not be possible to set the behavior of the tabs relative to each other. But we, having spoken with the developers, with a calm heart, scored this.
Lists
I remembered in time such a trifle as numbered and unnumbered lists. To add a number, we return to the first column and create a component with a two-digit number.
Inputs and filters
The moment came when we violated our own hierarchical rules and placed the components and components consisting of these components (* _______ *) in one column (recall: the rule was to place them to the right, putting them in a separate one). It was possible to do without it, but we decided that the block (filter or input) and its dropdown will be one component in different states. As Salvor Hardin said: “Never allow morals to keep you from doing the right things.”
We agreed to this compromise for the following reason: by their composition, input and, for example, checkboxes should belong to the same level of complexity (one column), but also a drop-down list in Inpute may contain checkboxes. We really wanted the drop-down lists to form a single unit with an input - for the sake of a beautiful shadow.
You can say that then it was necessary to put the input with the dropdowns in a separate (next column) and you will be right. But it was not immediately apparent to us in the process. And since the pipeline was launched, we, driven by budget and deadlines, were forced to break this unwritten law of building atomic design systems. I will say from experience - no designer or developer was hurt by it.
Let's return to the practical plane.
Inputs
Inside the frame 60px in height, we put the component of the paragraph as a placeholder. When the input is in focus, the placeholder will move up. We assign to it an indent of 20 pixels and glue it to the left edge. At the lower boundary of the block, add a line of 2 pixels (use rectangs!), Paste vertically to Bottom. Horizontally, you can choose Scale. Further on the right side, in different situations, we can have either a unit of measurement or a chevron dropdown. Add both and glue to the right edge. Now everything is neatly stretched, and all copies of this component inherit the behavior of the parent.
Add components for different states: cursor hover, focus, open dropdown, valid and disabled. One of the ways to quickly create states is as follows: we clone a component, press option + command + b, or “item instance” - via the context menu. We edit what we need and turn it into a new component. Do not forget to rename.
With filters, the situation is similar and with the exception of defaulting and adding a cross to reset values, they are no different from inputs. Lost - the inputs will go one after another in a row horizontally, so on the right we add a gray line of 2px. Do not forget to stick it to the right edge.
Buttons
Buttons in our project will be of two kinds.
The first: the usual buttons that will be used everywhere except the thumbnails of the lot preview. Their anatomy is as follows: a frame with a height of 30 pixels with a transparent background, a rectangle of a similar size with a round of 15 pixels (in the CONSTRAINTS panel we set the Scale value in both axes) and the btn-txt component that we align in all axes in the center (for every fireman - we suddenly decide increase the height of the button?) In a separate component select the style of the hover button and a separate button to click.
The second type of buttons should fit into the style of cards of the preview and have icons. In addition to the push function, the buttons will also report via a counter taken from the same column (for mercy), for example, how many times the button was pressed.
Making them from rectangles 60px in height, the width will depend on the content. We insert and center on all axes the component icons and btn-txt. We impose a counter component on the icon in such a way that its lower left corner coincides with the center of the icon. The buttons will be arranged one after another, so we add 2 pixels on each side of the gray bar for visual separation. Unnecessary then turn off on the spot. In this case, in the preview component of the lot.
We will return to this level of components, but for now we go further.
Cap
Go to the new column and begin to collect the header.
For the basis we take the frame all the same sixty pixels in height. On the bottom border we add a gray line of 2 pixels. Width take 1440px, because All desktop templates will be collected at this resolution. We follow the standard scheme already: vertical alignment in the center, 20 pixels horizontal indent, logo, menu tabs, search (it was compiled by analogy with the input in the second column).
The right side of the header should contain an information panel with the operational information of the account, as well as a drop-down list. We return to the previous column and collect this stuff from icons and text (you already know how).
In order to view the drop-down list on any template, we immediately put two components (open and closed dropdown). One turn off tyknuv in the eye on the panel layers. Do not forget to uncheck Clip Content on the BACKGROUND panel.
Next, we simplify the header for smaller screens by cropping unnecessary. We act in a proven way. We clone, detail, delete the unnecessary, add the burger icon, rename it, turn it into a component.
For 320 pixels, we can slightly move the indents between the icons.
It is time to adjust the rubber. To do this, select our “Header-desktop” component and go to the LAYOUT GRID. Switch to the speakers. The number of columns in this case does not matter, the main thing is that the grid was (for different tasks try different grids) Margins by 20 pixels. Next, configure the behavior of the nested components of the header.
In more detail about the settings of rubber patterns we will tell in the second part of this article.
Burger
Each time designing a navigation for a burger, we began to invent crutches, but not in this case. It turned out that we have everything we need for a burger, with the exception of the close button. Putting together the necessary components and turning them into a new component.
Preview Lot
Go to the cards for the preview directory. First of all, it became obvious that you need to create separate components for the buttons in the mobile display (the FGM tools do not allow you to line up the icons in the center if you just hide the text of the buttons). Go to the column with square buttons and draw the states for narrow screens. Add a three-column grid.
For the cards themselves, we first create a position line component and blocks with basic information. We group them in such a way that a mobile display can be achieved by simple rebuilding.
At this point, in order not to inflate an already immense article, take a short pause. In the second part, we will describe how the above described components are grouped and form responsive page templates.
We are sure that such an approach is still not ideal, so we will be glad to receive any comments on the topic (especially if you know how to use figuas more productively) - any of your experience will help us improve business processes. Round.