Figma recently released a new beta feature for authoring component properties. This feature has an amazing potential to make workflows super clean especially when it comes to designing components and working with design systems. To enable this feature you can follow the guide from Figma here.

In the past when you wanted to create different variations of a component you might need to do something like this: Imagine having to change border-radius or any other properties for these would have been a total nightmare.

But all of this going to change for good now thanks to nested instance properties. We are going to reduce these unmanageable 60+ variants to only 12 variants. The nested instances will allow us to generate different permutations of the style without having to draw everything as a variant of its own. Let’s see how we can do this in four easy steps:

Step 1/4: Create base structure component

Create an input field component and I am calling it Structure. This is going to be one of the base components and you can choose to add a dot “.” before the component name to hide it as well.

We will also create some boolean and text properties for this so we can toggle the icons, hint, mandatory field mark, and change the text straight from the properties panel.

You can create a content property by clicking on the text field you want to be editable and clicking on the pointer icon against the Content Section in the sidebar.

Similarly to create boolean properties you can select a layer that you want to toggle the visibility of. From the sidebar find the Layer section and the same pointer icon that will allow you to create a Boolean (Show/Hide) property.

After setting up all the properties, Here is what our final component looks like.

Step 2/4: Create size variants with the structure component nested within

We are going to take an instance of the component that we created earlier, wrap it in an auto-layout and create three size variants out of it with different padding

Once the variants are set, You can enable Expose properties from nested instances by going to the properties panel and selecting the option, and from the fly-out menu tick the checkbox with your base component’s name. This will allow you to play with the properties of the base component from the instances of this component.

Step 3/4: Create type variants with size components nested within

Following the same steps again, we will take an instance of the Size variant, wrap it in another auto-layout with zero padding and create two variations for a single-line input and a multi-line input.

Again in this step, we will enable the expose properties from the nested instances, notice you will see the previously inherited properties here too.

Step 4/4: Create State variants

Pretty much the same steps as we have been doing before, take an instance of the type variant component and create multiple component variations from it. This time we are making 6 state properties and we will again for this component set enable expose nested properties.

We're done! Behold wizardry in action!

If you now create an instance of your last component set you will have all the variants available from the nesting and you will be to generate states that you didn’t even manually create but Figma is smart enough to generate them for you now.

Looking back these 12 variants that we created can generate 36 (6*2*3) different variations of the same component. You can add more state variants if needed and your components will work seamlessly without breaking a sweat.