Do you realize it’s a routine?

The idea of MCO is based on the structure of replicated identical components, cutting clips over the frame area (clip content) and set resizing parameters, depending on the direction of scaling. When you resize the frame border — you define the desired composition of the future module in design.

The number of sub-components should be sufficiently great to make the impression of infinite height or width. In fact, you will rarely find too many items to select from in a simple drop-down list. Therefore, when creating MCO the sub-components may be limited by, for example, the height or width of the screen.

For every multiline module MCO is the boosting solution

Multicomponents are about semi-automation

Now automation is sweeping through the world. If sometime in the future interface development is automated, we (designers) are likely to be left without work. If we start to think now how to automate our own work processes — this will help us to succeed…

And here MCO come forward to make design development half-automated now.

MCO example → Lists

Now let’s get back to the drop-down list to finally learn how it works. Look how easily I drag the ready-made component from design system kit, stretch it down to the level where 5 items in the list are available and then fill them with text. Quickly and easily:

Dragging the multicomponent from the panel with predefined prototyping modules

MCO example → Tabs

Tabs are a great category to create flexible multicomponent. In this case, we are interested in scalability on the X-axis as tabs are horizontal. Alas, Figma doesn’t allow us to to move objects within a subordinate component, so it is optimal to have several options of MCO dimensions for Tabs in the library:

Moreover, Material Design System kit contains different styles to choose from

MCO example → Tables

Tables are more complicated, since they must be scaled along the Y-axis to the desired number of lines and along the X-axis to the desired number of columns. Therefore, tables designer consists of two MCOs. First you form the required number of lines by the Table Base component and then place Multicolumn component, on top and give it the same height. Three versions of the cells height in the table are available in the Design System toolkit: 56, 48 and 40 pixels: