Design system in Figma. Adding components by Instance

Or how to survive without search, if you’re not a team

In my last recent post One year in Figma I was referring to an absence of search functionality in Figma when you’re not a team. The problem still remains: you obtain search input only after your components were published. Damn! But how to survive without, if you an indie UI player, like me?

Before I was almost at the end of development of my Figma material design system, I noticed that cloning the component and toggling it into another one by Instance probably could be a cure. So it’s kinda lifehack, but thanks God I can convert simple button component into the whole table. And the last thing I have to do after — is simply to reset the size of a cloned object sometimes.

· Why not to just drag and drop as usual?

As a UI freelancer either I used my product for my clients every day. And sooner or later I realized there’s no reason to drag and drop any object from ‘Components’ TAB. Especially when there are hundreds of it, and constant scrolling through the thumbnails is so complicated. After I completed a couple of projects, I stopped referring to the components panel almost at all, because I got more familiar with the structure and design elements location. So I admitted it’s much faster to use ‘Instance’ dropdown menu to convert elements.

· How the toggling works?

When you dealing with huge Figma library every day, whether you want it or not after a couple of evenings will past away, you’ll learn the structure / organization of the components folder very well. And now toggling by Instance becoming your friend:

Watch this video on YouTube https://youtu.be/yFg3SVTIWMI

· What’s the pros and cons?

I guarantee you, it’s super faster to add any new UI module onto the artboard in comparison to classic drag and drop from a tab. That's the advantage. Honestly, you have to learn how to navigate faster within your system. Can you remember the path to iconic ‘Raised buttons’ or ‘Bottom bar’ with 4 icons? After a few app screens is done, you’ll be good and quick with toggling when every component location is remembered.

What’s the Figma Design System?

More info at setproduct.com

You can consider it as UI kit, prototyping kit or components library. It’s huge, and contains >500 UI components to cover designer’s every need to solve tasks faster. Every module made with attention to guidelines, scalability and 8dp grid. So, if you a material fan like me — I recommend you to try. The main purpose is a semi-automatisation of your always the same movements: creating buttons, cards, grids, tables and etc…

· How to organize the system?

Perfect organization of your design system is a primary thing. Use emojis in filenames to let to navigate with ease. Use “ / “ symbol when naming your objects to place it deeper in subfolders, or when creating instances like Dark / Light / Accent or etc. I usually keep the depth within 3 levels:

Category / Type / Properties

And in Material Design System it looks like