Prototyping is just how to assemble a puzzle. Multicomponent system design in Figma

    If you are working in a Figma environment, then most likely you are using components in your design processes and know what their advantages are. When in the daily freelance routine I was tired of repeating the creation of the same lists, tabs, tables or any other modules whose composition is dynamic, I began to think about automating these processes so that the routine at least proceeds faster. Thus, the multicomponents were open!



    Repeating structure


    So what is a multicomponent? MK is a component consisting of some set of repeating nested elements that can be scaled by a simple resize of the height, width, or along two axes at once. Let's look at an example. In almost every interface you can find a drop-down list. If you are a freelancer, I bet there have been plenty of such lists. Each time you first created a list item, then you determined the dimension of the list (the number of elements by height), cloned and positioned each line under each other, then combined it into a group or frame, replaced the text; and used such a component to demonstrate the action by clicking on the drop-down list. Do you realize that this is a routine?

    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


    The idea of ​​MK in the structure of propagated identical components, cutting off spacings for the frame area (clip content) and spaced resizing parameters depending on the direction of scaling (constraints). When you resize the frame border, you determine the necessary composition of the future module in the design. The number of embedded components should be so large as to give the impression of an infinite height or width. In fact, you rarely find too many items to choose from in a simple drop-down list. Therefore, when creating an MCO, the limit of nested components can be limited, for example, by the height or width of the screen.

    Semi-automation of design processes


    Now automation is pacing the world. If sometime in the future they will automate UI design / prototyping, then we will most likely be left without work. If we begin to think now how to automate our own work processes, this will help us solve more problems in one working hour. And here multicomponents come on the scene to accelerate design processes now.

    Examples


    Multicomponent for lists


    Let's now go back to the drop-down list to finally find out how it works. Watch how I simply drag and drop the finished component, stretch it down to the level where 5 list items are available, and then fill them with text. Quick and easy:



    The composition of this MK is very simple:

    1. create a master component in Fig with a list item
    2. set all dimensions and indents (in my case, on an 8dp grid)
    3. clone the list items under each other to the desired height
    4. create a new component from the multiplied fragments
    5. set the reaction rules for resizing → constraints → along the X axis “Top”, along the Y axis select “Scale”
    6. check the box “Clip content”

    Multicomponents for tabs


    Tabs are a great category to create flexible MCOs in it. In this case, we are interested in scalability along the X axis, since the tabs are horizontal. Alas, Figma does not allow moving objects inside a subordinate component, therefore it is optimal to have several dimension options for Tabs in the library:



    Multicomponents for tables


    Tables are more complex because should be scaled along the Y axis to the desired number of rows, and along the X axis to the desired number of columns. Therefore, the table designer consists of two independent MK. First, you form the desired number of rows with the Table Base module, and then overlay the Multicolumn module on top and set it to the same height:






    At the moment I am focusing on the development and development of material design systems in Figma . More recently, version 1.3 was released, in which multicomponents are already used and more than 240+ standard UI elements have been worked out. This product will really speed up your design work if you work with graphics. It will certainly be of interest to developers as well, as it allows you to assemble "combat" prototypes without design skills. You can also use it as a basis for your own design system and combine several products in the environment of Figma. See how it works:



    In conclusion, I can say that the concept of MK is superimposed on many other more complex modules in any interface. In the following posts, I will talk about more flexible and polysyllabic MK. Using them you will begin to enjoy the routine, which now will spend very little time.


    Also popular now: