Figma components team library. Boost your design workflow

How to accelerate your development process and finish design tasks faster than ever

Today I`d like to tell you about the power of the multicomponents (MCO). If you design in Figma, you are likely to use the components at work and are aware of their advantages. When during my daily design work I got tired of constantly creating the same lists, tabs, tables, or any other modules whose composition is dynamic, I started to think about automating these
processes to get more benefits. And MCO were discovered like this!

Figma templates, app kits, design systems

Multicomponents are seamless

So, what is a multicomponent? MCO is a component consisting of a plurality of repetitive sub-elements that can be scaled by a simple resize of height, width, or on two axes at once. Let’s look at an example. Almost every interface contains a drop-down list. If you are a freelancer, I bet you`ve developed plenty of such lists. And every time you created first the element of the list,
then you identified the dimension of the list (number of elements on the height), cloned and positioned every line under each other, then joined that in a group or a frame, replaced the text; and used this component to demonstrate the action by clicking on the drop-down list…

Accelerate design and development time by up to 50%

Material Design System for Figma consists exactly of 512 material UI components and 1171 material icons.

• Unique architecture for quick customization
• Equipped with simple & clear documentation
• Dedicated to fit desktop & mobile applications
• Made with material design guidelines following
• Uses Figma ‘Instance’ features at maximum
• Supports Figma web API for real-time integration
• Customers support 7 days per week!

Learn more → http://setproduct.com/material

If you still in doubts, I recommend you to watch the overview 🎥

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:

First you set the table base proportions, then drop column multicomponent over it

In conclusion I can say that this concept can be put on many other more complex modules in any interface. In the next Material Design System posts and updates you will see a new, more flexible and universal MCOs. Using them you will start to enjoy the routine, which now will take very little time. So, the bottom line is

MCO boosts your workflow. Guaranteed.

See for yourself:

Try out this design system

As you may have guessed, all these and many other MCO are in the design system of 1.3 version, which has been recently released. It also has more than 240 other components. This product will really speed up your design work if you are a freelancer, an agency or a staff member. You can also use it as a basis for your own design system and combine several products in the Figma tool environment. Please, visit this link for design system overview ←

Created with Material prototyping system 🔨 for Figma
❶ Explore the system → http://setproduct.com/material
❷ Components overview → http://setproduct.com/material/components
❸ More videos → http://setproduct.com/material/videos
❹ Purchase & download → http://setproduct.com/material/download
❺ 1000+ material icons → http://setproduct.com/material/icons_pro