Figma: Building a complex component with nested instances and consistent content

Last year, Figma announced a new feature called nested instances, and it was a real game changer! Instead of making variants of one component's different possibilities, you can create properties and nest components with just a few clicks without issue.

A few months ago, I was working on a project with a complex filter component used on every frame/page. Keep in mind that we had about 60+ frames, and on every single one of them, the filter component was present. The content of the filter dropdowns changed constantly. Still, when I changed my text in the main component, the text didn't update in my 60+ frames when you clicked on the filter to view the nested dropdown, which was frustrating because they had to work in an interactive prototype, so queue me having to replace the component on every frame.

I decided to research what went wrong with the component and how to make the component correctly so we don’t have to update every frame one by one ever again.

Let me show the issue:

 

TLDR; Your flyout menu is hidden by default, but you want to add some text. In this case, I listed some fruits. However, when you go to the prototype tab and hover over the component, it shows you the default text provided by the component. But using properties on the sub-items helps this issue, so let’s see how that works.

Understanding Atoms and Properties

It would be best to create your building blocks well to have a working reusable component. That's why we need to understand Atoms and how to set their properties correctly. To illustrate, let's build a navigation component. You have multiple navigation items, and each item has a flyout menu with sub-items when you hover over it. A navigation component comprises a set of navigation items — you can call these atoms. You could also see the sub-items as atoms for the main items, but let's keep it simple.

This is our atom component. Now, let's add some properties to it. The text is a property, so when you select the textbox, scroll left to the content and press the icon on the right.

If you see this icon somewhere next to a value, know you can make a property of it.

After adding the property, let’s add a variation to open/close the flyout.

‼️ You could also make a hide/show the property for the flyout menu, but keep in mind that you can’t change properties when prototyping. As for component variations, you can use the change to function in the prototype.

Now, add every sub-item as a property by using the same technique as the item. It is tedious to add every item individually and give them a unique name (as they will have different values).

Click on the main component. This is how your list should look like.

Putting it together

Atom: check! We can now create a navigation component out of multiple navigation items. You can now make multiple instances of this component and change the content of each dropdown menu in your main component, and the content will change in all instances. This is exactly what we want with a component like the navigation, as the content will be the same on every other page.

And let’s see if it works.

TLDR; On hover, it shows the updated text and will also update changes to the child instances.

[Extra] Exposing properties and simplifying instances

There are two functionalities I want to show that are not really relevant to my basic navigation component but are interesting when making a nested input component. You have multiple instances (label, some form element, error message, …).

Exposing Properties

When you have many configuration options, you must expose them to make them visible when using a child of the main component. You can use the + next to properties when selecting the main component.

Simplify Instances

The layer list on the left can be overwhelming with complex components. Figma added this clear filter to minimalize the layers that are not relevant, so you can only see the items with which you can do something.

Select your main component and press on the config icon next to it. The setting is quite hidden, so I can imagine missing it when you don't know it exists.

Wrap up

Using components in Figma is powerful but can be messy when you have no idea what you are doing. I like to make it as dynamic as possible, but Figma still has limitations. I am looking forward to the new features that will be coming next!